Menu
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>
945
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 });
Here is a working solution founded here. All credits to @BlueManCZ comment
L.map('map', {
dragging: !L.Browser.mobile,
tap: !L.Browser.mobile
})
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!
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
