PruneCluster
PruneCluster copied to clipboard
Redrawing icons doesn't work for spiderfied markers
In my application, I override the PrepareLeafletMarker() call to change the color of the marker icon on click. This works well for regular markers, using the forceIconRedraw parameter and pruneCluster.ProcessView().
But it doesn't work on spiderfied markers. The click event I registered in PrepareLeafletMarker() gets called, but the icons in the map don't get redrawn.
Can you access the L.Marker object directly from the click event? You can try to change the icon from the click event.
Solved this using the following code:
pruneCluster.PrepareLeafletMarker = function(leafletMarker, data) {
leafletMarker.setIcon(L.divIcon({iconSize: [28, 28],className: data.className}));
// only bind click event if there are no events, prevents bubbling
if (leafletMarker._leaflet_events == undefined) {
leafletMarker.on('click', function(e){
// reset marker icons in spiderfier
for (var i = 0, marks = pruneCluster.spiderfier._currentMarkers, l = marks.length; i < l;++i) {
icon_class = marks[i]._icon.className;
icon_class = icon_class.replace(' active', '');
marks[i]._icon.className = icon_class;
}
// set active in spiderfier
leafletMarker.setIcon(L.divIcon({iconSize: [28, 28],className: data.className+' active'}));
});
}
};
My markers use the "div" style of leaflet, so I am using the className property and toggling the "active" class.
Nice to see your solution. It uses private members and it might be better having an API but I think you have the simplest solution.