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


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, 2015 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, 2015 at 20:05
  • 2
    – ghybs
    Nov 25, 2015 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, 2015 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, 2015 at 21:20

2 Answers 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;

In case it should be useful to others, I wanted to resize markers on zoom so they remained roughly the same size on the ground (e.g. in kilometres): I did it using (more-or-less) this code:

map.on('zoomend', function() {
    const zoomLevel = map.getZoom();
    const iconSize = 2**zoomLevel;
    for (const marker of MyMap.markers) {
        const icon = marker.getIcon();
        icon.options.iconSize = [ iconSize, iconSize ];
        icon.options.iconAnchor = [ iconSize/2, iconSize/2 ];

It took a little investigation to realise I had to use .options to set iconSize & iconAnchor.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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