Add sticky marker tooltip for touch devices #1597
Conversation
…te a separate class function for 'updateHintPosition'
| } | ||
| }, | ||
| _setupTouchScreenTips() { | ||
| let markerHintTip = null; |
There was a problem hiding this comment.
Please add the variable to the context: this._markerHintTip
| this._map.on('pm:drawstart', (event) => { | ||
| if (event.shape === 'Marker' && !deviceHasFinePointer()) { | ||
| // Hides the "hint marker" as that is confusing for touch screen users. | ||
| const drawMarker = this._map.pm.Draw.Marker; |
There was a problem hiding this comment.
creating the variable drawMarker is obsolete
| permanent: true, | ||
| }).addTo(this._map); | ||
|
|
||
| const updateHandler = () => this._updateHintPosition(markerHintTip); |
There was a problem hiding this comment.
The call should be throttled this._markerHintTipUpdateHandler = L.Util.throttle(
Reference:
leaflet-geoman/src/js/Mixins/Modes/Mode.Drag.js
Lines 15 to 21 in d720305
| markerHintTip = null; | ||
| this._map.off( | ||
| 'zoomlevelschange resize move', | ||
| this._updateHintPosition, |
There was a problem hiding this comment.
This doesn't remove the correct event listener function
| } | ||
| }); | ||
| }, | ||
| _updateHintPosition(markerHintTip) { |
There was a problem hiding this comment.
No need to have markerHintTip as argument, if assigned to the context this._markerHintTip
|
|
||
| // Creates the touch screen hint "permanently" (while using the tool) | ||
| // sticked at the top of the map. | ||
| markerHintTip = L.tooltip([0, 0], { |
There was a problem hiding this comment.
Not sure if we should use a plain html element, positioned absolute, instead. Then there would be no need to recalculate the position with every move
| _setupTouchScreenTips() { | ||
| let markerHintTip = null; | ||
|
|
||
| this._map.on('pm:drawstart', (event) => { |
There was a problem hiding this comment.
Eventlistener should be only added if the global option for mobile tooltip is enabled
2 participants
This PR is created to add a feature requested in the issue #1595, which adds a sticky tooltip for the markers in case of the user not having a pointer device (e.g. a tablet or a phone).
It was confusing for touch screens to place the marker since it didn't have any feedback and sometimes the hint marker hides the actually added marker which can cause confusion.
More data and use case -examples in video form you can find by clicking the issue number.