leaflet-rotate 0.3.0 → 0.5.0
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 +74 -5
- package/build/test.js +18 -0
- package/dist/leaflet-rotate-src.js +1081 -303
- package/dist/leaflet-rotate-src.js.map +3 -3
- package/dist/leaflet-rotate.js +1 -1
- package/dist/leaflet-rotate.js.map +3 -3
- package/lib/debug.js +84 -66
- package/lib/debug.min.js +1 -1
- package/misc/leaflet-heat-rotate.js +14 -7
- package/misc/loremIpsum.js +1 -1
- package/misc/places.js +1 -1
- package/misc/route.js +1 -1
- package/package.json +5 -5
- package/src/control/Rotate.js +98 -29
- package/src/dom/DomUtil.js +42 -47
- package/src/dom/Draggable.js +6 -1
- package/src/geo/LatLngBounds.js +5 -0
- package/src/geometry/Bounds.js +5 -0
- package/src/geometry/Point.js +33 -10
- package/src/index.js +3 -1
- package/src/layer/DivOverlay.js +43 -12
- package/src/layer/Popup.js +29 -16
- package/src/layer/Tooltip.js +21 -5
- package/src/layer/marker/Icon.js +20 -8
- package/src/layer/marker/Marker.js +103 -24
- package/src/layer/tile/GridLayer.js +22 -6
- package/src/layer/vector/Renderer.js +102 -11
- package/src/map/Map.js +408 -121
- package/src/map/handler/CompassBearing.js +33 -7
- package/src/map/handler/ContainerMutation.js +20 -3
- package/src/map/handler/ShiftKeyRotate.js +156 -16
- package/src/map/handler/TouchGestures.js +91 -29
- package/src/map/handler/TouchRotate.js +20 -3
- package/src/map/handler/TouchZoom.js +25 -5
- package/test/features/example.feature +5 -0
- package/test/features/rotation.feature +30 -0
- package/test/index.html +60 -22
- package/test/steps/bearing.steps.js +345 -3
- package/test/steps/example.steps.js +72 -11
- package/test/steps/gestures.steps.js +4 -4
- package/test/steps/overlays.steps.js +32 -32
- package/test/support/hooks.js +38 -2
package/README.md
CHANGED
|
@@ -19,6 +19,79 @@ _For a working example see the following [demo](https://raruto.github.io/leaflet
|
|
|
19
19
|
</p>
|
|
20
20
|
</blockquote>
|
|
21
21
|
|
|
22
|
+
### How to use
|
|
23
|
+
|
|
24
|
+
Load Leaflet first, then the plugin. For example, using the published CDN build:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
|
|
28
|
+
<script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
|
|
29
|
+
<script src="https://unpkg.com/leaflet-rotate@0.5.0/dist/leaflet-rotate.js"></script>
|
|
30
|
+
```
|
|
31
|
+
|
|
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):
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css">
|
|
36
|
+
<script src="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js"></script>
|
|
37
|
+
<script>globalThis.L = globalThis.leaflet;</script>
|
|
38
|
+
<script src="https://unpkg.com/leaflet-rotate@0.5.0/dist/leaflet-rotate.js"></script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Now, you can enable rotation in the map options. Bearing and pitch values are in degrees:
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
const map = L.map('map', {
|
|
45
|
+
rotate: true,
|
|
46
|
+
bearing: 30,
|
|
47
|
+
pitch: 20,
|
|
48
|
+
rotateControl: true,
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
map.setBearing(90);
|
|
52
|
+
map.setPitch(35);
|
|
53
|
+
console.log(map.getBearing(), map.getPitch());
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
#### Map options
|
|
57
|
+
|
|
58
|
+
| Option | Default | Description |
|
|
59
|
+
| --- | --- | --- |
|
|
60
|
+
| `rotate` | `false` | Enables map rotation and pitch. |
|
|
61
|
+
| `bearing` | `0` | Initial map bearing, in degrees. |
|
|
62
|
+
| `pitch` | `0` | Initial map pitch, in degrees (clamped to `0`–`85`). |
|
|
63
|
+
| `rotateControl` | `true` | Adds the rotation control. Set to `false` to hide it, or pass options such as `{ closeOnZeroBearing: false }`. |
|
|
64
|
+
| `shiftKeyRotate` | `true` | Enables bearing changes with Shift + mouse wheel. |
|
|
65
|
+
| `pitchDrag` | `true` | Enables bearing and pitch changes with Ctrl + mouse drag. |
|
|
66
|
+
| `touchRotate` | `false` | Enables rotation with a two-finger touch gesture. |
|
|
67
|
+
|
|
68
|
+
#### Map methods and events
|
|
69
|
+
|
|
70
|
+
| API | Description |
|
|
71
|
+
| --- | --- |
|
|
72
|
+
| `map.setBearing(degrees, options?)` | Sets the bearing. Use `{ animate: true, duration: 0.5 }` for an animated change; `duration` is in seconds. |
|
|
73
|
+
| `map.getBearing()` | Returns the current bearing in degrees. |
|
|
74
|
+
| `map.setPitch(degrees)` | Sets the pitch, clamped to `0`–`85` degrees. |
|
|
75
|
+
| `map.getPitch()` | Returns the current pitch in degrees. |
|
|
76
|
+
| `rotate` event | Fired when the bearing changes. |
|
|
77
|
+
| `pitch` event | Fired when the pitch changes. |
|
|
78
|
+
|
|
79
|
+
#### Rotation control
|
|
80
|
+
|
|
81
|
+
The control is available as `L.Control.Rotate` or `L.control.rotate(options)`. The map option `rotateControl` adds it automatically; its `position` follows Leaflet control positions, and `closeOnZeroBearing` (default `true`) hides it when the bearing is zero.
|
|
82
|
+
|
|
83
|
+
#### Marker options
|
|
84
|
+
|
|
85
|
+
| Option / method | Description |
|
|
86
|
+
| --- | --- |
|
|
87
|
+
| `rotation` | Marker icon rotation in radians. |
|
|
88
|
+
| `rotateWithView` | Rotates the icon with the map bearing. |
|
|
89
|
+
| `keepUpright` | With `rotateWithView: true`, flips the icon as needed to keep it readable while preserving line alignment. |
|
|
90
|
+
| `scale` | Optional scale applied to the marker icon. |
|
|
91
|
+
| `marker.setRotation(radians)` | Updates the marker's icon rotation. |
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
22
95
|
### Build Guide
|
|
23
96
|
|
|
24
97
|
Within your local development environment:
|
|
@@ -41,15 +114,11 @@ After that you can start developing inside the `src` and `test` folders (eg. ope
|
|
|
41
114
|
|
|
42
115
|
Be aware that this library overrides notable parts of leaflet core via the [L.Class.include()](https://leafletjs.com/examples/extending/extending-1-classes.html) function in order to make the rotate feature usable as a standalone plug-in.
|
|
43
116
|
|
|
44
|
-
For [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat) or [heatmap.js's Leaflet plugin](https://github.com/pa7/heatmap.js/tree/master/plugins/leaflet-heatmap), load `misc/leaflet-heat-rotate.js` after the heatmap plugin. It adapts heat redraw coordinates to the rotated pane.
|
|
45
|
-
|
|
46
|
-
Markers with `rotateWithView: true` can use `keepUpright: true` to remain readable while preserving their line alignment.
|
|
47
|
-
|
|
48
117
|
Initial changes to this project have been apported by comparing the following branches: [https://github.com/Leaflet/Leaflet/compare/main...fnicollet:rotate-master](https://github.com/Leaflet/Leaflet/compare/main...fnicollet:rotate-master) (ref: [bac6c7d](https://github.com/fnicollet/Leaflet/tree/4ab6342f74516e7087dcd2ae786c721f36addf9e))
|
|
49
118
|
|
|
50
119
|
---
|
|
51
120
|
|
|
52
121
|
**Compatibile with:**
|
|
53
|
-
[](http://leafletjs.com/reference.html)
|
|
122
|
+
[](http://leafletjs.com/reference.html) [](http://leafletjs.com/reference.html)
|
|
54
123
|
|
|
55
124
|
**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)
|
package/build/test.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { spawnSync } from 'node:child_process';
|
|
2
|
+
import { build } from './build.js';
|
|
3
|
+
|
|
4
|
+
await build();
|
|
5
|
+
|
|
6
|
+
for (const version of ['1', '2']) {
|
|
7
|
+
console.log(`\nRunning tests with Leaflet v${version}.x`);
|
|
8
|
+
const result = spawnSync(process.execPath, [
|
|
9
|
+
'node_modules/@cucumber/cucumber/bin/cucumber.js',
|
|
10
|
+
...process.argv.slice(2),
|
|
11
|
+
], {
|
|
12
|
+
env: { ...process.env, LEAFLET_VERSION: version },
|
|
13
|
+
stdio: 'inherit',
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
if (result.error) throw result.error;
|
|
17
|
+
if (result.status !== 0) process.exitCode = result.status ?? 1;
|
|
18
|
+
}
|