Releasing button on dragged map causes to move it little further

[zdila]

maplibre-gl-js version: 2.1.9

browser: Chrome, Vivaldi, Firefox; 4K screen (devicepixelratio is ~2) and on Linux, but I am not sure if this is relevant

Steps to Trigger Behavior

1. move the map with mouse and stop mouse movement
2. immediately release the mouse button

Expected Behavior

map should not be moving at all

Actual Behavior

map is moving, often very fast

please see the video:

https://user-images.githubusercontent.com/636095/172916521-e53bc4f3-fcb2-439f-9d5a-d8e51b83d7c7.mp4

interestingly there is a simmilar issue in different map library https://github.com/mariusandra/pigeon-maps/issues/76

Leaflet doesn't have this issue

[HarelM]

This is called inertia, I don't think this was introduced in latest versions... I don't see a problem in the video. If you don't move the mouse enough time after you move it, the map shouldn't move...

[zdila]

@HarelM I don't say it was introduced in the latest versions.

I don't see a problem in the video. If you don't move the mouse enough time after you move it, the map shouldn't move...

For me the problem is obvious. If my physical hand velocity is zero while I release the mouse button then I expect the map movement to be frozen and not to start running away like a frightened horse ;-). BTW the issue is more obvious from the middle of the video playback.

Leaflet or Google maps have no such issue.

[Kanahiro]

I've read above and reproduced the issue you mentioned. I think it caused by pan-inertia that is active even when mouse-dragging obviously stopped at end of dragging. IMHO, to improve this, the threshold - to judge pan-inertia is active or should be killed - seems to be needed.

I wrote some codes as above. What do you think? https://github.com/maplibre/maplibre-gl-js/pull/1306

I've uploaded sample app patched. https://kanahiro.github.io/maplibre-gl-js/pan-inertia/#3.02/26.83/139.81

[zdila]

@Kanahiro thanks, but I can still reproduce it there pretty easily. Maybe Leaflet inertia-handling code could serve as an inspiration? :-)

[HarelM]

I've tested it on my site here: https://israelhiking.osm.org.il/ When I stop the mouse and then release the map is not moving and when I release before stopping the mouse movement it continues the movement as expected. This is what I would expected from a user experience point of view, which is similar to how this would work when using finger touch on mobile devices. I've looked at the video from start to end twice and didn't notice anything problematic... Can you please better explain the problem statement?

[zdila]

@HarelM I can reproduce it also on your map. You must release mouse button immediately when you stop moving your mouse. It may need a little practice to master it ;-)

Please see part of my video in slow motion:

https://user-images.githubusercontent.com/636095/173354141-f22cf800-a289-4060-834f-59545b53bfe5.mp4

You can see that when mouse stops the movement then also the map is no more panning, but immediately after the mouse is released (you can see the cursor change) them map starts panning rapidly.

[HarelM]

I honestly can't reproduce it :-) but it's probably a threshold of some sort as said before. In any case, when fixing this I would recommend adding this as a parameter for the map options to avoid changing the current behavior. Might be related to the devicepixelratio, making it more sensitive, maybe, IDK...

[Kanahiro]

In Leaflet https://github.com/Leaflet/Leaflet/blob/main/src/map/handler/Map.Drag.js#L200

The difference between Leaflet and GL JS seem to be that Leaflet consider a move of last two points but GL JS accumulates moves of points during time not to be cut off. Therefore, even when dragging almost stoped once panning-inertia is active, in my humble opinion.

My patch is workaround to stop accumulating when dragging could be thought as stopped.

[Kanahiro]

https://kanahiro.github.io/maplibre-gl-js/pan-inertia/ I've renewed sample app as to consider only last move similar to Leaflet.

https://github.com/Kanahiro/maplibre-gl-js/blob/930d027b28833d111eb30ad6aba88cad766c3293/src/ui/handler_inertia.ts#L96

My code has a magic number to magnify panDelta because panDelta without accumulating is too small. (my magic number 10 is that not considered enoughly)

[zdila]

@Kanahiro it is still reliably reproducible for me :-(. Moreover the movement after releasing the mouse is often in the altered angle.

[Kanahiro]

Oh really? I can't reproduce the issue now... If you didn't yet, does clearing browser cache make any change?

[zdila]

Clearing browser's cache does not help. Tried in Vivaldi, Chrome, Firefox and also in private mode.

[Kanahiro]

I've realized above seems not to be solution the issue. IMHO, adjusting cutoff duration can be the solution.

https://github.com/Kanahiro/maplibre-gl-js/blob/fix/%231303-adjusting-cutoff/src/ui/handler_inertia.ts#L65 https://kanahiro.github.io/maplibre-gl-js/pan-inertia2/

This value is hard-coded as 160ms (maybe 1 frame in 60fps) but to consider a stop in draggin this value may be too large. It may be good to make able for developer to adjust cutoff in options...