react-leaflet-draw icon indicating copy to clipboard operation
react-leaflet-draw copied to clipboard

Hover effect doesn't work when drawing a polygon

Open rhberro opened this issue 4 years ago • 0 comments

Hello everybody, I have two layers with a few shapes on both, each shape has a hover effect that changes the shape color, something like this:

  setLayerColor(color) {
    this.setStyle(
      { color }
    );
  }

  handleEachFeature = (feature, layer) => {
    layer.on('mouseover', this.setLayerColor.bind(layer, '#c4020f'));
    layer.on('mouseout', this.setLayerColor.bind(layer, '#ea1d2c'));
  };

It works perfectly!

clipping-400kb

The problem is that when I enter in drawing mode, these hover effect doesn't work anymore, It looks like the div leaflet-marker-icon leaflet-mouse-marker leaflet-zoom-animated leaflet-interactive follows the cursor and remove these effects. I've tried already to set a higher z-index to the polygons layer but then I can't draw.

problem-600kb

Is there a way to make both work? The drawing and the hover effect on every polygon?

rhberro avatar Feb 02 '20 17:02 rhberro