title: Best way to make marker resizable in leaflet
body: <p>I am trying to resize my markers every time the map is zoomed in or out. 
  Currently I am using this approach:</p>
  
  <ul>
  <li>Iterate all markers in zoomend method.</li>
  <li>get current icon size</li>
  <li>Perform some calculation to get the new marker size according the zoom size.</li>
  <li><p>set the new dimension to the icon object.</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>map.on('zoomstart', function() {
  zoomStartLevel = map.getZoom();
  </code></pre>
  
  <p>});</p>
  
  <pre><code>function getNewIconAxis(value, zoomChange) {
  if (zoomChange &gt; 0) {
      for (var i = zoomChange; i &gt; 0; i--) {
          value = value * 2;
      }
  } else {
      for (var i = zoomChange; i &lt; 0; i++) {
          value = value / 2;
      }
  }
  return value;
  </code></pre>
  
  <p>}</p></li>
  </ul>
  
  <p>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.</p>
  
  <p>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.?</p>
  
  <p>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.</p>