Skip to content

Commit 5de152e

Browse files
petocpetoc
committed
compatibility update
1 parent 1a8580f commit 5de152e

File tree

6 files changed

+302
-262
lines changed

6 files changed

+302
-262
lines changed

‎README.md‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,37 @@ https://petoc.github.io/Leaflet.DoubleTouchDragZoom/example/
88

99
## Usage
1010

11-
Include plugin after Leaflet script and enable it in map options.
11+
```sh
12+
npm i @petoc/leaflet-double-touch-drag-zoom
13+
```
14+
15+
```js
16+
import L from 'leaflet';
17+
import DoubleTouchDragZoom from '@petoc/leaflet-double-touch-drag-zoom';
18+
19+
import 'leaflet/dist/leaflet.css';
20+
import '@petoc/leaflet-double-touch-drag-zoom/src/leaflet-double-touch-drag-zoom.css';
21+
22+
L.Map.addInitHook('addHandler', 'doubleTouchDragZoom', DoubleTouchDragZoom);
23+
24+
const map = L.map('map', {
25+
center: [48.6726, 19.6994],
26+
zoom: 8,
27+
doubleTouchDragZoom: true
28+
});
29+
```
30+
31+
Alternative usage
1232

1333
```html
34+
<link rel="stylesheet" href="leaflet-double-touch-drag-zoom.css" />
35+
...
1436
<script src="leaflet.js"></script>
1537
<script src="leaflet-double-touch-drag-zoom.js"></script>
1638
<script>
1739
var map = L.map('map', {
1840
center: [48.6726, 19.6994],
1941
zoom: 8,
20-
zoomControl: true,
2142
doubleTouchDragZoom: true
2243
});
2344
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -26,25 +47,6 @@ Include plugin after Leaflet script and enable it in map options.
2647
</script>
2748
```
2849

29-
Add CSS style to disable user-select and change cursor during zooming.
30-
31-
```html
32-
<style>
33-
.leaflet-double-touch {
34-
-webkit-user-select: none;
35-
-moz-user-select: none;
36-
-ms-user-select: none;
37-
user-select: none;
38-
}
39-
.leaflet-double-touch-drag {
40-
cursor: move;
41-
cursor: -webkit-grabbing;
42-
cursor: -moz-grabbing;
43-
cursor: row-resize;
44-
}
45-
</style>
46-
```
47-
4850
## Options
4951

5052
Plugin adds following options to map configuration.

‎example/index.html‎

Lines changed: 25 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,25 @@
1-
<!doctype html>
2-
<html>
3-
<head>
4-
<meta name="referrer" content="no-referrer">
5-
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
6-
<title>Leaflet.DoubleTouchDragZoom</title>
7-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
8-
</head>
9-
<body>
10-
<style>
11-
.leaflet-double-touch {
12-
-webkit-user-select: none;
13-
-moz-user-select: none;
14-
-ms-user-select: none;
15-
user-select: none;
16-
}
17-
.leaflet-double-touch-drag {
18-
cursor: move;
19-
cursor: -webkit-grabbing;
20-
cursor: -moz-grabbing;
21-
cursor: row-resize;
22-
}
23-
</style>
24-
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
25-
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
26-
<script src="../src/leaflet-double-touch-drag-zoom.js"></script>
27-
<script>
28-
var map = L.map('map', {
29-
center: [48.6726, 19.6994],
30-
zoom: 7,
31-
zoomControl: true,
32-
doubleTouchDragZoom: true
33-
});
34-
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
35-
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
36-
}).addTo(map);
37-
</script>
38-
</body>
39-
</html>
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta name="referrer" content="no-referrer">
5+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
6+
<title>Leaflet.DoubleTouchDragZoom</title>
7+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
8+
<link rel="stylesheet" href="../src/leaflet-double-touch-drag-zoom.css" />
9+
</head>
10+
<body>
11+
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
12+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
13+
<script src="../src/leaflet-double-touch-drag-zoom.js"></script>
14+
<script>
15+
var map = L.map('map', {
16+
center: [48.6726, 19.6994],
17+
zoom: 7,
18+
doubleTouchDragZoom: true
19+
});
20+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
21+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
22+
}).addTo(map);
23+
</script>
24+
</body>
25+
</html>

‎package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "@petoc/leafet-double-touch-drag-zoom",
3+
"version": "1.0.0",
4+
"author": "Peter C.",
5+
"license": "MIT",
6+
"description": "Leaflet plugin for one finger zoom.",
7+
"keywords": [
8+
"leaflet",
9+
"plugin",
10+
"zoom"
11+
],
12+
"files": [
13+
"src"
14+
],
15+
"peerDependencies": {
16+
"leaflet": "^1.0.0"
17+
},
18+
"main": "src/leaflet-double-touch-drag-zoom.js",
19+
"types": "src/leaflet-double-touch-drag-zoom.d.ts",
20+
"homepage": "https://github.com/petoc/Leaflet.DoubleTouchDragZoom#readme",
21+
"repository": {
22+
"type": "git",
23+
"url": "https://github.com/petoc/Leaflet.DoubleTouchDragZoom.git"
24+
},
25+
"bugs": {
26+
"url": "https://github.com/petoc/Leaflet.DoubleTouchDragZoom/issues"
27+
}
28+
}

‎src/leaflet-double-touch-drag-zoom.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.leaflet-double-touch {
2+
-webkit-user-select: none;
3+
-moz-user-select: none;
4+
-ms-user-select: none;
5+
user-select: none;
6+
}
7+
.leaflet-double-touch-drag {
8+
cursor: move;
9+
cursor: -webkit-grabbing;
10+
cursor: -moz-grabbing;
11+
cursor: row-resize;
12+
}

‎src/leaflet-double-touch-drag-zoom.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as L from 'leaflet';
2+
3+
declare module 'leaflet' {
4+
interface MapOptions {
5+
doubleTouchDragZoom?: boolean
6+
doubleTouchDragZoomDelay?: number
7+
doubleTouchDragZoomInvert?: boolean
8+
doubleTouchDragZoomScaleFactor?: number
9+
}
10+
}

0 commit comments

Comments
 (0)