1.marker-cluster-small {
2background-color: rgba(218, 94, 94, 0.6);
3}
4.marker-cluster-small div {
5background-color: rgba(226, 36, 36, 0.6);
6}
7.marker-cluster-medium {
8background-color: rgba(241, 211, 87, 0.6);
9}
10.marker-cluster-medium div {
11background-color: rgba(240, 194, 12, 0.6);
12}
13
14.marker-cluster-large {
15background-color: rgba(253, 156, 115, 0.6);
16}
17.marker-cluster-large div {
18background-color: rgba(241, 128, 23, 0.6);
19}
20

1iconCreateFunction: function (cluster) {
2 var childCount = cluster.getChildCount();
3 var c = ' marker-cluster-';
4 if (childCount < 10) {
5   c += 'small';
6 } 
7 else if (childCount < 100) {
8   c += 'medium';
9 } 
10 else {
11   c += 'large';
12 }
13
14 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
15  className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
16 }
17