How to customize touch interaction on leaflet maps

Asked 12/1, 2017 at 21:5 Answered 13/5, 2022 at 4:55

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/[email protected]/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/[email protected]/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>

Constringe answered 12/1, 2017 at 21:5 Comment(3)

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. – Constringe 12/1, 2017 at 22:45

BTW there is a feature request for this in Leaflet's UserVoice. – Encapsulate 25/4, 2017 at 0:33

If you're looking for Google style gesture handling, check out this question: Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling – Calesta 3/12, 2019 at 12:31

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 });

Latticework answered 13/1, 2017 at 9:34 Comment(9)

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. – Constringe 26/1, 2017 at 15:30

So are you saying that you have tried this and it doesn't work? – Latticework 27/1, 2017 at 9: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. – Constringe 28/1, 2017 at 0: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... – Constringe 28/1, 2017 at 1:0

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 github.com/Leaflet/Leaflet/issues – Latticework 28/1, 2017 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... – Constringe 30/1, 2017 at 17:20

also pinch to zoom isn't possible then – Constringe 30/1, 2017 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). – Verdict 22/2, 2020 at 13:22

Ok, I found a solution here. I would recommend include this into answer for next users. – Verdict 22/2, 2020 at 13:46

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

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

Stratocracy answered 8/5, 2020 at 16:27 Comment(0)

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!

Mooring answered 16/9, 2020 at 10:29 Comment(1)

This plugin is better than simply adding options to the Map object. Because it can avoid page from scrolling while panning with two fingers. – Morphology 9/6, 2022 at 12:50

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);

Shwa answered 13/5, 2022 at 4:55 Comment(0)

Recommended topics

Hot tags