Skip to content

Commit 6dd6aca

Browse files
AlejandroRM-DEVAlejandroRM-DEV
authored
chore: 🤡 Update demo with latest version [skip ci] (#16)
1 parent a01d513 commit 6dd6aca

File tree

5 files changed

+2561
-1610
lines changed

5 files changed

+2561
-1610
lines changed

‎README.md

Lines changed: 136 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
# Leaflet Editable Hook
2-
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
2+
3+
[![npm version](https://img.shields.io/npm/v/leaflet-editable-hook.svg?style=flat-square)](https://www.npmjs.com/package/leaflet-editable-hook)
4+
[![npm downloads](https://img.shields.io/npm/dm/leaflet-editable-hook.svg?style=flat-square)](https://www.npmjs.com/package/leaflet-editable-hook)
5+
[![GitHub stars](https://img.shields.io/github/stars/AlejandroRM-DEV/leaflet-editable-hook?style=flat-square)](https://github.com/AlejandroRM-DEV/leaflet-editable-hook/stargazers)
6+
[![MIT License](https://img.shields.io/npm/l/leaflet-editable-hook.svg?style=flat-square)](LICENSE)
37
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
4-
<!-- ALL-CONTRIBUTORS-BADGE:END -->
8+
59
The purpose of this hook is to provide functionality for editing features on the map, such as drawing polylines, polygons, markers, rectangles, circles, and more.
610

7-
## Demo
8-
https://leaflet-editable-hook.vercel.app/
11+
## Demo
12+
13+
https://leaflet-editable-hook.vercel.app/
914

1015
## Prerequisites
16+
1117
- leaflet: "^1.9.4"
1218
- leaflet-editable: "^1.2.0"
13-
- react-leaflet: "^4.2.1"
19+
- react: "^19.0.0"
20+
- react-dom: "^19.0.0"
21+
- react-leaflet: "^5.0.0"
1422

1523
## Installation
1624

@@ -19,148 +27,153 @@ Install with npm
1927
```bash
2028
npm i leaflet-editable-hook
2129
```
22-
30+
2331
## Documentation
2432

2533
[See full documentation about Leaflet.Editable](https://leaflet.github.io/Leaflet.Editable/doc/api.html)
2634

27-
| Hook returned methods | Returns | Description |
28-
|---------------------------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
29-
| drawing() | boolean | Return true if any drawing action is ongoing. |
30-
| stopDrawing() | void | When you need to stop any ongoing drawing, without needing to know which editor is active. |
31-
| commitDrawing() | void | When you need to commit any ongoing drawing, without needing to know which editor is active. |
32-
| startPolyline(<L.LatLng> latlng, <hash> options) | L.Polyline | Start drawing a Polyline. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the Polyline class constructor. |
33-
| startPolygon(<L.LatLng> latlng, <hash> options) | L.Polygon | Start drawing a Polygon. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the Polygon class constructor. |
34-
| startMarker(<L.LatLng> latlng, <hash> options) | L.Marker | Start adding a Marker. If latlng is given, the Marker will be shown first at this point. In any case, it will follow the user mouse, and will have a final latlng on next click (or touch). If options is given, it will be passed to the Marker class constructor. |
35-
| startRectangle(<L.LatLng> latlng, <hash> options) | L.Rectangle | Start drawing a Rectangle. If latlng is given, the Rectangle anchor will be added. In any case, continuing on user drag. If options is given, it will be passed to the Rectangle class constructor. |
36-
| startCircle(<L.LatLng> latlng, <hash> options) | L.Circle | Start drawing a Circle. If latlng is given, the Circle anchor will be added. In any case, continuing on user drag. If options is given, it will be passed to the Circle class constructor. |
37-
| enableEdit(feature: L.Layer) | void | Enable editing, by creating an editor if not existing, and then calling enable on it. |
38-
| disableEdit(feature: L.Layer) | void | Disable editing, also remove the editor property reference. |
39-
40-
41-
| Events |
42-
|------------------------|
43-
| onCreated |
44-
| onEnable |
45-
| onDisable |
46-
| onEditing |
47-
| onDragStart |
48-
| onDrag |
49-
| onDragEnd |
50-
| onDrawingStart |
51-
| onDrawingEnd |
52-
| onDrawingCancel |
53-
| onDrawingCommit |
54-
| onDrawingMousedown |
55-
| onDrawingMouseup |
56-
| onDrawingClick |
57-
| onDrawingMove |
58-
| onDrawingClicked |
59-
| onVertexNew |
60-
| onVertexClick |
61-
| onVertexClicked |
62-
| onVertexRawclick |
63-
| onVertexDeleted |
64-
| onVertexCtrlclick |
65-
| onVertexShiftclick |
66-
| onVertexMetakeyclick |
67-
| onVertexAltclick |
68-
| onVertexContextmenu |
69-
| onVertexMousedown |
70-
| onVertexDrag |
71-
| onVertexDragstart |
72-
| onVertexDragend |
73-
| onMiddlemarkerMousedown|
74-
| onShapeNew |
75-
| onShapeDelete |
76-
| onShapeDeleted |
77-
35+
| Hook returned methods | Returns | Description |
36+
| ------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
37+
| drawing() | boolean | Return true if any drawing action is ongoing. |
38+
| stopDrawing() | void | When you need to stop any ongoing drawing, without needing to know which editor is active. |
39+
| commitDrawing() | void | When you need to commit any ongoing drawing, without needing to know which editor is active. |
40+
| startPolyline(<L.LatLng> latlng, <hash> options) | L.Polyline | Start drawing a Polyline. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the Polyline class constructor. |
41+
| startPolygon(<L.LatLng> latlng, <hash> options) | L.Polygon | Start drawing a Polygon. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the Polygon class constructor. |
42+
| startMarker(<L.LatLng> latlng, <hash> options) | L.Marker | Start adding a Marker. If latlng is given, the Marker will be shown first at this point. In any case, it will follow the user mouse, and will have a final latlng on next click (or touch). If options is given, it will be passed to the Marker class constructor. |
43+
| startRectangle(<L.LatLng> latlng, <hash> options) | L.Rectangle | Start drawing a Rectangle. If latlng is given, the Rectangle anchor will be added. In any case, continuing on user drag. If options is given, it will be passed to the Rectangle class constructor. |
44+
| startCircle(<L.LatLng> latlng, <hash> options) | L.Circle | Start drawing a Circle. If latlng is given, the Circle anchor will be added. In any case, continuing on user drag. If options is given, it will be passed to the Circle class constructor. |
45+
| enableEdit(feature: L.Layer) | void | Enable editing, by creating an editor if not existing, and then calling enable on it. |
46+
| disableEdit(feature: L.Layer) | void | Disable editing, also remove the editor property reference. |
47+
48+
| Events |
49+
| ----------------------- |
50+
| onCreated |
51+
| onEnable |
52+
| onDisable |
53+
| onEditing |
54+
| onDragStart |
55+
| onDrag |
56+
| onDragEnd |
57+
| onDrawingStart |
58+
| onDrawingEnd |
59+
| onDrawingCancel |
60+
| onDrawingCommit |
61+
| onDrawingMousedown |
62+
| onDrawingMouseup |
63+
| onDrawingClick |
64+
| onDrawingMove |
65+
| onDrawingClicked |
66+
| onVertexNew |
67+
| onVertexClick |
68+
| onVertexClicked |
69+
| onVertexRawclick |
70+
| onVertexDeleted |
71+
| onVertexCtrlclick |
72+
| onVertexShiftclick |
73+
| onVertexMetakeyclick |
74+
| onVertexAltclick |
75+
| onVertexContextmenu |
76+
| onVertexMousedown |
77+
| onVertexDrag |
78+
| onVertexDragstart |
79+
| onVertexDragend |
80+
| onMiddlemarkerMousedown |
81+
| onShapeNew |
82+
| onShapeDelete |
83+
| onShapeDeleted |
7884

7985
## Usage/Examples
8086

8187
```javascript
82-
import { useMap, Marker, Tooltip } from 'react-leaflet';
83-
import { useState, useEffect } from 'react';
84-
import * as turf from '@turf/turf';
85-
import { useLeafletEditable } from 'leaflet-editable-hook';
88+
import { useMap, Marker, Tooltip } from "react-leaflet";
89+
import { useState, useEffect } from "react";
90+
import * as turf from "@turf/turf";
91+
import { useLeafletEditable } from "leaflet-editable-hook";
8692

8793
function Ruler() {
88-
const map = useMap();
89-
const [ruler, setRuler] = useState(null);
90-
91-
const onDrawingClicked = (e) => {
92-
const position = e.latlng;
93-
const latlngs = e.layer._latlngs;
94-
let length = 0;
95-
if (latlngs.length > 1) {
96-
const line = turf.lineString([...latlngs.map((item) => [item.lng, item.lat])]);
97-
length = turf.length(line, { units: 'kilometers' });
98-
}
99-
setRuler(<RulerMarker position={[position.lat, position.lng]} length={length} />);
100-
};
101-
102-
const onVertexDrag = (e) => {
103-
const latlngs = e.layer._latlngs;
104-
let length = 0;
105-
if (latlngs.length > 1) {
106-
const line = turf.lineString([...latlngs.map((item) => [item.lng, item.lat])]);
107-
length = turf.length(line, { units: 'kilometers' });
108-
}
109-
setRuler(
110-
<RulerMarker
111-
position={[latlngs[latlngs.length - 1].lat, latlngs[latlngs.length - 1].lng]}
112-
length={length}
113-
/>
114-
);
115-
};
116-
117-
const { startPolyline } = useLeafletEditable({
118-
events: {
119-
onDrawingClicked,
120-
onVertexDrag,
121-
},
122-
});
123-
124-
useEffect(() => {
125-
const polyline = startPolyline();
126-
return () => {
127-
map.removeLayer(polyline);
128-
};
129-
}, []);
130-
131-
return ruler;
94+
const map = useMap();
95+
const [ruler, setRuler] = useState(null);
96+
97+
const onDrawingClicked = (e) => {
98+
const position = e.latlng;
99+
const latlngs = e.layer._latlngs;
100+
let length = 0;
101+
if (latlngs.length > 1) {
102+
const line = turf.lineString([
103+
...latlngs.map((item) => [item.lng, item.lat]),
104+
]);
105+
length = turf.length(line, { units: "kilometers" });
106+
}
107+
setRuler(
108+
<RulerMarker position={[position.lat, position.lng]} length={length} />
109+
);
110+
};
111+
112+
const onVertexDrag = (e) => {
113+
const latlngs = e.layer._latlngs;
114+
let length = 0;
115+
if (latlngs.length > 1) {
116+
const line = turf.lineString([
117+
...latlngs.map((item) => [item.lng, item.lat]),
118+
]);
119+
length = turf.length(line, { units: "kilometers" });
120+
}
121+
setRuler(
122+
<RulerMarker
123+
position={[
124+
latlngs[latlngs.length - 1].lat,
125+
latlngs[latlngs.length - 1].lng,
126+
]}
127+
length={length}
128+
/>
129+
);
130+
};
131+
132+
const { startPolyline } = useLeafletEditable({
133+
events: {
134+
onDrawingClicked,
135+
onVertexDrag,
136+
},
137+
});
138+
139+
useEffect(() => {
140+
const polyline = startPolyline();
141+
return () => {
142+
map.removeLayer(polyline);
143+
};
144+
}, []);
145+
146+
return ruler;
132147
}
133148

134149
function RulerMarker({ position, length }) {
135-
return (
136-
<Marker
137-
position={position}
138-
icon={L.divIcon({
139-
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="0%">
150+
return (
151+
<Marker
152+
position={position}
153+
icon={L.divIcon({
154+
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="0%">
140155
<title>circle-small</title>
141156
<path d="M12,10A2,2 0 0,0 10,12C10,13.11 10.9,14 12,14C13.11,14 14,13.11 14,12A2,2 0 0,0 12,10Z" />
142157
</svg>`,
143-
className: 'marker-icon',
144-
iconSize: [24, 24],
145-
popupAnchor: [0, -12],
146-
})}
147-
>
148-
<Tooltip permanent offset={[10, 0]} direction="right">
149-
{length.toFixed(3)} KM
150-
</Tooltip>
151-
</Marker>
152-
);
158+
className: "marker-icon",
159+
iconSize: [24, 24],
160+
popupAnchor: [0, -12],
161+
})}
162+
>
163+
<Tooltip permanent offset={[10, 0]} direction="right">
164+
{length.toFixed(3)} KM
165+
</Tooltip>
166+
</Marker>
167+
);
153168
}
154169

155170
export default Ruler;
156171
```
157172

158-
159173
## License
160174

161175
[MIT](https://choosealicense.com/licenses/mit/)
162176

163-
164177
## Contributors ✨
165178

166179
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -183,4 +196,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
183196

184197
<!-- ALL-CONTRIBUTORS-LIST:END -->
185198

186-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
199+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

0 commit comments

Comments
 (0)