react-leaflet-measure 2.1.1 → 3.0.0-beta.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/CHANGELOG.md +7 -0
- package/README.md +13 -34
- package/babel.config.js +20 -0
- package/dist/react-leaflet-measure.js +372 -133
- package/dist/react-leaflet-measure.min.js +1 -1
- package/package.json +38 -35
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
react-leaflet-measure Changelog
|
|
2
2
|
=========================
|
|
3
3
|
|
|
4
|
+
## 3.0.0 (2025-11-28)
|
|
5
|
+
|
|
6
|
+
* Update Leaflet dependency to 1.9.4
|
|
7
|
+
* Update react-leaflet dependency to 5.0.0
|
|
8
|
+
* Update react dependency to 19.2.1
|
|
9
|
+
* NPM Audit Fix
|
|
10
|
+
|
|
4
11
|
## 2.1.1 (2019-02-07)
|
|
5
12
|
|
|
6
13
|
* Add website
|
package/README.md
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
# react-leaflet-measure
|
|
2
2
|
|
|
3
|
-
[](https://travis-ci.org/mhasbie/react-leaflet-measure)
|
|
4
3
|
[](http://npm.im/react-leaflet-measure)
|
|
5
|
-
[](https://david-dm.org/mhasbie/react-leaflet-measure)
|
|
7
|
-
[](https://david-dm.org/mhasbie/react-leaflet-measure?type=peer)
|
|
8
|
-
[](http://npm-stat.com/charts.html?package=react-leaflet-measure&from=2018-01-01)
|
|
4
|
+
[](https://github.com/mhasbie/react-leaflet-measure)
|
|
9
5
|
[](https://github.com/mhasbie/react-leaflet-measure/issues)
|
|
6
|
+
[](http://npm-stat.com/charts.html?package=react-leaflet-measure&from=2018-01-01)
|
|
7
|
+
[](http://opensource.org/licenses/MIT)
|
|
8
|
+
|
|
10
9
|
|
|
11
10
|
React wrapper of [leaflet-measure](https://github.com/ljagis/leaflet-measure)
|
|
12
11
|
for [react-leaflet](https://github.com/PaulLeCam/react-leaflet).
|
|
13
12
|
|
|
14
13
|
Coordinate, linear, and area measure control for [Leaflet](http://leafletjs.com) maps. Extends [L.Control](http://leafletjs.com/reference.html#control).
|
|
15
14
|
|
|
16
|
-
*Tested with Leaflet 1.
|
|
15
|
+
*Tested with React 19.2.0, Leaflet 1.9.4, React-Leaflet 5.0.0, React-Leaflet 4.0.0*
|
|
17
16
|
|
|
18
17
|
|
|
19
18
|
## Demos
|
|
@@ -33,7 +32,7 @@ npm install react-leaflet-measure --save
|
|
|
33
32
|
## Usage example
|
|
34
33
|
|
|
35
34
|
```javascript
|
|
36
|
-
import {
|
|
35
|
+
import { MapContainer, TileLayer } from 'react-leaflet';
|
|
37
36
|
import MeasureControl from 'react-leaflet-measure';
|
|
38
37
|
|
|
39
38
|
const measureOptions = {
|
|
@@ -43,10 +42,13 @@ const measureOptions = {
|
|
|
43
42
|
primaryAreaUnit: 'sqmeters',
|
|
44
43
|
secondaryAreaUnit: 'acres',
|
|
45
44
|
activeColor: '#db4a29',
|
|
46
|
-
completedColor: '#9b2d14'
|
|
45
|
+
completedColor: '#9b2d14',
|
|
46
|
+
captureZIndex: 10000,
|
|
47
|
+
onMeasureStart: (e) => console.log('Measurement started:', e),
|
|
48
|
+
onMeasureFinish: (e) => console.log('Measurement finished:', e),
|
|
47
49
|
};
|
|
48
50
|
|
|
49
|
-
<
|
|
51
|
+
<MapContainer center={[101.483459, 2.938926]} zoom={12}>
|
|
50
52
|
<TileLayer
|
|
51
53
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
52
54
|
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
@@ -56,29 +58,6 @@ const measureOptions = {
|
|
|
56
58
|
</Map>
|
|
57
59
|
```
|
|
58
60
|
|
|
59
|
-
### Usage with React-Leaflet v2
|
|
60
|
-
|
|
61
|
-
This plugin is compatible with version 2 of React-Leaflet, but you have to wrap the `MeasureControl` component using the [`withLeaflet` higher-order component](https://react-leaflet.js.org/docs/en/context.html) to give it access to the new context mechanism. For example:
|
|
62
|
-
|
|
63
|
-
```javascript
|
|
64
|
-
import { Map, withLeaflet } from 'react-leaflet';
|
|
65
|
-
|
|
66
|
-
// Import to a different variable so you don't have to update the rest of your codes
|
|
67
|
-
import MeasureControlDefault from 'react-leaflet-measure';
|
|
68
|
-
|
|
69
|
-
// Wrap our new variable and assign it to the one we used before. The rest of the codes stays the same.
|
|
70
|
-
const MeasureControl = withLeaflet(MeasureControlDefault);
|
|
71
|
-
|
|
72
|
-
<Map center={[101.483459, 2.938926]} zoom={12}>
|
|
73
|
-
<TileLayer
|
|
74
|
-
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
75
|
-
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
76
|
-
/>
|
|
77
|
-
|
|
78
|
-
<MeasureControl />
|
|
79
|
-
</Map>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
61
|
### Control options
|
|
83
62
|
|
|
84
63
|
Any props passed to MeasureControl are passed down to leaflet-measure.
|
|
@@ -90,8 +69,8 @@ Refer [leaflet-measure control options](https://github.com/ljagis/leaflet-measur
|
|
|
90
69
|
|
|
91
70
|
| Event | Data | Description
|
|
92
71
|
| --- | --- | ---
|
|
93
|
-
|
|
|
94
|
-
|
|
|
72
|
+
| onMeasureStart | this | Fired when measurement starts.
|
|
73
|
+
| onMeasureFinish | result | Fired when measurement finishes with results of the measurement.
|
|
95
74
|
|
|
96
75
|
|
|
97
76
|
# Credits
|
package/babel.config.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
presets: [
|
|
3
|
+
['@babel/preset-env', { modules: false }],
|
|
4
|
+
'@babel/preset-react'
|
|
5
|
+
],
|
|
6
|
+
plugins: [
|
|
7
|
+
'@babel/plugin-transform-class-properties'
|
|
8
|
+
],
|
|
9
|
+
env: {
|
|
10
|
+
test: {
|
|
11
|
+
presets: [
|
|
12
|
+
'@babel/preset-env',
|
|
13
|
+
'@babel/preset-react'
|
|
14
|
+
],
|
|
15
|
+
plugins: [
|
|
16
|
+
'@babel/plugin-transform-class-properties'
|
|
17
|
+
],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
};
|