0.3.2 • Published 8 months ago
leaflet-doubletapdragzoom v0.3.2
Leaflet.DoubleTapDragZoom
This plugin implements double-tap-and-drag zoom feature, which allows to zoom in / out with one hand! :tada:
Inspired by Google Maps and Apple Maps.
Demo: https://cherniavskii.github.io/Leaflet.DoubleTapDragZoom/
Installation
NPM
npm install --save leaflet-doubletapdrag leaflet-doubletapdragzoom
import L from 'leaflet';
import 'leaflet-doubletapdrag';
import 'leaflet-doubletapdragzoom';
Loading from unpkg.com:
Add the following scripts to the head:
<script src="https://unpkg.com/leaflet"></script>
<script src="https://unpkg.com/leaflet-doubletapdrag"></script>
<script src="https://unpkg.com/leaflet-doubletapdragzoom"></script>
Usage
Now you can pass supported options to map. See Options section for more details.
var map = L.map('map', {
doubleTapDragZoom: true,
doubleTapDragZoomOptions: {
reverse: false,
},
})
To achieve Google Maps-like behavior, use this configuration:
var map = L.map('map', {
doubleTapDragZoom: 'center',
doubleTapDragZoomOptions: {
reverse: true,
},
})
Options
Option | Type | Default | Description |
---|---|---|---|
doubleTapDragZoom | Boolean|String | * | Whether the map can be zoomed by double-tap-and-drag gesture. If passed 'center' , it will zoom to the center of the view regardless of where the touch event (finger) was. Enabled for touch-capable web browsers except for old Androids |
doubleTapDragZoomOptions | Object | -- | Plugin options, see available options below |
doubleTapDragZoomOptions.reverse | Boolean | false | If true, zoom drag direction will be reversed - dragging up will zoom out, dragging down will zoom in |