leaflet-rotate 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -6
- package/dist/leaflet-rotate-src.js +502 -164
- package/dist/leaflet-rotate-src.js.map +4 -4
- package/dist/leaflet-rotate.js +1 -1
- package/dist/leaflet-rotate.js.map +4 -4
- package/lib/debug.js +62 -88
- package/lib/debug.min.js +16 -1
- package/package.json +1 -1
- package/src/control/Rotate.js +102 -118
- package/src/index.js +1 -0
- package/src/layer/tile/GridLayer.js +20 -1
- package/src/layer/vector/Renderer.js +37 -34
- package/src/map/Map.js +248 -68
- package/src/map/handler/CompassBearing.js +7 -0
- package/src/map/handler/ShiftKeyRotate.js +64 -13
- package/src/map/handler/TouchGestures.js +45 -3
- package/src/map/handler/TouchPitch.js +53 -0
- package/test/features/example.feature +8 -4
- package/test/features/gestures.feature +4 -0
- package/test/features/rotation.feature +30 -0
- package/test/index.html +342 -187
- package/test/steps/bearing.steps.js +193 -0
- package/test/steps/example.steps.js +56 -29
- package/test/steps/gestures.steps.js +55 -0
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ Load Leaflet first, then the plugin. For example, using the published CDN build:
|
|
|
26
26
|
```html
|
|
27
27
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
|
|
28
28
|
<script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
|
|
29
|
-
<script src="https://unpkg.com/leaflet-rotate@0.5.
|
|
29
|
+
<script src="https://unpkg.com/leaflet-rotate@0.5.1/dist/leaflet-rotate.js"></script>
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
Or if you want to test it with [`2.0.0-alpha.1`](https://github.com/Leaflet/Leaflet/releases/tag/v2.0.0-alpha.1):
|
|
@@ -35,7 +35,7 @@ Or if you want to test it with [`2.0.0-alpha.1`](https://github.com/Leaflet/Leaf
|
|
|
35
35
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css">
|
|
36
36
|
<script src="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js"></script>
|
|
37
37
|
<script>globalThis.L = globalThis.leaflet;</script>
|
|
38
|
-
<script src="https://unpkg.com/leaflet-rotate@0.5.
|
|
38
|
+
<script src="https://unpkg.com/leaflet-rotate@0.5.1/dist/leaflet-rotate.js"></script>
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
Now, you can enable rotation in the map options. Bearing and pitch values are in degrees:
|
|
@@ -60,10 +60,13 @@ console.log(map.getBearing(), map.getPitch());
|
|
|
60
60
|
| `rotate` | `false` | Enables map rotation and pitch. |
|
|
61
61
|
| `bearing` | `0` | Initial map bearing, in degrees. |
|
|
62
62
|
| `pitch` | `0` | Initial map pitch, in degrees (clamped to `0`–`85`). |
|
|
63
|
+
| `pitchMaxDistance` | `3` | Far plane for pitched maps, in multiples of the map height: farther areas (and anything beyond the horizon) are not loaded and are covered by the `.leaflet-pitch-sky` element. Lower values load fewer tiles. |
|
|
63
64
|
| `rotateControl` | `true` | Adds the rotation control. Set to `false` to hide it, or pass options such as `{ closeOnZeroBearing: false }`. |
|
|
64
65
|
| `shiftKeyRotate` | `true` | Enables bearing changes with Shift + mouse wheel. |
|
|
65
|
-
| `pitchDrag` | `true` | Enables bearing and pitch changes with Ctrl + mouse drag. |
|
|
66
|
+
| `pitchDrag` | `true` | Enables bearing and pitch changes with Ctrl + mouse drag or right-button drag. |
|
|
66
67
|
| `touchRotate` | `false` | Enables rotation with a two-finger touch gesture. |
|
|
68
|
+
| `touchPitch` | `false` | Enables pitch changes by dragging two fingers vertically. |
|
|
69
|
+
| `compassBearing` | `false` | Makes the bearing follow the device compass. On iOS, enable it from a user gesture (e.g. `map.compassBearing.enable()` in a button click) so that the orientation permission can be requested. |
|
|
67
70
|
|
|
68
71
|
#### Map methods and events
|
|
69
72
|
|
|
@@ -71,14 +74,22 @@ console.log(map.getBearing(), map.getPitch());
|
|
|
71
74
|
| --- | --- |
|
|
72
75
|
| `map.setBearing(degrees, options?)` | Sets the bearing. Use `{ animate: true, duration: 0.5 }` for an animated change; `duration` is in seconds. |
|
|
73
76
|
| `map.getBearing()` | Returns the current bearing in degrees. |
|
|
74
|
-
| `map.setPitch(degrees)` | Sets the pitch, clamped to `0`–`85` degrees. |
|
|
77
|
+
| `map.setPitch(degrees, options?)` | Sets the pitch, clamped to `0`–`85` degrees. Accepts the same animation options as `setBearing`. |
|
|
75
78
|
| `map.getPitch()` | Returns the current pitch in degrees. |
|
|
79
|
+
| `map.resetNorth(options?)` | Animates the bearing back to `0` (pass `{ animate: false }` to skip the animation). |
|
|
80
|
+
| `map.resetNorthPitch(options?)` | Animates both bearing and pitch back to `0`. |
|
|
76
81
|
| `rotate` event | Fired when the bearing changes. |
|
|
77
82
|
| `pitch` event | Fired when the pitch changes. |
|
|
78
83
|
|
|
79
84
|
#### Rotation control
|
|
80
85
|
|
|
81
|
-
The control is available as `L.Control.Rotate` or `L.control.rotate(options)`.
|
|
86
|
+
The control is available as `L.Control.Rotate` or `L.control.rotate(options)`. Click it to reset bearing and pitch (`map.resetNorthPitch()`), drag it horizontally to rotate and vertically to change the pitch. The map option `rotateControl` adds it automatically.
|
|
87
|
+
|
|
88
|
+
| Option | Default | Description |
|
|
89
|
+
| --- | --- | --- |
|
|
90
|
+
| `position` | `'topleft'` | Leaflet control position. |
|
|
91
|
+
| `closeOnZeroBearing` | `true` | Hides the control when both bearing and pitch are zero. |
|
|
92
|
+
| `visualizePitch` | `true` | Tilts the icon with the pitch; when `false`, clicking only resets the bearing and dragging only rotates. |
|
|
82
93
|
|
|
83
94
|
#### Marker options
|
|
84
95
|
|
|
@@ -119,6 +130,6 @@ Initial changes to this project have been apported by comparing the following br
|
|
|
119
130
|
---
|
|
120
131
|
|
|
121
132
|
**Compatibile with:**
|
|
122
|
-
[](http://leafletjs.com/reference.html) [](http://leafletjs.com/reference.html)
|
|
123
134
|
|
|
124
135
|
**Contributors:** [IvanSanchez](https://github.com/IvanSanchez), [Fnicollet](https://github.com/fnicollet/Leaflet/tree/rotate-master), [Hyperknot](https://github.com/hyperknot), [Raruto](https://github.com/Raruto/leaflet-rotate)
|