javascriptcssleafletmarkerclusterer

Changing leaflet markercluster icon color, inheriting the rest of the default CSS properties


So, I'm trying to change the color of the markercluster icons in a leaflet map. I just want to change the color inheriting the rest of the default properties (i.e., shape, text properties, etc...).

In this an example, there is something similar to what I want to get, but they define a brand new CSS class without using the default icons styling. What I need is something like this but with custom colors:

enter image description here

I do know that I have to customize iconCreateFunction. I'm trying in this way:

CSS

.foo { background-color: red;}
.bar { background-color: blue;}

JavaScript

var markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // here there is a piece code that determines the value of the variable 'class_name' is either foo or bar
        return L.divIcon({ className: "marker-cluster-medium "+class_name});
    }
});

Unfortunately, that solution does not work and leads to a ugly icon rendering.

How can I just change the color of the default markercluster icons?


Solution

  • Your iconCreateFunction should look some thing like this...

        iconCreateFunction: function (cluster) {
         var childCount = cluster.getChildCount();
         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) });
        }
    

    ...and change CSS to something like this...

        .marker-cluster-small {
        background-color: rgba(218, 94, 94, 0.6);
        }
        .marker-cluster-small div {
        background-color: rgba(226, 36, 36, 0.6);
        }
        .marker-cluster-medium {
        background-color: rgba(241, 211, 87, 0.6);
        }
        .marker-cluster-medium div {
        background-color: rgba(240, 194, 12, 0.6);
        }
    
        .marker-cluster-large {
        background-color: rgba(253, 156, 115, 0.6);
        }
        .marker-cluster-large div {
        background-color: rgba(241, 128, 23, 0.6);
        }
    

    See the below plunker for a complete working example:

    https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview