3

In my leaflet application, I would like to reduce the size of cluster icons by half and also modify the font size of the value inside of the icon:

enter image description here

Having read the documentation on github, I have tried changing values under iconSize in the iconCreateFunction:

return new L.DivIcon({ 
  html: '<div><span>' + childCount + '</span></div>', 
  className: 'marker-cluster' + c, 
  iconSize: new L.Point(40, 40) 
});

But this does not appear to change anything. Is there a known workaround for changing the size of cluster icons and their text?

2

The iconSize option controls the size of the container DOM element for the icon/divicon. The actual visible size depends on the CSS rules applied to the container and the contents.

Look at the default CSS rules applied to your cluster markers: they contain hard-coded sizes in pixels, which are applied regardless of the size of the container.

  • strangely, changing width and height under marker-cluster div has no effect – the_darkside May 2 '17 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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