1var pins_config = { 2 "pins":[ 3 { 4 "shape": "square",//either "circle" or "square" 5 "hover": "<b><u>AUSTIN</u></b><br>Write any text and load images<br><img src='example.png'>",//info of the popup 6 "pos_X": 515,//check the X, Y coordinates guide in the documentation 7 "pos_Y": 440, 8 "size": 0,//size of the pin 9 "outline": "#000080",//outline color of the pin"active": false 10 "upColor": "#1a1aff",//color of the pin when map load 11 "overColor": "#66d9ff",//color of the pin when mouse hover 12 "url": "https://www.html5interactivemaps.com/",//link to any webpage 13 "target": "new_window",// use "new_window", "same_window", "modal", or "none" 14 "active": false//true/false to activate/deactivate this pin 15 }, 16 { 17 "shape": "circle", 18 "hover": "<b><u>DALLAS</u></b><br><span style='color: #bcbcbc;'>Street Address:</span><br> 321 Example, Address 54321<br><span style='color: #bcbcbc;'>Telephone:</span><br> (256) 555-4321 / (256) 555-1234", 19 "pos_X": 573, 20 "pos_Y": 277, 21 "size": 0, 22 "outline": "#660000", 23 "upColor": "#e60000", 24 "overColor": "#ffd480", 25 "url": "https://www.html5interactivemaps.com/", 26 "target": "same_window", 27 "active": false 28 }, 29 { 30 "shape": "circle", 31 "hover": "<b><u>HOUSTON</u></b><br><span style='color: #999;'>Click to open a modal window!</span><br><span style='color: #ff6666;'><b>Modal Window Option is Compatible<br> with Bootstrap Only.</b></span>", 32 "pos_X": 649, 33 "pos_Y": 474, 34 "size": 0, 35 "outline": "#660000", 36 "upColor": "#e60000", 37 "overColor": "#ffd480", 38 "url": "#mymodal", 39 "target": "modal", 40 "active": false 41 }, 42 { 43 "shape": "circle", 44 "hover": "<b><u>BLANK4</u></b><br><span style='color: #999;'>*Click to open a webpage*</span>", 45 "pos_X": 20, 46 "pos_Y": 150, 47 "size": 0,//change the size to display this pin 48 "outline": "#660000", 49 "upColor": "#e60000", 50 "overColor": "#ffd480", 51 "url": "https://www.html5interactivemaps.com/", 52 "target": "same_window", 53 "active": false 54 }, 55 { 56 "shape": "circle", 57 "hover": "BLANK5", 58 "pos_X": 20, 59 "pos_Y": 200, 60 "size": 0,//change the size to display this pin 61 "outline": "#660000", 62 "upColor": "#e60000", 63 "overColor": "#ffd480", 64 "url": "https://www.html5interactivemaps.com/", 65 "target": "same_window", 66 "active": false 67 }, 68 { 69 "shape": "circle", 70 "hover": "BLANK6", 71 "pos_X": 20, 72 "pos_Y": 250, 73 "size": 0,//change the size to display this pin 74 "outline": "#660000", 75 "upColor": "#e60000", 76 "overColor": "#ffd480", 77 "url": "https://www.html5interactivemaps.com/", 78 "target": "same_window", 79 "active": false 80 }, 81 { 82 "shape": "circle", 83 "hover": "BLANK7", 84 "pos_X": 20, 85 "pos_Y": 300, 86 "size": 0,//change the size to display this pin 87 "outline": "#660000", 88 "upColor": "#e60000", 89 "overColor": "#ffd480", 90 "url": "https://www.html5interactivemaps.com/", 91 "target": "same_window", 92 "active": false 93 }, 94 { 95 "shape": "circle", 96 "hover": "BLANK8", 97 "pos_X": 20, 98 "pos_Y": 350, 99 "size": 0,//change the size to display this pin 100 "outline": "#660000", 101 "upColor": "#e60000", 102 "overColor": "#ffd480", 103 "url": "https://www.html5interactivemaps.com/", 104 "target": "same_window", 105 "active": false 106 }, 107 { 108 "shape": "circle", 109 "hover": "BLANK9", 110 "pos_X": 20, 111 "pos_Y": 400, 112 "size": 0,//change the size to display this pin 113 "outline": "#660000", 114 "upColor": "#e60000", 115 "overColor": "#ffd480", 116 "url": "https://www.html5interactivemaps.com/", 117 "target": "same_window", 118 "active": false 119 }, 120 { 121 "shape": "circle", 122 "hover": "BLANK10", 123 "pos_X": 50, 124 "pos_Y": 400, 125 "size": 0,//change the size to display this pin 126 "outline": "#660000", 127 "upColor": "#e60000", 128 "overColor": "#ffd480", 129 "url": "https://www.html5interactivemaps.com/", 130 "target": "same_window", 131 "active": false 132 }, 133 { 134 "shape": "circle", 135 "hover": "BLANK11", 136 "pos_X": 100, 137 "pos_Y": 400, 138 "size": 0,//change the size to display this pin 139 "outline": "#660000", 140 "upColor": "#e60000", 141 "overColor": "#ffd480", 142 "url": "https://www.html5interactivemaps.com/", 143 "target": "same_window", 144 "active": false 145 }, 146 { 147 "shape": "circle", 148 "hover": "BLANK12", 149 "pos_X": 150, 150 "pos_Y": 400, 151 "size": 0,//change the size to display this pin 152 "outline": "#660000", 153 "upColor": "#e60000", 154 "overColor": "#ffd480", 155 "url": "https://www.html5interactivemaps.com/", 156 "target": "same_window", 157 "active": false 158 }, 159 { 160 "shape": "circle", 161 "hover": "BLANK13", 162 "pos_X": 200, 163 "pos_Y": 400, 164 "size": 0,//change the size to display this pin 165 "outline": "#660000", 166 "upColor": "#e60000", 167 "overColor": "#ffd480", 168 "url": "https://www.html5interactivemaps.com/", 169 "target": "same_window", 170 "active": false 171 }, 172 { 173 "shape": "circle", 174 "hover": "BLANK14", 175 "pos_X": 250, 176 "pos_Y": 400, 177 "size": 0,//change the size to display this pin 178 "outline": "#660000", 179 "upColor": "#e60000", 180 "overColor": "#ffd480", 181 "url": "https://www.html5interactivemaps.com/", 182 "target": "same_window", 183 "active": false 184 }, 185 { 186 "shape": "circle", 187 "hover": "BLANK15", 188 "pos_X": 300, 189 "pos_Y": 400, 190 "size": 0,//change the size to display this pin 191 "outline": "#660000", 192 "upColor": "#e60000", 193 "overColor": "#ffd480", 194 "url": "https://www.html5interactivemaps.com/", 195 "target": "same_window", 196 "active": false 197 }// If you want to add more pins, you need to add comma ',' after } 198 ] 199}; 200 201// The following is the script for pins interaction DON'T EDIT !!! 202function isTouchEnabled() { 203 return (("ontouchstart" in window) 204 || (navigator.MaxTouchPoints > 0) 205 || (navigator.msMaxTouchPoints > 0)); 206} 207jQuery(function () { 208 var pins_len = pins_config.pins.length; 209 if(pins_len > 0) { 210 var xmlns = "http://www.w3.org/2000/svg"; 211 var tsvg_obj = document.getElementById("ustxjspins"); 212 var svg_circle, svg_rect; 213 for (var i = 0; i < pins_len; i++) { 214 if (pins_config.pins[i].shape === "circle") { 215 svg_circle = document.createElementNS(xmlns, "circle"); 216 svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X + 1); 217 svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y + 1); 218 svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2); 219 svg_circle.setAttributeNS(null, "fill", "rgba(0, 0, 0, 0.5)"); 220 tsvg_obj.appendChild(svg_circle); 221 svg_circle = document.createElementNS(xmlns, "circle"); 222 svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X); 223 svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y); 224 svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2); 225 svg_circle.setAttributeNS(null, "fill", pins_config.pins[i].upColor); 226 svg_circle.setAttributeNS(null, "stroke", pins_config.pins[i].outline); 227 svg_circle.setAttributeNS(null, "stroke-width", 1); 228 svg_circle.setAttributeNS(null, "id", "ustxjspins_" + i); 229 tsvg_obj.appendChild(svg_circle); 230 ustxjsAddEvent(i); 231 } 232 else if (pins_config.pins[i].shape === "square") { 233 svg_rect = document.createElementNS(xmlns, "rect"); 234 svg_rect.setAttributeNS(null, "x", pins_config.pins[i].pos_X - pins_config.pins[i].size / 2 + 1); 235 svg_rect.setAttributeNS(null, "y", pins_config.pins[i].pos_Y - pins_config.pins[i].size / 2 + 1); 236 svg_rect.setAttributeNS(null, "width", pins_config.pins[i].size); 237 svg_rect.setAttributeNS(null, "height", pins_config.pins[i].size); 238 svg_rect.setAttributeNS(null, "fill", "rgba(0, 0, 0, 0.5)"); 239 tsvg_obj.appendChild(svg_rect); 240 svg_rect = document.createElementNS(xmlns, "rect"); 241 svg_rect.setAttributeNS(null, "x", pins_config.pins[i].pos_X - pins_config.pins[i].size / 2); 242 svg_rect.setAttributeNS(null, "y", pins_config.pins[i].pos_Y - pins_config.pins[i].size / 2); 243 svg_rect.setAttributeNS(null, "width", pins_config.pins[i].size); 244 svg_rect.setAttributeNS(null, "height", pins_config.pins[i].size); 245 svg_rect.setAttributeNS(null, "fill", pins_config.pins[i].upColor); 246 svg_rect.setAttributeNS(null, "stroke", pins_config.pins[i].outline); 247 svg_rect.setAttributeNS(null, "stroke-width", 1); 248 svg_rect.setAttributeNS(null, "id", "ustxjspins_" + i); 249 tsvg_obj.appendChild(svg_rect); 250 ustxjsAddEvent(i); 251 } 252 } 253 } 254}); 255function ustxjsAddEvent(id) { 256 var obj = jQuery("#ustxjspins_" + id); 257 if(pins_config.pins[id].active === true){ 258 obj.attr({"cursor": "pointer"}); 259 obj.hover(function () { 260 jQuery("#ustxjstip").show().html(pins_config.pins[id].hover); 261 obj.css({"fill":pins_config.pins[id].overColor}); 262 }, function () { 263 jQuery("#ustxjstip").hide(); 264 obj.css({"fill":pins_config.pins[id].upColor}); 265 });
266 obj.mouseup(function(){ 267 obj.css({"fill":pins_config.pins[id].overColor}); 268 if (pins_config.pins[id].target === "new_window"){ 269 window.open(pins_config.pins[id].url); 270 } else if (pins_config.pins[id].target === "same_window") { 271 window.parent.location.href = pins_config.pins[id].url; 272 } else if (pins_config.pins[id].target === "modal") { 273 jQuery(pins_config.pins[id].url).modal("show"); 274 } 275 }); 276 obj.mousemove(function (e) { 277 var x = e.pageX + 10, y = e.pageY + 15; 278 var tipw =jQuery("#ustxjstip").outerWidth(), tiph =jQuery("#ustxjstip").outerHeight(), 279 x = (x + tipw >jQuery(document).scrollLeft() +jQuery(window).width())? x - tipw - (20 * 2) : x ; 280 y = (y + tiph >jQuery(document).scrollTop() +jQuery(window).height())? jQuery(document).scrollTop() +jQuery(window).height() - tiph - 10 : y ; 281 jQuery("#ustxjstip").css({left: x, top: y}); 282 }); 283 if (isTouchEnabled()) { 284 obj.on("touchstart", function (e) { 285 var touch = e.originalEvent.touches[0]; 286 var x = touch.pageX + 10, y = touch.pageY + 15; 287 var tipw=jQuery("#ustxjstip").outerWidth(), tiph=jQuery("#ustxjstip").outerHeight(), 288 x = (x + tipw >jQuery(document).scrollLeft() +jQuery(window).width())? x - tipw -(20 * 2) : x ; 289 y =(y + tiph >jQuery(document).scrollTop() +jQuery(window).height())? jQuery(document).scrollTop() +jQuery(window).height() -tiph - 10 : y ; 290 jQuery("#ustxjstip").show().html(pins_config.pins[id].hover); 291 jQuery("#ustxjstip").css({left:x, top:y}); 292 }); 293 obj.on("touchend", function () { 294 jQuery("#" + id).css({"fill":pins_config.pins[id].upColor}); 295 if (pins_config.pins[id].target === "new_window") { 296 window.open(pins_config.pins[id].url); 297 } else if (pins_config.pins[id].target === "same_window") { 298 window.parent.location.href = pins_config.pins[id].url; 299 } else if (pins_config.pins[id].target === "modal") { 300 jQuery(pins_config.pins[id].url).modal("show"); 301 } 302 }); 303 } 304 } 305}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.