Skip to content

Commit 3093084

Browse files
AlejandroRM-DEVAlejandroRM-DEV
authored
Create README.md
1 parent ebb1962 commit 3093084

File tree

1 file changed

+156
-0
lines changed

1 file changed

+156
-0
lines changed

‎leaflet-editable-hook/src/hooks/README.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Leaflet Editable Hook
2+
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.
3+
4+
## Demo
5+
https://leaflet-editable-hook.vercel.app/
6+
7+
## Prerequisites
8+
- leaflet: "^1.9.4"
9+
- leaflet-editable: "^1.2.0"
10+
- react-leaflet: "^4.2.1"
11+
12+
## Installation
13+
14+
Install with npm
15+
16+
```bash
17+
npm i leaflet-editable-hook
18+
```
19+
20+
## Documentation
21+
22+
[See full documentation about Leaflet.Editable](https://leaflet.github.io/Leaflet.Editable/doc/api.html)
23+
24+
| Hook returned methods | Returns | Description |
25+
|---------------------------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
26+
| drawing() | boolean | Return true if any drawing action is ongoing. |
27+
| stopDrawing() | | When you need to stop any ongoing drawing, without needing to know which editor is active. |
28+
| commitDrawing() | | When you need to commit any ongoing drawing, without needing to know which editor is active. |
29+
| 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. |
30+
| 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. |
31+
| 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. |
32+
| 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. |
33+
| 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. |
34+
35+
36+
| Events |
37+
|------------------------|
38+
| onCreated |
39+
| onEnable |
40+
| onDisable |
41+
| onEditing |
42+
| onDragstart |
43+
| onDrag |
44+
| onDragend |
45+
| onDrawingStart |
46+
| onDrawingEnd |
47+
| onDrawingCancel |
48+
| onDrawingCommit |
49+
| onDrawingMousedown |
50+
| onDrawingMouseup |
51+
| onDrawingClick |
52+
| onDrawingMove |
53+
| onDrawingClicked |
54+
| onVertexNew |
55+
| onVertexClick |
56+
| onVertexClicked |
57+
| onVertexRawclick |
58+
| onVertexDeleted |
59+
| onVertexCtrlclick |
60+
| onVertexShiftclick |
61+
| onVertexMetakeyclick |
62+
| onVertexAltclick |
63+
| onVertexContextmenu |
64+
| onVertexMousedown |
65+
| onVertexDrag |
66+
| onVertexDragstart |
67+
| onVertexDragend |
68+
| onMiddlemarkerMousedown|
69+
| onShapeNew |
70+
| onShapeDelete |
71+
| onShapeDeleted |
72+
73+
74+
## Usage/Examples
75+
76+
```javascript
77+
import { useMap, Marker, Tooltip } from 'react-leaflet';
78+
import { useState, useEffect } from 'react';
79+
import * as turf from '@turf/turf';
80+
import { useLeafletEditable } from 'leaflet-editable-hook';
81+
82+
function Ruler() {
83+
const map = useMap();
84+
const [ruler, setRuler] = useState(null);
85+
86+
const onDrawingClicked = (e) => {
87+
const position = e.latlng;
88+
const latlngs = e.layer._latlngs;
89+
let length = 0;
90+
if (latlngs.length > 1) {
91+
const line = turf.lineString([...latlngs.map((item) => [item.lng, item.lat])]);
92+
length = turf.length(line, { units: 'kilometers' });
93+
}
94+
setRuler(<RulerMarker position={[position.lat, position.lng]} length={length} />);
95+
};
96+
97+
const onVertexDrag = (e) => {
98+
const latlngs = e.layer._latlngs;
99+
let length = 0;
100+
if (latlngs.length > 1) {
101+
const line = turf.lineString([...latlngs.map((item) => [item.lng, item.lat])]);
102+
length = turf.length(line, { units: 'kilometers' });
103+
}
104+
setRuler(
105+
<RulerMarker
106+
position={[latlngs[latlngs.length - 1].lat, latlngs[latlngs.length - 1].lng]}
107+
length={length}
108+
/>
109+
);
110+
};
111+
112+
const { startPolyline } = useLeafletEditable({
113+
events: {
114+
onDrawingClicked,
115+
onVertexDrag,
116+
},
117+
});
118+
119+
useEffect(() => {
120+
const polyline = startPolyline();
121+
return () => {
122+
map.removeLayer(polyline);
123+
};
124+
}, []);
125+
126+
return ruler;
127+
}
128+
129+
function RulerMarker({ position, length }) {
130+
return (
131+
<Marker
132+
position={position}
133+
icon={L.divIcon({
134+
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="0%">
135+
<title>circle-small</title>
136+
<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" />
137+
</svg>`,
138+
className: 'marker-icon',
139+
iconSize: [24, 24],
140+
popupAnchor: [0, -12],
141+
})}
142+
>
143+
<Tooltip permanent offset={[10, 0]} direction="right">
144+
{length.toFixed(3)} KM
145+
</Tooltip>
146+
</Marker>
147+
);
148+
}
149+
150+
export default Ruler;
151+
```
152+
153+
154+
## License
155+
156+
[MIT](https://choosealicense.com/licenses/mit/)

0 commit comments

Comments
 (0)