Cursor style glitching when drawing polygons about leaflet-geoman HOT 3 OPEN

Hiya, came here to report this too. Did some digging, this is what I got so far:

Leaflet adds the CSS class .leaflet-interactive to the layer that you draw, e.g., a line. While drawing, Geoman applies the class .geoman-draw-cursor to the map. The first rule is more specific than the latter. As the cursor jumps between hovering over the layer and the map, it switches between the cursors.

As a workaround, you can overrule Leaflet while drawing:

.geoman-draw-cursor .leaflet-interactive {
    cursor: unset;
}

/* OR */

.geoman-draw-cursor .leaflet-interactive {
    cursor: crosshair !important;
}

Note that this will change the cursor for every layer on the map while drawing. If you want to keep the cursor if you hover any other layer while drawing (e.g. when snapping), you could apply the .geoman-draw-cursor selectively to the hintline:

map.pm.enableDraw("Polygon", {
  hintlineStyle: {
    className: "geoman-draw-cursor",
  },
});

from leaflet-geoman.

To add context, I have only tested on:

• Chrome version: 123.0.6312.86
• Edge version: 123.0.2420.65

Seems like even if there are browsers where this doesn't happen now, it is ripe for happening down the road.

from leaflet-geoman.

Thank you for reporting. We will try to solve this.

from leaflet-geoman.