[GIS] What are possible values of iconSize in Leaflet Marker Icon Options

iconleafletmarkerszoom

I have a very standard script:

var redIcon = L.icon({
        iconUrl: '1.png',
        iconSize: [10, 10], // size of the icon
        iconAnchor: [5, 5], // point of the icon which will correspond to marker's location
        popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
    });

But I want the iconSize to be a variable in my script:

map.on('zoomend', function () {
var ZoomLevel = map.getZoom();
var x = ZoomLevel*0.5
var y = ZoomLevel*0.5

And then:

iconSize: [x,y],

Is this even possible?

Best Answer

You could do it like this (not very elegant and IT DOES NOT WORK - see below). First add some dummy class to your icon definition to later find icons and then on zoomend event change icon element sizes:

var redIcon = L.icon({
        iconUrl: '1.png',
        iconSize: [10, 10], 
        iconAnchor: [5, 5],
        popupAnchor: [0, -5],
        className: 'redIcon';
    });
.
.
.

function setIconSize(e) {
  var i;
  var zoomLevel = map.getZoom();
  var x = zoomLevel * 0.5;
  var y = zoomLevel * 0.5;
  var iconElements = document.getElementsByClassName('redIcon'); 
  for (i = 0; i < iconElements.length; i++) {
     iconElements[i].style.width = Math.round(x) + 'px';
     iconElements[i].style.height = Math.round(y) + 'px';
  }
};

map.on('zoomend', setIconSize); 

setIconSize();

EDIT: This does not work correctly. Markers that use this icon change postion when zooming. Obviously some internal data interdependance is broken.

There is on other possible solution. Since icons are used for markers, there can be an array of icons defined, one size for each zoom level. Then on each zoom appropriate icon could be set for markers. All markers should be in one group layer:

iconArray = [icon0, icon1, icon2, icon3, ...]
layerGoup = L.layerGroup([marker1,  marker2, markerGroup1, ...]);

layerGoup.addTo(map);

function setMarkerIcon(layer) {
   if (typeof layer.eachLayer !== 'undefined') {
     layer.eachLayer(setMarkerIcon);
     }
   else if (typeof layer.setIcon !== 'undefined') {
     var zoomLevel = Math.round(map.getZoom());
     layer.setIcon(iconArray[zoomLevel]);
   }
};

function setIconSize(e) {
  myLayerGoup.eachLayer(setMarkerIcon);
}

map.on('zoomend', setIconSize); 

setIconSize();
Related Question