I am trying to implement a custom icon for my markerclusters (instead of the regular circular clusters). I referred to the link and implemented as shown in the code below: https://www.npmjs.com/package/react-leaflet-markercluster
import { divIcon, L, Icon } from "leaflet";
const createClusterCustomIcon = function (cluster) {
return L.divIcon({
html: `<span>${cluster.getChildCount()}</span>`,
className: 'marker-cluster-custom',
iconUrl: "leaflet/group.png",
iconSize: [25, 25]
});
}
<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon}>
... My code with Markers ...
</MarkerClusterGroup>
But I keep getting:
TypeError: Cannot read properties of undefined (reading 'divIcon')
Is there a way to use custom images as icons to markerclusters? Also, is there a way to change the color of the text used to show the number of markers within a cluster? Any help would be greatly appreciated.