CODEWITHSUNDEEP
leafletmapbox
stetou
stetou

Reputation: 53

leaflet markercluster single marker color

I successfully create a clustermarkergroup with custom style. But I can't change the color of the black marker when there is only one marker in the cluster, please see image Black marker when alone in the cluster

How to change that default marker color?

Here is how I create the clustergroup

var clusterGroup = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        var childCount = cluster.getChildCount();

        return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-mycluster', iconSize: new L.Point(40, 40) });
    }
})

Some CSS

.marker-mycluster {
background-color: rgba(255,191,84, 0.6);
}
.marker-mycluster div {
background-color: rgba(255,191,84, 1);
}

Upvotes: 0

Views: 1860

Answers (1)

ghybs
ghybs

Reputation: 53350

Your single black marker is just your normal marker, outside any cluster since it is far away from other markers.

If you want to replace the visual appearance of ALL your markers, including when they do not cluster (i.e. when they are shown as single markers), you can conveniently use the singleMarkerMode option of MarkerCluster plugin:

var clusterGroup = L.markerClusterGroup({
    singleMarkerMode: true,
    iconCreateFunction: function(cluster) {
            // your code
        });
    }
})

This will override the icon of all your markers, so that they look like clusters of size 1.

Upvotes: 3

Related Questions