PruneCluster icon indicating copy to clipboard operation
PruneCluster copied to clipboard

Redrawing icons doesn't work for spiderfied markers

Open pmusaraj opened this issue 10 years ago • 3 comments
trafficstars

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.

pmusaraj avatar Feb 17 '15 19:02 pmusaraj

Can you access the L.Marker object directly from the click event? You can try to change the icon from the click event.

fungiboletus avatar Feb 19 '15 07:02 fungiboletus

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.

pmusaraj avatar Feb 25 '15 20:02 pmusaraj

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.

fungiboletus avatar Feb 26 '15 14:02 fungiboletus