1(function($) { 2 /* map initialization */ 3 $(document).ready(function() { 4 if($('.wp-mapbox-gl-js-map').length) { 5 var access_token = $('.wp-mapbox-gl-js-map').first().data('token'); 6 mapboxgl.accessToken = access_token; 7 8 var allMaps = {}; 9 $('.wp-mapbox-gl-js-map').each(function() { 10 var data = $(this).data(); 11 var map = false; 12 // console.log(data) 13 // window._data = data; 14 var mapStyle = { 15 'container' : $(this).attr('id'), 16 'style' : data.style 17 }; 18 var baseSettings = ['center','zoom','pitch','bearing',]; 19 baseSettings.forEach(function(setting) { 20 if(data[setting]!=='') { 21 if(setting==='center') { 22 mapStyle[setting] = data[setting].split(','); 23 } else { 24 mapStyle[setting] = parseFloat(data[setting]); 25 } 26 } 27 }); 28 // Change size of the div if store locator turned on 29 if(data.controls.locationSidebar) { 30 var originalWidth = $(this).width(); 31 var newDivWrap = document.createElement('div'); 32 $(this).attr('style', function(i, style) { 33 return style && style.replace(/width[^;]+;?/g, ''); 34 }); 35 $(this).css('width',originalWidth*0.8); 36 $(this).css('float','right'); 37 $(this).wrap(newDivWrap); 38 var locationSidebarDiv = document.createElement('div'); 39 locationSidebarDiv.className = 'wp-mapbox-gl-js-location-sidebar'; 40 locationSidebarDiv.style.width = originalWidth*0.19+'px'; 41 locationSidebarDiv.style.height = $(this).height()+'px'; 42 locationSidebarDiv.style.float = 'left'; 43 $(locationSidebarDiv).append('<p><strong>Locations</strong></p>'); 44 var thisLocationUL = document.createElement('ul'); 45 data.mapdata.forEach(function(feature, index) { 46 var bounds = getBoundingBox(feature); 47 var thisLocationLI = document.createElement('li'); 48 thisLocationLI.setAttribute('data-bounds', JSON.stringify(bounds)); 49 thisLocationLI.textContent = feature.properties.marker_title; 50 thisLocationLI.addEventListener('click', function() { 51 if($(this).data().bounds[0][0]===$(this).data().bounds[1][0]&$(this).data().bounds[0][1]===$(this).data().bounds[1][1]) { 52 map.flyTo({ 53 center : $(this).data().bounds[0], 54 zoom : 13 55 }); 56 } else { 57 map.fitBounds($(this).data().bounds) 58 } 59 }); 60 thisLocationUL.appendChild(thisLocationLI); 61 }); 62 $(locationSidebarDiv).append(thisLocationUL); 63 $(this).parent().prepend(locationSidebarDiv) 64 } 65 66 map = new mapboxgl.Map(mapStyle); 67 allMaps[$(this).attr('id')] = map; 68 69 map.on('load',function() { 70 71 // console.log('DATA.CONTROLS', data.controls) 72 // Add controls 73 if(data.controls.navigation) { 74 var navControl = new mapboxgl.NavigationControl(); 75 map.addControl(navControl); 76 } 77 if(data.controls.geocoder) { 78 var geocoder = new MapboxGeocoder({ 79 accessToken: access_token 80 }); 81 map.addControl(geocoder,'top-left'); 82 } 83 if(data.controls.scale) { 84 var scale = new mapboxgl.ScaleControl({ 85 maxWidth: 80, 86 unit: 'metric' 87 }) 88 map.addControl(scale,'top-left'); 89 } 90 if(data.controls.fullscreen) { 91 var fullscreen = new mapboxgl.FullscreenControl(); 92 map.addControl(fullscreen,'top-right'); 93 } 94 if(data.controls.directions) { 95 var mapboxDirections = new MapboxDirections({ 96 accessToken: mapboxgl.accessToken, 97 interactive: false 98 }); 99 100 window['_mapboxDirections'] = mapboxDirections; 101 map.addControl(mapboxDirections, 'top-left'); 102 } 103 if(data.controls.directions && data.controls.preFillInput && window['_mapboxDirections']) { 104 window['_mapboxDirections'].setOrigin(data.mapOrigin); 105 window['_mapboxDirections'].setDestination(data.mapDestination); 106 } 107 108 // scrollZoom setting 109 if (data.scrollZoom === false) { 110 map.scrollZoom.disable(); 111 } else if (data.scrollZoom === true) { 112 map.scrollZoom.enable(); 113 114 } 115 116 if (data.controls.geolocaterControl) { 117 const geolocaterControl = new mapboxgl.GeolocateControl({ 118 positionOptions: { enableHighAccuracy: true }, 119 trackUserLocation: true 120 }); 121 map.addControl(geolocaterControl); 122 } 123 124 // Layer filter 125 if (data.controls.layerFilter) { 126 const layerControl = new CustomLayerControl({ 127 layers : data.mapLayersFilter 128 }); 129 map.addControl(layerControl, 'top-left'); 130 } 131 132 // Category filter 133 if (data.controls.categoryFilter) { 134 const categoryControl = new CustomCategoryControl({ 135 categories : data.mapCategories, 136 mapData : data.mapdata 137 }); 138 map.addControl(categoryControl, 'top-left'); 139 } 140 141 // Map data add 142 data.mapdata.forEach(function(feature, index) { 143 var featureCollection = { 144 "type" : "FeatureCollection", 145 "features" : [feature] 146 } 147 // If only a marker icon or color has changed 148 if(typeof map.getSource(feature.id)==='undefined') { 149 if(typeof feature.properties.opacity === 'undefined') { 150 feature.properties.opacity = 0.4; 151 } 152 map.addSource(feature.id, { 153 "type": "geojson", 154 "data": featureCollection 155 }); 156 if(feature.geometry.type==='Point') { 157 // Add the icon image, then add layer 158 if(!map.hasImage(feature.properties.marker_icon_url)) { 159 if(feature.properties.marker_icon_url.indexOf('http') === -1) { 160 map.loadImage($('#wp_mapbox_gl_js_plugin_url').val()+'/wp-mapbox-gl-js/admin/wp-mapmaker/public/img/'+feature.properties.marker_icon_url, function(error, image) { 161 if (error) throw error; 162 map.addImage(feature.properties.marker_icon_url, image); 163 // default_marker.svg 164 var lineLayer = map.addLayer({ 165 'id': feature.id, 166 'type': 'symbol', 167 'source' : feature.id, 168 'layout': { 169 'icon-image': feature.properties.marker_icon_url, 170 'icon-anchor' : 'bottom', 171 'icon-size' : 0.2 172 } 173 }) 174 if(feature.properties.popup_open) { 175 var popup = new mapboxgl.Popup({ 176 offset : 20 177 }); 178 popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]}) 179 .setHTML( 180 '<div>'+ 181 '<div>'+feature.properties.description+'</div>'+ 182 '</div>' 183 ).addTo(map); 184 } 185 }); 186 } else { 187 var canvas = document.createElement('canvas'); 188 var ctx = canvas.getContext('2d'); 189 var img = document.createElement('img'); 190 img.onload = function() { 191 var sizingOfImage = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[1]; 192 var widthHeight = sizingOfImage ? sizingOfImage.split('-') : [100,100]; 193 canvas.width = widthHeight[0]; 194 canvas.height = widthHeight[1]; 195 ctx.drawImage(img, 0, 0, widthHeight[0], widthHeight[1]); 196 map.addImage(feature.properties.marker_icon_url, ctx.getImageData(0, 0, widthHeight[0], widthHeight[1]) ); 197 var markerOverlap = true; 198 if(typeof data.controls.markerNoDisappear !== 'undefined') { 199 markerOverlap = data.controls.markerNoDisappear; 200 } 201 var lineLayer = map.addLayer({ 202 'id': feature.id, 203 'type': 'symbol', 204 'source' : feature.id, 205 'layout': { 206 'icon-image': feature.properties.marker_icon_url, 207 'icon-anchor' : feature.properties.marker_icon_anchor, 208 'icon-size' : 0.2, 209 'icon-allow-overlap' : markerOverlap 210 } 211 }) 212 if(feature.properties.popup_open) { 213 var popup = new mapboxgl.Popup({ 214 offset : 20, 215 className: 'wp_mapbox_gl_js_frontend_popup' 216 }); 217 popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]}) 218 .setHTML( 219 '<div>'+ 220 '<div>'+feature.properties.description+'</div>'+ 221 '</div>' 222 ).addTo(map); 223 224 popup._container.style.maxWidth = "66%"; 225 } 226 }; 227 img.src = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[0]; 228 } 229 } else { 230 var lineLayer = map.addLayer({ 231 'id': feature.id, 232 'type': 'symbol', 233 'source' : feature.id, 234 'layout': { 235 'icon-image': feature.properties.marker_icon_url, 236 'icon-anchor' : 'bottom', 237 'icon-size' : 0.2 238 } 239 }) 240 } 241 if(feature.properties.description!=='') { 242 map.on('click',feature.id,function(e) { 243 var popup = new mapboxgl.Popup({ 244 offset : 20, 245 className: 'wp_mapbox_gl_js_frontend_popup' 246 }) 247 popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]}) 248 .setHTML( 249 '<div>'+ 250 '<div>'+feature.properties.description+'</div>'+ 251 '</div>' 252 ).addTo(map); 253 254 popup._container.style.maxWidth = "66%"; 255 }) 256 } 257 } else if(feature.geometry.type==='Polygon') { 258 if(feature.fillType) { 259 var lineLayer = map.addLayer({ 260 'id': feature.id, 261 'type': 'fill-extrusion', 262 'source' : feature.id, 263 'paint': { 264 'fill-extrusion-color' : feature.properties.color, 265 'fill-extrusion-opacity' : feature.properties.opacity, 266 'fill-extrusion-height' : feature.properties.height, 267 'fill-extrusion-base' : feature.properties.base_height 268 } 269 }) 270 } else { 271 var lineLayer = map.addLayer({ 272 'id': feature.id, 273 'type': 'fill', 274 'source' : feature.id, 275 'paint': { 276 'fill-color' : feature.properties.color, 277 'fill-opacity' : feature.properties.opacity 278 } 279 }) 280 } 281 } else if(feature.geometry.type==='LineString') { 282 var lineLayer = map.addLayer({ 283 'id': feature.id, 284 'type': 'line', 285 'source' : feature.id, 286 'paint': { 287 'line-color' : feature.properties.color 288 } 289 }) 290 } 291 } 292 }); 293 }); 294 }); 295 296 $(document).on('click','.wp-mapbox-gl-js-map-menu input',function() { 297 allMaps[$(this).data('map-id')].setStyle($(this).attr('id')); 298 }); 299 $(document).on('click','#wp_mapbox_gl_js_set_directions',function(e) { 300 e.preventDefault(); 301 var coords = $(this).data('lngLat'); 302 window._mapboxDirections.setDestination(coords); 303 }); 304 } 305 306 // Custom Layer Control Class 307 class CustomLayerControl { 308 // Commented b/c it was throwing errors 309 // _options: { 310 // layers: [] 311 // }; 312 313 constructor(options) { 314 const _options = { layers: [] }; 315 316 this._options = Object.assign({}, _options, options) 317 } 318 319 addHeading() { 320 var heading = document.createElement('h3'); 321 heading.appendChild(document.createTextNode('Layer Filter')); 322 return heading; 323 } 324
325 onAdd(map){ 326 this.map = map; 327 this.container = document.createElement('div'); 328 this.container.className = 'mapboxgl-ctrl wp-mapbox-gl-js-custom-layer-control'; 329 this.container.appendChild(this.addHeading()); 330 331 var thisCategoryDiv = this._addLayers(this._options.layers); 332 this.container.appendChild(thisCategoryDiv); 333 return this.container; 334 } 335 336 onRemove(){ 337 this.container.parentNode.removeChild(this.container); 338 this.map = undefined; 339 } 340 341 _addLayers(layers) { 342 const el = window.document.createElement('div') 343 layers.forEach(function(layer) { 344 const innerElement = window.document.createElement('div') 345 const input = window.document.createElement('input') 346 input.type = "checkbox"; 347 input.checked = "checked"; 348 input.name = layer; 349 input.value = layer; 350 input.id = 'wp-mapbox-gl-js-'+layer; 351 input.addEventListener('change',(e)=>{ 352 if(e.target.checked) { 353 this.map.setLayoutProperty(layer,'visibility','visible'); 354 } else { 355 this.map.setLayoutProperty(layer,'visibility','none'); 356 } 357 }); 358 innerElement.appendChild(input) 359 360 var label = document.createElement('label') 361 label.htmlFor = 'wp-mapbox-gl-js-'+layer;; 362 label.appendChild(document.createTextNode(layer)); 363 innerElement.appendChild(label) 364 365 el.appendChild(innerElement); 366 }.bind(this)); 367 return el; 368 } 369 370 updateLayers(layers) { 371 this.container.innerHTML = ''; 372 this.container.appendChild(this.addHeading()); 373 var thisLayerDiv = this._addLayers(layers); 374 this.container.appendChild(thisLayerDiv); 375 } 376 377 } 378 379 // Custom Category Control Class 380 class CustomCategoryControl { 381 // _options: { 382 // categories: [], 383 // mapData : [] 384 // }; 385 386 constructor(options) { 387 const _options = { categories: [], mapData : [] }; 388 389 this._options = Object.assign({}, _options, options); 390 } 391 392 addHeading() { 393 var heading = document.createElement('h3'); 394 heading.appendChild(document.createTextNode('Filter')); 395 return heading; 396 } 397 398 onAdd(map){ 399 this.map = map; 400 this.container = document.createElement('div'); 401 this.container.className = 'mapboxgl-ctrl wp-mapbox-gl-js-custom-category-control'; 402 this.container.appendChild(this.addHeading()); 403 404 var thisCategoryDiv = this._addCategories(this._options.categories); 405 this.container.appendChild(thisCategoryDiv); 406 return this.container; 407 } 408 409 onRemove(){ 410 this.container.parentNode.removeChild(this.container); 411 this.map = undefined; 412 } 413 414 _addCategories(categories) { 415 const el = window.document.createElement('div') 416 categories.forEach(function(category) { 417 const innerElement = window.document.createElement('div') 418 const input = window.document.createElement('input') 419 input.type = "checkbox"; 420 input.checked = "checked"; 421 input.name = category; 422 input.value = category; 423 input.id = 'wp-mapbox-gl-js-'+category; 424 input.addEventListener('change',(e)=>{ 425 if(e.target.checked) { 426 this._options.mapData.forEach(function(feature) { 427 if(feature.properties.category===e.target.value) { 428 this.map.setLayoutProperty(feature.id,'visibility','visible'); 429 } 430 }.bind(this)); 431 } else { 432 this._options.mapData.forEach(function(feature) { 433 if(feature.properties.category===e.target.value) { 434 this.map.setLayoutProperty(feature.id,'visibility','none'); 435 } 436 }.bind(this)); 437 } 438 }); 439 innerElement.appendChild(input) 440 441 var label = document.createElement('label') 442 label.htmlFor = 'wp-mapbox-gl-js-'+category;; 443 label.appendChild(document.createTextNode(category)); 444 innerElement.appendChild(label) 445 446 el.appendChild(innerElement); 447 }.bind(this)); 448 return el; 449 } 450 451 updateCategories(categories) { 452 this.container.innerHTML = ''; 453 this.container.appendChild(this.addHeading()); 454 var thisCategoryDiv = this._addCategories(categories); 455 this.container.appendChild(thisCategoryDiv); 456 } 457 458 updateMapData(mapData) { 459 this._options.mapData = mapData; 460 } 461 } 462 }); 463 464 function getBoundingBox(data) { 465 var bounds = {}, coords, point, latitude, longitude; 466 467 coords = data.geometry.coordinates; 468 469 if(!isNaN(coords[0])) { 470 longitude = coords[0]; 471 latitude = coords[1]; 472 bounds = [] 473 bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude; 474 bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude; 475 bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude; 476 bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude; 477 } else if(!isNaN(coords[0][0])) { 478 for (var j = 0; j < coords.length; j++) { 479 longitude = coords[j][0]; 480 latitude = coords[j][1]; 481 bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude; 482 bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude; 483 bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude; 484 bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude; 485 } 486 } else { 487 for (var j = 0; j < coords[0].length; j++) { 488 longitude = coords[0][j][0]; 489 latitude = coords[0][j][1]; 490 bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude; 491 bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude; 492 bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude; 493 bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude; 494 } 495 } 496 var boundsToReturn = [[bounds.xMin, bounds.yMin], [bounds.xMax, bounds.yMax]]; 497 return boundsToReturn; 498 } 499})(jQuery);
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.