How to customize touch interaction on leaflet maps

Question

How to customize leaflet maps to disable one-finger scroll on mobile devices and add two finger scroll like google maps (see https://developers.google.com/maps/documentation/javascript/interaction)

I think something like a listener on finger down and finger up and a custom overlay or sth. like that should help. But how to correctly integrate this as a plugin in leaflet?

<html>
  <head>
    <link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="mapid" style="width: 600px; height: 400px;"></div>
    <script>
      var mymap = L.map('mapid', {center: [48,9], zoom:8, layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]});
    </script>
  </body>
</html>

sample map added. Normal behaviour: Map movement if touch begins in map box. I search for a solution to only scroll the map, if two fingers are used (e.originalEvent.touches.length == 2), otherwise the page should be scrolled. — Patrick, Jan 12 '17 at 22:45
BTW there is a [feature request for this in Leaflet's UserVoice](https://leaflet.uservoice.com/forums/150880-ideas-and-suggestions-for-leaflet/suggestions/17510338-a-gesturehandling-option-to-l-map). — totymedli, Apr 25 '17 at 00:33
If you're looking for Google style gesture handling, check out this question: [Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling](https://stackoverflow.com/questions/49095270/leaflet-js-implementing-gesture-handling-to-enforce-2-fingered-scrolling) — Corrodian, Dec 03 '19 at 12:31

score 24 · Answer 1 · answered Jan 13 '17 at 09:34

24

Simply set the dragging option of your map to false, but be sure to keep the touchZoom option as true. This will disable one-finger dragging, while allowing the user to perform pinch-zoom with two fingers, which also pan the map around.

If you want this behaviour only in mobile devices, use L.Browser.mobile to set the value of the dragging option, as in

var map = L.map('map', { dragging: !L.Browser.mobile });

answered Jan 13 '17 at 09:34

IvanSanchez

18,272
3
30
45

2

Thanks but I need a solution to allow dragging the map and the page (like described in the link above). The map needs to be dragged also, but if the map covers most of the screen on mobile devices, its impossible to scroll the page back to top. – Patrick Jan 26 '17 at 15:30
So are you saying that you have tried this and it doesn't work? – IvanSanchez Jan 27 '17 at 09:24
Shure, with this option, dragging the page is possible but dragging the map isn't possible anymore with one, two or more fingers. Also, zooming the map isn't really possible anymore because page is scrolling with two fingers, too. – Patrick Jan 28 '17 at 00:32
I tried to add an overlay which gets ex.originalEvent.touches.length and temporary disable map dragging at touchmove event. But the event needs to be fired before touchmove to get the correct result... – Patrick Jan 28 '17 at 01:00
Hhhmmm, this is weird, I'm getting `pointercancel` events when dragging with two fingers, and that was completely unexpected. Consider opening a bug report at https://github.com/Leaflet/Leaflet/issues – IvanSanchez Jan 28 '17 at 11:48
I have evaluated your approach on some other devices to get more info before opening a bug report. On iOS devices it seems to work but on Android/Chrome it doesn't... – Patrick Jan 30 '17 at 17:20
also pinch to zoom isn't possible then – Patrick Jan 30 '17 at 23:40
Are there any updates or threads for this? I tried this solution and it works really well on Android (one finger scrolls page, two fingers drags map), but on iOS its getting weird (one finger does nothing - no page scroll, no map drag, two fingers are fine). – BlueManCZ Feb 22 '20 at 13:22
1

Ok, I found a solution [here](https://github.com/Leaflet/Leaflet/issues/5425#issuecomment-342055520). I would recommend include this into answer for next users. – BlueManCZ Feb 22 '20 at 13:46

score 7 · Answer 2 · answered May 08 '20 at 16:27

7

Here is a working solution founded here. All credits to @BlueManCZ comment

L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile
})

answered May 08 '20 at 16:27

SERG

3,907
8
44
89

score 2 · Answer 3 · answered Sep 16 '20 at 10:29

As mention in comment by Corrodian, you can find GestureHandling plugins on Leaflet.

It was created by elMarquis in can be found here https://elmarquis.github.io/Leaflet.GestureHandling/examples/

I've done with this plugins by including css and js after leaflet:

<link rel="stylesheet" href="css/leaflet-gesture-handling.min.css" type="text/css">
<script src="js/leaflet-gesture-handling.min.js"></script>

And add gestureHandling option in map like this:

var map = L.map("map", {
    center: [-25.2702, 134.2798],
    zoom: 3,
    gestureHandling: true
});

It works!

This plugin is better than simply adding options to the Map object. Because it can avoid page from scrolling while panning with two fingers. — Zac, Jun 09 '22 at 12:50

score 0 · Answer 4 · answered May 13 '22 at 04:55

0

var map = L.map('map', {dragging: false});
map.setView([lat, lng], zoom);

-or together-

var map = L.map('map',{dragging: false}).setView([lat, lng], zoom);

answered May 13 '22 at 04:55

user2033838

153
1
10

How to customize touch interaction on leaflet maps

4 Answers4

Linked