Changeset 2375904

Timestamp:

09/05/2020 09:07:04 PM (6 years ago)

Author:

tempranova

Message:

fixing old marker icons

File:

• wp-mapbox-gl-js/trunk/public/js/wp-mapbox-gl-js-public.js (modified) (1 diff)

wp-mapbox-gl-js/trunk/public/js/wp-mapbox-gl-js-public.js

@@ -157 +157 @@
                  // Add the icon image, then add layer
                  if(!map.hasImage(feature.properties.marker_icon_url)) {
-                   var canvas = document.createElement('canvas');
-                   var ctx = canvas.getContext('2d');
-                   var img  = document.createElement('img');
-                   img.onload = function() {
-                     var sizingOfImage = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[1];
-                     var widthHeight = sizingOfImage ? sizingOfImage.split('-') : [100,100];
-                     canvas.width  = widthHeight[0];
-                     canvas.height = widthHeight[1];
-                     ctx.drawImage(img, 0, 0, widthHeight[0], widthHeight[1]);
-                     map.addImage(feature.properties.marker_icon_url, ctx.getImageData(0, 0, widthHeight[0], widthHeight[1]) );
-                     var markerOverlap = true;
-                     if(typeof data.controls.markerNoDisappear !== 'undefined') {
-                       markerOverlap = data.controls.markerNoDisappear;
-                     }
-                     var lineLayer = map.addLayer({
-                       'id': feature.id,
-                       'type': 'symbol',
-                       'source' : feature.id,
-                       'layout': {
-                         'icon-image': feature.properties.marker_icon_url,
-                         'icon-anchor' : feature.properties.marker_icon_anchor,
-                         'icon-size' : 0.2,
-                         'icon-allow-overlap' : markerOverlap
+                   if(feature.properties.marker_icon_url.indexOf('http') === -1) {
+                     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) {
+                       if (error) throw error;
+                       map.addImage(feature.properties.marker_icon_url, image);
+                       // default_marker.svg
+                       var lineLayer = map.addLayer({
+                         'id': feature.id,
+                         'type': 'symbol',
+                         'source' : feature.id,
+                         'layout': {
+                           'icon-image': feature.properties.marker_icon_url,
+                           'icon-anchor' : 'bottom',
+                           'icon-size' : 0.2
+                         }
+                       })
+                       if(feature.properties.popup_open) {
+                         var popup = new mapboxgl.Popup({
+                           offset : 20
+                         });
+                         popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]})
+                           .setHTML(
+                             '<div>'+
+                               '<div>'+feature.properties.description+'</div>'+
+                             '</div>'
+                           ).addTo(map);
                        }
-                     })
-                     if(feature.properties.popup_open) {
-                       var popup = new mapboxgl.Popup({
-                         offset : 20,
-                         className: 'wp_mapbox_gl_js_frontend_popup'
-                      });
-                       popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]})
-                         .setHTML(
-                           '<div>'+
-                             '<div>'+feature.properties.description+'</div>'+
-                           '</div>'
-                         ).addTo(map);
-
-                        popup._container.style.maxWidth = "66%";
-                      }
-                   };
-                   img.src = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[0];
+                     });
+                   } else {
+                     var canvas = document.createElement('canvas');
+                     var ctx = canvas.getContext('2d');
+                     var img  = document.createElement('img');
+                     img.onload = function() {
+                       var sizingOfImage = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[1];
+                       var widthHeight = sizingOfImage ? sizingOfImage.split('-') : [100,100];
+                       canvas.width  = widthHeight[0];
+                       canvas.height = widthHeight[1];
+                       ctx.drawImage(img, 0, 0, widthHeight[0], widthHeight[1]);
+                       map.addImage(feature.properties.marker_icon_url, ctx.getImageData(0, 0, widthHeight[0], widthHeight[1]) );
+                       var markerOverlap = true;
+                       if(typeof data.controls.markerNoDisappear !== 'undefined') {
+                         markerOverlap = data.controls.markerNoDisappear;
+                       }
+                       var lineLayer = map.addLayer({
+                         'id': feature.id,
+                         'type': 'symbol',
+                         'source' : feature.id,
+                         'layout': {
+                           'icon-image': feature.properties.marker_icon_url,
+                           'icon-anchor' : feature.properties.marker_icon_anchor,
+                           'icon-size' : 0.2,
+                           'icon-allow-overlap' : markerOverlap
+                         }
+                       })
+                       if(feature.properties.popup_open) {
+                         var popup = new mapboxgl.Popup({
+                           offset : 20,
+                           className: 'wp_mapbox_gl_js_frontend_popup'
+                        });
+                         popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]})
+                           .setHTML(
+                             '<div>'+
+                               '<div>'+feature.properties.description+'</div>'+
+                             '</div>'
+                           ).addTo(map);
+
+                          popup._container.style.maxWidth = "66%";
+                        }
+                     };
+                     img.src = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[0];
+                   }
                  } else {
                    var lineLayer = map.addLayer({