如何更改传单标记聚类扩展的单个标记节点图标？

Question

I would like to use a custom icon for the single value markers of the leaflet marker clustering extension. Changing the default icon of leaflet with the following code snippet doesn't work:

var newIcon = L.Icon.Default.extend({
            options: {
                    iconUrl: 'new_icon_location.png' 
            }
         });

Marker clustering extension: https://github.com/Leaflet/Leaflet.markercluster

Answer 1

As for creating an icon in Leaflet, the syntax would be:

var newIcon = L.icon({
    iconUrl: 'new_icon_location.png'
});

If you want all markers to use that icon instead of the default one (ie L.Icon.Default as you figured out), you should rather override the icon option of L.Marker class (before you start instantiating markers, of course):

L.Marker.mergeOptions({
    icon: newIcon
});

As for changing the default icons used by Leaflet.markercluster plugin, you should use option iconCreateFunction :

var mcg = L.markerClusterGroup({
    iconCreateFunction: function (cluster) {
        // create an icon, possibly based on cluster properties.
        return clusterIcon;
    }
});

Now I am not exactly sure of what you intend to do when you say " use a custom icon for the single value markers of the leaflet marker clustering ". I guess you use option singleMarkerMode and you would like a specific icon to be applied to "clusters of size 1" (which are in fact normal markers which icon is overriden by Marker Cluster plugin)?

In that case, a simple solution would have been not to use the singleMarkerMode option, and instead to make all your individual markers use that specific icon. Possibly through replacing the markers' default icon indeed.

But if for whatever reason you still want to use the singleMarkerMode option, then it is not that complicated either. You could do for instance:

var mcg = L.markerClusterGroup({
    singleMarkerMode: true,
    iconCreateFunction: function (cluster) {
        var childCount = cluster.getChildCount();
        return childCount === 1 ? iconForSize1 : someOtherIcon;
    }
});