https://github.com/alejandrorm-dev/leaflet-editable-hook
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.
https://github.com/alejandrorm-dev/leaflet-editable-hook
Last synced: 8 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/alejandrorm-dev/leaflet-editable-hook
- Owner: AlejandroRM-DEV
- License: mit
- Created: 2024-03-02T15:24:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-24T19:32:25.000Z (about 2 years ago)
- Last Synced: 2024-10-30T05:34:35.563Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://leaflet-editable-hook.vercel.app
- Size: 181 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaflet Editable Hook
[](https://www.npmjs.com/package/leaflet-editable-hook)
[](https://www.npmjs.com/package/leaflet-editable-hook)
[](https://github.com/AlejandroRM-DEV/leaflet-editable-hook/stargazers)
[](LICENSE)
[](#contributors-)
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.
## Demo
https://leaflet-editable-hook.vercel.app/
## Prerequisites
- leaflet: "^1.9.4"
- leaflet-editable: "^1.2.0"
- react: "^19.0.0"
- react-dom: "^19.0.0"
- react-leaflet: "^5.0.0"
## Installation
Install with npm
```bash
npm i leaflet-editable-hook
```
## Documentation
[See full documentation about Leaflet.Editable](https://leaflet.github.io/Leaflet.Editable/doc/api.html)
| Hook returned methods | Returns | Description |
| ------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| drawing() | boolean | Return true if any drawing action is ongoing. |
| stopDrawing() | void | When you need to stop any ongoing drawing, without needing to know which editor is active. |
| commitDrawing() | void | When you need to commit any ongoing drawing, without needing to know which editor is active. |
| startPolyline( latlng, 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. |
| startPolygon( latlng, 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. |
| startMarker( latlng, 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. |
| startRectangle( latlng, 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. |
| startCircle( latlng, 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. |
| enableEdit(feature: L.Layer) | void | Enable editing, by creating an editor if not existing, and then calling enable on it. |
| disableEdit(feature: L.Layer) | void | Disable editing, also remove the editor property reference. |
| Events |
| ----------------------- |
| onCreated |
| onEnable |
| onDisable |
| onEditing |
| onDragStart |
| onDrag |
| onDragEnd |
| onDrawingStart |
| onDrawingEnd |
| onDrawingCancel |
| onDrawingCommit |
| onDrawingMousedown |
| onDrawingMouseup |
| onDrawingClick |
| onDrawingMove |
| onDrawingClicked |
| onVertexNew |
| onVertexClick |
| onVertexClicked |
| onVertexRawclick |
| onVertexDeleted |
| onVertexCtrlclick |
| onVertexShiftclick |
| onVertexMetakeyclick |
| onVertexAltclick |
| onVertexContextmenu |
| onVertexMousedown |
| onVertexDrag |
| onVertexDragstart |
| onVertexDragend |
| onMiddlemarkerMousedown |
| onShapeNew |
| onShapeDelete |
| onShapeDeleted |
## Usage/Examples
```javascript
import { useMap, Marker, Tooltip } from "react-leaflet";
import { useState, useEffect } from "react";
import * as turf from "@turf/turf";
import { useLeafletEditable } from "leaflet-editable-hook";
function Ruler() {
const map = useMap();
const [ruler, setRuler] = useState(null);
const onDrawingClicked = (e) => {
const position = e.latlng;
const latlngs = e.layer._latlngs;
let length = 0;
if (latlngs.length > 1) {
const line = turf.lineString([
...latlngs.map((item) => [item.lng, item.lat]),
]);
length = turf.length(line, { units: "kilometers" });
}
setRuler(
);
};
const onVertexDrag = (e) => {
const latlngs = e.layer._latlngs;
let length = 0;
if (latlngs.length > 1) {
const line = turf.lineString([
...latlngs.map((item) => [item.lng, item.lat]),
]);
length = turf.length(line, { units: "kilometers" });
}
setRuler(
);
};
const { startPolyline } = useLeafletEditable({
events: {
onDrawingClicked,
onVertexDrag,
},
});
useEffect(() => {
const polyline = startPolyline();
return () => {
map.removeLayer(polyline);
};
}, []);
return ruler;
}
function RulerMarker({ position, length }) {
return (
circle-small
`,
className: "marker-icon",
iconSize: [24, 24],
popupAnchor: [0, -12],
})}
>
{length.toFixed(3)} KM
);
}
export default Ruler;
```
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Charles Richardson
💻
saiNaruUFL
💻
Alejandro Ramírez Muñoz
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!