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?

Answer 1

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