Starting from the custom example from the github repo, modify the iconCreateFunction to add a different css class based on the size of the cluster:
iconCreateFunction: function (cluster) {
var markers = cluster.getAllChildMarkers();
var n = 0;
for (var i = 0; i < markers.length; i++) {
n += markers[i].number;
}
var small = n < 200;
var className = small ? 'mycluster1' : 'mycluster2';
var size = small ? 40 : 60;
return L.divIcon({ html: n, className: className, iconSize: L.point(size, size) });
}
So if a cluster has less than 200 features it gets mycluster1
, otherwise it gets mycluster2
.
Here's the associated CSS:
.mycluster1 {
border-radius: 20px;
width: 40px;
height: 40px;
background-color: greenyellow;
text-align: center;
font-size: 24px;
}
.mycluster2 {
border-radius: 30px;
width: 60px;
height: 60px;
background-color: #ffdb58;
text-align: center;
font-size: 24px;
padding-top: 10px;
box-sizing: border-box;
}
And a screen shot:
