4

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?

2

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();
  • Yeah the icons are very small due to a very high zoom level, I did not explain that I have a script that the markers become a different marker on zoomout higher then 18 and my max zoomin is 22 – Sean van Beurden Jan 21 at 6:08
  • @SeanvanBeurden Could you use the proposed solution? – TomazicM Jan 21 at 17:33
  • It did not entirely work so I am still working on it. It will not change twice (meaning one time zooming in or out and the icons won't change anymore). It should be working, because this script runs at event zoomend so I do not know for sure what is wrong.. – Sean van Beurden Jan 21 at 19:12
  • I tried it and works OK for me. I hope you noticed error in my code. I had document.getElementsByClassName('iconClass'). I corrected this later to document.getElementsByClassName('redIcon'). – TomazicM Jan 21 at 19:30
  • Yes I noticed that. Thanks for the correction! – Sean van Beurden Jan 21 at 19:41

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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