[GIS] resize divIcons (svgs) at zoom levels – Leaflet

iconleafletmapboxsvgzoom

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]; 
    } 
...
}

Best Answer

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;
      }
    } 
...
}
Related Question