Leaflet SuperCluster markers with Custom Icons?

Question

Is there a way to change the default marker icon when using Leaflet SuperCluster?

I followed the example given in the demo. I am able to get the Supercluster working and able to create clusters. But the individual markers have the default leaflet marker icon which comes from the method createClusterIcon in the example.

I have different types of markers and would like to have different icons for each marker.

The geoJSON layer which has the function pointToLayer is used by Supercluster to create the cluster icons. How can we modify it or customize it to create cluster icons and also have custom icons for each marker?

createClusterIcon method -

function createClusterIcon(feature, latlng) {
    if (!feature.properties.cluster) return L.marker(latlng);

    var count = feature.properties.point_count;
    var abbrev = feature.properties.point_count_abbreviated;
    var size =
        count < 100 ? 'small' :
        count < 1000 ? 'medium' : 'large';
    var icon = L.divIcon({
        html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
        className: 'marker-cluster marker-cluster-' + size,
        iconSize: L.point(40, 40)
    });
    return L.marker(latlng, {icon: icon});
}

geoJSON layer which is added to the map

var markers = L.geoJson(null, {
pointToLayer: createClusterIcon}).addTo(map);

The markers are added to geoJSON layer using addData method

markers.clearLayers();
markers.addData(e.data);

Priyesh Tungare Priyesh Tungare · Accepted Answer · 2017-12-23T10:02:57

A bit more focused understanding of the code resolved the issue.

The if condition in the createClusterIcon function, which returns an L.marker when the feature does not have cluster property should be used to create custom icons.

I changed the if condition as follows:

if (!feature.properties.cluster) {
    let icon = L.icon({
        iconUrl: '<icon_url>',
        iconSize: [40,40]
    })
    return L.marker(latlng, {
        icon: icon
    });
}

Now each marker will have the icon represented by the iconUrl.

Leaflet SuperCluster markers with Custom Icons?

1 Answers