Feature Request: Better tooltip hints for the marker tool on touch screens

[ahukkanen]

Description

When testing this library on touch devices, we have noticed that the marker tool is rather confusing on touch screens as they do not have a cursor on the screen. The marker tool creates a hint marker that follows the mouse movements and on desktop with a "fine" pointer device (i.e. a mouse) this works great. This is the code that creates the hint marker (and there's also some other code in that class dealing with placing that marker):

leaflet-geoman/src/js/Draw/L.PM.Draw.Marker.js

Lines 29 to 33 in d720305

	// this is the hintmarker on the mouse cursor
	this._hintMarker = L.marker(
	this._map.getCenter(),
	this.options.markerStyle
	);

However, on touch devices we found this confusing because of few reasons:

• The tooltip attached to the hint marker suggests clicking it to place the marker on the map (i.e. click the hint marker, not where you actually want the new marker to be placed)
• Sometimes the hint marker hides the actually added marker which can cause confusion (was it added or not?)
• Sometimes it feels that the marker was not added to the map as nothing seems to happen and there is no visible feedback for the user

Here is an example of the current user experience:

leaflet-geoman-place-marker.mp4

For touch screens I would rather suggest to display some kind of a "sticky" note that would tell the user what to do and hide the current hint marker.

To explain it more visually, here is an example of how this could work:

leaflet-geoman-place-marker-suggestion.mp4

There is some discussion over the internet that such features that depend on detecting whether the device has touch capabilities are not reliable and instead, the functionality should be the same whether you have a pointer device available or not. But for this particular case, I feel this would be an improvement for the users who do not have a pointing device, as the current behavior somewhat assumes that there is a fine pointing device available (as it listens to the mousemove events).

This is the JS code that I would use to detect if the user has a pointing device:

window.matchMedia("(pointer:fine)").matches

When this is true, the user has a "fine" pointing device, which would typically be a mouse. I believe this is not too complex code and also fairly widely supported by now.

Thank you for this awesome library!

[Falke-Design]

Hi,

thank you for your feedback. That is a nice idea, it would be nice if you could create a PR for that.

For checking mobile devices please use: L.Browser.mobile

And let us use a global option on the map to enable this "mobile" mode.

[ahukkanen]

Thank you for your response! Great to hear that this would be something to consider.

Regarding your comment about the detection:

For checking mobile devices please use: L.Browser.mobile

After looking at what this does:
https://github.com/Leaflet/Leaflet/blob/065a9c80e31efcf474ef88d4709f674669bad0c7/src/core/Browser.js#L22C54-L22C71

I believe this is not the correct approach for this feature. This would check the user agent instead of the touch capability.

Mobile devices with pointer capability would be affected which I do not think would be a good idea. On the other hand, desktop devices without a pointer device would still have the problem (such devices exists, we have for example developed very large touch screens for museums in the past, not anything map related but just to point out they exist).

For this feature I would rather check for the availability of the pointer device.