Changing leaflet markercluster icon color, inheriting the rest of the default CSS properties
Solution 1
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 give css some thing 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 complete working example
https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview
Solution 2
It's so simple just add CSS in your global.css or style.css file
.marker-cluster-small {
background-color: #49afa5 !important;
}
.marker-cluster-small div {
background-color: #1c9489 !important;
color: #fff !important;
}
Comments
-
floatingpurr almost 2 years
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:
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?
-
floatingpurr about 6 yearsHello, in that way you do not have the default bubbles icons. I added an image in the original question for clarifying.
-
Punith Jain about 6 years@floatingpurr do you have the link of the working example of the image you placed
-
floatingpurr about 6 yearsYes, you can find an example here. That's the default behavior of the library.
-
Mawg says reinstate Monica over 3 yearsDid you ever find how to maintain the default bubbles, etc, changing only the icon colo(u)r?
-
Mawg says reinstate Monica over 3 yearsThat would affect all cluster groups. The OP wants one to be default and the other to have different colo(u)rs, to be able to differentiate.