@petoc/leaflet-double-touch-drag-zoom NPM

Leaflet.DoubleTouchDragZoom

Leaflet plugin for one finger zoom.

Demo

https://petoc.github.io/Leaflet.DoubleTouchDragZoom/example/

Usage

npm i @petoc/leaflet-double-touch-drag-zoom

import L from 'leaflet';
import DoubleTouchDragZoom from '@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';

L.Map.addInitHook('addHandler', 'doubleTouchDragZoom', DoubleTouchDragZoom);

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
</script>

Options

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

Compatibility

Plugin should be compatible with all major desktop and mobile browsers.

License

Licensed under MIT License.

1 year ago

1 year ago

1 year ago