0

I am adding a geoJSON to a map using a custom divIcon (from svg) for point markers with Leaflet. The divIcon needs to resize on different zoom levels. Currently I can see the icons and the popup works, but they do not resize (and actually, they are not anchored correctly either). I have tried to reset the iconSize property on a zoom event, but that is not working; the zoom event is hit but the icon does not change. I also tried to add multiple icons to each feature (points) in the geoJSON using the 'pointToLayer' function as described in the Leaflet docs, thinking that I could toggle the opacity at different zoom levels, but this does not work either (only one icon is added). How can I use divIcons that will resize?

some code snippets:

geoJSONLayer = L.geoJson(newFeatures, {
//onEachFeature: onEachFeature,
pointToLayer: function (feature, latLng) {

    return new L.Marker(latLng, {
        icon: aDivIcon, clickable:false, opacity:1

      }).bindPopup(popupContent, popupOptions),
    new L.Marker(latLng, {
        icon: aDivIcon2, clickable:false, opacity:0

      }).bindPopup(popupContent, popupOptions); /// this doesn't work

  }
}).addTo(map);


var aDivIcon = L.divIcon({"iconSize": [12,12], "iconAnchor": Anchorvar,  "popupAnchor": Popupvar, html: '<svg class="marker-anIcon"><use xlink:href="#marker-anIcon"/></svg>'});

(event example)

map.on('zoomend', function(e) {
   if (map.getZoom() === 15)  { 
        iconSize = [12,12];
        Anchorvar = [12,12] ;
        Popupvar = [ 0, -12]; 
    } 
...
}
  • Any chance you could use an imageOverlay instead of a marker? Resizing a marker's icon with zoom would probably be quite tricky. – ghybs Nov 25 '15 at 19:53
  • we are actually resizing a divICon on zooms that using the 2nd method I described above, but for a layer with a single feature, and that is not sourced from a geoJSON. ...There will be hundreds of points; I am not sure an imageOverlay would be practical...also we need to use popups that render on a click, with properties for each point. – JasonBK Nov 25 '15 at 20:05
  • 1
    jsfiddle.net/ve2huzxw/58 – ghybs Nov 25 '15 at 21:31
  • I'll look ino that, but from what I see the images do not resize, and I am not sure how we would bind the needed properties to each feature..It doesn't seem to me that what I want to do should be that difficult? We have another layer added as a mapbox feature layer with divIcons that resize on zoom with no problems...but in the case there is no geoJSON involved. – JasonBK Nov 30 '15 at 16:13
  • Also, my co-worker reminded me that we need to dynamically change the color of the icons, so pngs won't work. – JasonBK Nov 30 '15 at 21:20
2

You might need to actually change the div's themselves.

Something like

map.on('zoomend', function(e) {
   if (map.getZoom() === 15)  {      
      var elements = document.getElementsByClassName( 'icon-wrapper' );
      for (var i=0, max=elements.length; i < max; i++) {
        elements[i].style.width      = 8;
        elements[i].style.height     = 10;
        elements[i].style.marginLeft = 4;
        elements[i].style.marginTop  = 11;
      }
    } 
...
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.