Remove cursor style for Draw interactions on touch screens

[cedricrealdolmen]

Is your feature request related to a problem? Please describe.

Let's say I create a point draw interaction with a darkblue circle as style. On a desktop, this works fine, when I move my cursor, I can see the darkblue circle next to my cursor, indicating that I am about to draw a point on the map.

However, when drawing on a touch screen, every time I pan or zoom on the map, it shows the darkblue circle where I last touched the screen. I haven't drawn the point yet, it's just the hover effect that is visible on the map. This is very confusing for users, because they think they have already placed the point, when in fact they haven't.

This is currently messing with the mobile friendliness of my application 😞 . So many thanks in advance to take this into consideration!

Describe the solution you'd like

For touch screens (pointer:coarse), there should not be a style applied to the cursor when hovering, because hovering doesn't exist on touch screens.

[MoonE]

You can do this with a custom style function:

    if ('ontouchstart' in window) {
      const originalStyleFn = draw.getOverlay().getStyle();
      let drawing = false;
      draw.getOverlay().setStyle(function (feature, resolution) {
        return drawing ? originalStyleFn(feature, resolution) : null;
      });
      draw.on('drawstart', function () {
        drawing = true;
      });
      draw.on(['drawend', 'drawabort'], function () {
        drawing = false;
      });
    }

[cedricrealdolmen]

const originalStyleFn = draw.getOverlay().getStyle();

Thanks! Something like this seems to work indeed. I feel like this should be default behavior though, but it's fine for now!