Best way to make marker resizable in leaflet

Question

I am trying to resize my markers every time the map is zoomed in or out. Currently I am using this approach:

• Iterate all markers in zoomend method.
• get current icon size
• Perform some calculation to get the new marker size according the zoom size.

• set the new dimension to the icon object.

  map.on('zoomend', function() {
  zoomEndLevel = map.getZoom();
  var difference = zoomEndLevel - zoomStartLevel;
  console.log("difference in zoom " + difference);
  markerArray.forEach(function(marker) {
      var icon = marker.options.icon;
      var oldX = icon.options.iconSize[0];
      var oldY = icon.options.iconSize[1];
      var newX = getNewIconAxis(oldX, difference);
      var newY = getNewIconAxis(oldY, difference);
      console.log(newX + " " + newY);
      icon.options.iconSize = [ newX, newY ];
      marker.setIcon(icon);
  });
  

  });

  map.on('zoomstart', function() {
  zoomStartLevel = map.getZoom();
  

  });

  function getNewIconAxis(value, zoomChange) {
  if (zoomChange > 0) {
      for (var i = zoomChange; i > 0; i--) {
          value = value * 2;
      }
  } else {
      for (var i = zoomChange; i < 0; i++) {
          value = value / 2;
      }
  }
  return value;
  

  }

Problem : This code works fine if I zoom in and out 1 level at once. If I scroll in and out my mouse too frequently then this code given strange outputs. Sometimes the marker size becomes too large or too small.

Question : 1) Is this the only way to make the markers resizable on different zoom levels? 2) If yes then what am I missing here or what changes should be made to make it work perfectly.?

Note : Tagging google maps also because it's more of a logical issue with map (either google or leaflet or mapbox) rather than api specific issue.

Answer 1

Looks like there are several previous posts that you guide you:

• Mapbox,leaflet: Increase marker size on Zoom
• is there a way to resize marker icons depending on zoom level in leaflet?
• https://gis.stackexchange.com/questions/171609/resize-divicons-svgs-at-zoom-levels-leaflet

As for your bug, instead of reading the current icon size value at "zoomstart" event, you might better remember the previous zoom value and read it only at "zoomend" event. I am not sure the "zoomstart" event is fired only once when you scroll (to zoom in/out) successively, while the "zoomend" event may be fired only at the very end.