Cursor style glitching when drawing polygons

[patdahl]

trafficstars

Leaflet defines the style for .leaflet-interact as cursor: pointer, but Geoman has the style for .cursor-marker as pointer: crosshair. Depending on where the user's cursor lands while they are drawing a polygon, the cursor continues to flip between the two depending on whether the browser decides they are over the drawing marker or the helper line from the previous vertex.

If you move the cursor fast enough, this behavior can also be seen when drawing rectangles and circles, though it is not nearly as obvious.

To recreate, you can just go to the demo site and place at least one marker to start a polygon : https://www.geoman.io/demo

Obviously not a functional issue, but it seems like if someone took the time to intentionally put in .cursor-marker { pointer: crosshair } that this may matter to someone.

[patdahl]

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.

[Falke-Design]

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

[strfx]

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",
  },
});