[GIS] Adjust size of clustering icon in leaflet

clusteringgeojsonleaflet

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?

Best Answer

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.

Related Question