CODEWITHSUNDEEP
leafletleaflet.markercluster
kishore kumar
kishore kumar

Reputation: 29

How can I set custom CSS on clusters in Leaflet.markercluster

leaflet clustersI want to set different styles on each cluster based on the clusters child count in the layer

that means for example if the cluster had values like 5, 12, 109, 1900, 21900 then the circle sizes should be increased by 10px of the next size, something like as shown in the image enter image description here,

const markers = new window.L.MarkerClusterGroup({
            iconCreateFunction: function (cluster) {
                var childCount = cluster.getChildCount();
                console.log({childCount, cluster,tempClusterCount, pr:cluster, c:cluster.getAllChildMarkers()})
                var c = ' marker-cluster-';
                if (childCount < 10) {
                  c += 'small';
                } 
                else if (childCount < 100) {
                  c += 'medium';
                } 
                else {
                  c += 'large';
                }
               
                return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
                 className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
                },
                
        });

with the above code, we can add the custom class based on the custom condition, but I want to check all the other clusters on the layer, do we have any method to get parent clusters details?

do we have any method to get parent cluster details from a cluster?

something like :

const markers = new window.L.MarkerClusterGroup({             iconCreateFunction: function (cluster) {                 var childCount = cluster.parent.getChildCount(); } })

Upvotes: 0

Views: 107

Answers (0)

Related Questions