Leaflet plugin for one finger zoom.
https://petoc.github.io/Leaflet.DoubleTouchDragZoom/example/
npm i @petoc/leaflet-double-touch-drag-zoomimport L from 'leaflet';
import '@petoc/leaflet-double-touch-drag-zoom';
import 'leaflet/dist/leaflet.css';
import '@petoc/leaflet-double-touch-drag-zoom/src/leaflet-double-touch-drag-zoom.css';
const map = L.map('map', {
center: [48.6726, 19.6994],
zoom: 8,
doubleTouchDragZoom: true
});Alternative usage
<link rel="stylesheet" href="leaflet-double-touch-drag-zoom.css" />
...
<script src="leaflet.js"></script>
<script src="leaflet-double-touch-drag-zoom.js"></script>
<script>
var map = L.map('map', {
center: [48.6726, 19.6994],
zoom: 8,
doubleTouchDragZoom: true
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>Plugin adds following options to map configuration.
| Option | Type | Default | Description |
|---|---|---|---|
| doubleTouchDragZoom | Boolean | String | false | Whether the map can be zoomed in by double touch dragging down or zoomed out by double touch dragging up with one finger. If passed 'center', it will zoom to the center of the view regardless of where the touch event was. Enabled for touch-capable web browsers except for old Androids. |
| doubleTouchDragZoomDelay | Number | 300 | Maximum delay between touches to trigger double touch. |
| doubleTouchDragZoomInvert | Boolean | false | Invert dragging directions for zoom in/out. |
| doubleTouchDragZoomScaleFactor | Number | 100 | Zooming sensitivity to vertical dragging (high < 100 < low). |
Plugin should be compatible with all major desktop and mobile browsers.
Licensed under MIT License.