From 324d91e8215a4eb4f5e855fa9f8a8e83529b115e Mon Sep 17 00:00:00 2001
From: Alejandro Ramirez Munoz <alejandror45@gmail.com>
Date: Wed, 22 May 2024 17:38:46 -0600
Subject: [PATCH] Refactor
---
{leaflet-editable-hook => demo}/.eslintrc.cjs | 0
{leaflet-editable-hook => demo}/.gitignore | 0
.../.prettierrc.json | 0
demo/README.md | 8 +
{leaflet-editable-hook => demo}/index.html | 0
.../package-lock.json | 13 ++
demo/package.json | 36 ++++
.../public/vite.svg | 0
{leaflet-editable-hook => demo}/src/App.css | 0
{leaflet-editable-hook => demo}/src/App.jsx | 0
{leaflet-editable-hook => demo}/src/Area.jsx | 2 +-
.../src/ControlBar.jsx | 0
{leaflet-editable-hook => demo}/src/Ruler.jsx | 2 +-
.../src/assets/react.svg | 0
{leaflet-editable-hook => demo}/src/index.css | 0
{leaflet-editable-hook => demo}/src/main.jsx | 0
.../vite.config.js | 0
leaflet-editable-hook/README.md | 158 +++++++++++++++++-
.../{src/hooks => }/index.d.ts | 0
leaflet-editable-hook/index.js | 2 +
leaflet-editable-hook/package.json | 44 +++--
leaflet-editable-hook/src/hooks/README.md | 156 -----------------
leaflet-editable-hook/src/hooks/index.js | 1 -
leaflet-editable-hook/src/hooks/package.json | 29 ----
.../{src/hooks => }/useLeafletEditable.js | 0
25 files changed, 233 insertions(+), 218 deletions(-)
rename {leaflet-editable-hook => demo}/.eslintrc.cjs (100%)
rename {leaflet-editable-hook => demo}/.gitignore (100%)
rename {leaflet-editable-hook => demo}/.prettierrc.json (100%)
create mode 100644 demo/README.md
rename {leaflet-editable-hook => demo}/index.html (100%)
rename {leaflet-editable-hook => demo}/package-lock.json (99%)
create mode 100644 demo/package.json
rename {leaflet-editable-hook => demo}/public/vite.svg (100%)
rename {leaflet-editable-hook => demo}/src/App.css (100%)
rename {leaflet-editable-hook => demo}/src/App.jsx (100%)
rename {leaflet-editable-hook => demo}/src/Area.jsx (96%)
rename {leaflet-editable-hook => demo}/src/ControlBar.jsx (100%)
rename {leaflet-editable-hook => demo}/src/Ruler.jsx (97%)
rename {leaflet-editable-hook => demo}/src/assets/react.svg (100%)
rename {leaflet-editable-hook => demo}/src/index.css (100%)
rename {leaflet-editable-hook => demo}/src/main.jsx (100%)
rename {leaflet-editable-hook => demo}/vite.config.js (100%)
rename leaflet-editable-hook/{src/hooks => }/index.d.ts (100%)
create mode 100644 leaflet-editable-hook/index.js
delete mode 100644 leaflet-editable-hook/src/hooks/README.md
delete mode 100644 leaflet-editable-hook/src/hooks/index.js
delete mode 100644 leaflet-editable-hook/src/hooks/package.json
rename leaflet-editable-hook/{src/hooks => }/useLeafletEditable.js (100%)
diff --git a/leaflet-editable-hook/.eslintrc.cjs b/demo/.eslintrc.cjs
similarity index 100%
rename from leaflet-editable-hook/.eslintrc.cjs
rename to demo/.eslintrc.cjs
diff --git a/leaflet-editable-hook/.gitignore b/demo/.gitignore
similarity index 100%
rename from leaflet-editable-hook/.gitignore
rename to demo/.gitignore
diff --git a/leaflet-editable-hook/.prettierrc.json b/demo/.prettierrc.json
similarity index 100%
rename from leaflet-editable-hook/.prettierrc.json
rename to demo/.prettierrc.json
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 0000000..f768e33
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/leaflet-editable-hook/index.html b/demo/index.html
similarity index 100%
rename from leaflet-editable-hook/index.html
rename to demo/index.html
diff --git a/leaflet-editable-hook/package-lock.json b/demo/package-lock.json
similarity index 99%
rename from leaflet-editable-hook/package-lock.json
rename to demo/package-lock.json
index 039c165..b915eb3 100644
--- a/leaflet-editable-hook/package-lock.json
+++ b/demo/package-lock.json
@@ -13,6 +13,7 @@
"antd": "^5.15.0",
"leaflet": "^1.9.4",
"leaflet-editable": "^1.2.0",
+ "leaflet-editable-hook": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
@@ -4982,6 +4983,18 @@
"resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz",
"integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ=="
},
+ "node_modules/leaflet-editable-hook": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/leaflet-editable-hook/-/leaflet-editable-hook-1.2.0.tgz",
+ "integrity": "sha512-zm7Ee1q6s0OSvgTGPNApkXzWlVzvO8zv4DjH5AHUSnXliob8GcjqACkafi/FVHhRvXcxgUlUjC18JnGKPj+V+Q==",
+ "peerDependencies": {
+ "leaflet": "^1.9.4",
+ "leaflet-editable": "^1.2.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-leaflet": "^4.2.1"
+ }
+ },
"node_modules/levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
diff --git a/demo/package.json b/demo/package.json
new file mode 100644
index 0000000..8d347e0
--- /dev/null
+++ b/demo/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "leaflet-editable-hook",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@turf/turf": "^6.5.0",
+ "@vercel/analytics": "^1.2.2",
+ "antd": "^5.15.0",
+ "leaflet": "^1.9.4",
+ "leaflet-editable": "^1.2.0",
+ "leaflet-editable-hook": "^1.2.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-icons": "^5.0.1",
+ "react-leaflet": "^4.2.1",
+ "react-leaflet-custom-control": "^1.4.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.56",
+ "@types/react-dom": "^18.2.19",
+ "@vitejs/plugin-react": "^4.2.1",
+ "eslint": "^8.56.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.5",
+ "prettier": "^3.2.5",
+ "vite": "^5.1.4"
+ }
+}
diff --git a/leaflet-editable-hook/public/vite.svg b/demo/public/vite.svg
similarity index 100%
rename from leaflet-editable-hook/public/vite.svg
rename to demo/public/vite.svg
diff --git a/leaflet-editable-hook/src/App.css b/demo/src/App.css
similarity index 100%
rename from leaflet-editable-hook/src/App.css
rename to demo/src/App.css
diff --git a/leaflet-editable-hook/src/App.jsx b/demo/src/App.jsx
similarity index 100%
rename from leaflet-editable-hook/src/App.jsx
rename to demo/src/App.jsx
diff --git a/leaflet-editable-hook/src/Area.jsx b/demo/src/Area.jsx
similarity index 96%
rename from leaflet-editable-hook/src/Area.jsx
rename to demo/src/Area.jsx
index 130c362..f2a3e37 100644
--- a/leaflet-editable-hook/src/Area.jsx
+++ b/demo/src/Area.jsx
@@ -1,7 +1,7 @@
import { useMap, Marker, Tooltip } from 'react-leaflet';
import { useState, useEffect } from 'react';
import * as turf from '@turf/turf';
-import { useLeafletEditable } from './hooks';
+import useLeafletEditable from 'leaflet-editable-hook';
function Area() {
const map = useMap();
diff --git a/leaflet-editable-hook/src/ControlBar.jsx b/demo/src/ControlBar.jsx
similarity index 100%
rename from leaflet-editable-hook/src/ControlBar.jsx
rename to demo/src/ControlBar.jsx
diff --git a/leaflet-editable-hook/src/Ruler.jsx b/demo/src/Ruler.jsx
similarity index 97%
rename from leaflet-editable-hook/src/Ruler.jsx
rename to demo/src/Ruler.jsx
index 55a2e04..17493d5 100644
--- a/leaflet-editable-hook/src/Ruler.jsx
+++ b/demo/src/Ruler.jsx
@@ -1,7 +1,7 @@
import { useMap, Marker, Tooltip } from 'react-leaflet';
import { useState, useEffect } from 'react';
import * as turf from '@turf/turf';
-import { useLeafletEditable } from './hooks';
+import { useLeafletEditable } from 'leaflet-editable-hook';
function Ruler() {
const map = useMap();
diff --git a/leaflet-editable-hook/src/assets/react.svg b/demo/src/assets/react.svg
similarity index 100%
rename from leaflet-editable-hook/src/assets/react.svg
rename to demo/src/assets/react.svg
diff --git a/leaflet-editable-hook/src/index.css b/demo/src/index.css
similarity index 100%
rename from leaflet-editable-hook/src/index.css
rename to demo/src/index.css
diff --git a/leaflet-editable-hook/src/main.jsx b/demo/src/main.jsx
similarity index 100%
rename from leaflet-editable-hook/src/main.jsx
rename to demo/src/main.jsx
diff --git a/leaflet-editable-hook/vite.config.js b/demo/vite.config.js
similarity index 100%
rename from leaflet-editable-hook/vite.config.js
rename to demo/vite.config.js
diff --git a/leaflet-editable-hook/README.md b/leaflet-editable-hook/README.md
index f768e33..8cc0f68 100644
--- a/leaflet-editable-hook/README.md
+++ b/leaflet-editable-hook/README.md
@@ -1,8 +1,156 @@
-# React + Vite
+# 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.
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Demo
+https://leaflet-editable-hook.vercel.app/
-Currently, two official plugins are available:
+## Prerequisites
+- leaflet: "^1.9.4"
+- leaflet-editable: "^1.2.0"
+- react-leaflet: "^4.2.1"
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 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() | | When you need to stop any ongoing drawing, without needing to know which editor is active. |
+| commitDrawing() | | When you need to commit any ongoing drawing, without needing to know which editor is active. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+
+
+| 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(<RulerMarker position={[position.lat, position.lng]} length={length} />);
+ };
+
+ 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(
+ <RulerMarker
+ position={[latlngs[latlngs.length - 1].lat, latlngs[latlngs.length - 1].lng]}
+ length={length}
+ />
+ );
+ };
+
+ const { startPolyline } = useLeafletEditable({
+ events: {
+ onDrawingClicked,
+ onVertexDrag,
+ },
+ });
+
+ useEffect(() => {
+ const polyline = startPolyline();
+ return () => {
+ map.removeLayer(polyline);
+ };
+ }, []);
+
+ return ruler;
+}
+
+function RulerMarker({ position, length }) {
+ return (
+ <Marker
+ position={position}
+ icon={L.divIcon({
+ html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="0%">
+ <title>circle-small</title>
+ <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" />
+ </svg>`,
+ className: 'marker-icon',
+ iconSize: [24, 24],
+ popupAnchor: [0, -12],
+ })}
+ >
+ <Tooltip permanent offset={[10, 0]} direction="right">
+ {length.toFixed(3)} KM
+ </Tooltip>
+ </Marker>
+ );
+}
+
+export default Ruler;
+```
+
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/leaflet-editable-hook/src/hooks/index.d.ts b/leaflet-editable-hook/index.d.ts
similarity index 100%
rename from leaflet-editable-hook/src/hooks/index.d.ts
rename to leaflet-editable-hook/index.d.ts
diff --git a/leaflet-editable-hook/index.js b/leaflet-editable-hook/index.js
new file mode 100644
index 0000000..62c0022
--- /dev/null
+++ b/leaflet-editable-hook/index.js
@@ -0,0 +1,2 @@
+export { default } from "./useLeafletEditable";
+export { default as useLeafletEditable } from "./useLeafletEditable";
diff --git a/leaflet-editable-hook/package.json b/leaflet-editable-hook/package.json
index af6c8ca..2c9c6c5 100644
--- a/leaflet-editable-hook/package.json
+++ b/leaflet-editable-hook/package.json
@@ -1,35 +1,29 @@
{
"name": "leaflet-editable-hook",
- "private": true,
- "version": "0.0.0",
- "type": "module",
+ "version": "1.2.0",
+ "description": "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.",
+ "main": "index.js",
"scripts": {
- "dev": "vite",
- "build": "vite build",
- "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
- "preview": "vite preview"
+ "test": "echo \"Error: no test specified\" && exit 1"
},
- "dependencies": {
- "@turf/turf": "^6.5.0",
- "@vercel/analytics": "^1.2.2",
- "antd": "^5.15.0",
+ "peerDependencies": {
"leaflet": "^1.9.4",
"leaflet-editable": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-icons": "^5.0.1",
- "react-leaflet": "^4.2.1",
- "react-leaflet-custom-control": "^1.4.0"
+ "react-leaflet": "^4.2.1"
},
- "devDependencies": {
- "@types/react": "^18.2.56",
- "@types/react-dom": "^18.2.19",
- "@vitejs/plugin-react": "^4.2.1",
- "eslint": "^8.56.0",
- "eslint-plugin-react": "^7.33.2",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-refresh": "^0.4.5",
- "prettier": "^3.2.5",
- "vite": "^5.1.4"
- }
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/AlejandroRM-DEV/leaflet-editable-hook.git"
+ },
+ "keywords": [
+ "leaflet"
+ ],
+ "author": "Alejandro Ramírez Muñoz",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/AlejandroRM-DEV/leaflet-editable-hook/issues"
+ },
+ "homepage": "https://github.com/AlejandroRM-DEV/leaflet-editable-hook#readme"
}
diff --git a/leaflet-editable-hook/src/hooks/README.md b/leaflet-editable-hook/src/hooks/README.md
deleted file mode 100644
index 8cc0f68..0000000
--- a/leaflet-editable-hook/src/hooks/README.md
+++ /dev/null
@@ -1,156 +0,0 @@
-# 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.
-
-## Demo
-https://leaflet-editable-hook.vercel.app/
-
-## Prerequisites
-- leaflet: "^1.9.4"
-- leaflet-editable: "^1.2.0"
-- react-leaflet: "^4.2.1"
-
-## 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() | | When you need to stop any ongoing drawing, without needing to know which editor is active. |
-| commitDrawing() | | When you need to commit any ongoing drawing, without needing to know which editor is active. |
-| 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. |
-| 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. |
-| 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. |
-| 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. |
-| 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. |
-
-
-| 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(<RulerMarker position={[position.lat, position.lng]} length={length} />);
- };
-
- 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(
- <RulerMarker
- position={[latlngs[latlngs.length - 1].lat, latlngs[latlngs.length - 1].lng]}
- length={length}
- />
- );
- };
-
- const { startPolyline } = useLeafletEditable({
- events: {
- onDrawingClicked,
- onVertexDrag,
- },
- });
-
- useEffect(() => {
- const polyline = startPolyline();
- return () => {
- map.removeLayer(polyline);
- };
- }, []);
-
- return ruler;
-}
-
-function RulerMarker({ position, length }) {
- return (
- <Marker
- position={position}
- icon={L.divIcon({
- html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="0%">
- <title>circle-small</title>
- <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" />
- </svg>`,
- className: 'marker-icon',
- iconSize: [24, 24],
- popupAnchor: [0, -12],
- })}
- >
- <Tooltip permanent offset={[10, 0]} direction="right">
- {length.toFixed(3)} KM
- </Tooltip>
- </Marker>
- );
-}
-
-export default Ruler;
-```
-
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/leaflet-editable-hook/src/hooks/index.js b/leaflet-editable-hook/src/hooks/index.js
deleted file mode 100644
index 553a43d..0000000
--- a/leaflet-editable-hook/src/hooks/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as useLeafletEditable } from './useLeafletEditable';
diff --git a/leaflet-editable-hook/src/hooks/package.json b/leaflet-editable-hook/src/hooks/package.json
deleted file mode 100644
index 8f986d6..0000000
--- a/leaflet-editable-hook/src/hooks/package.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "name": "leaflet-editable-hook",
- "version": "1.0.1",
- "description": "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.",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "peerDependencies": {
- "leaflet": "^1.9.4",
- "leaflet-editable": "^1.2.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "react-leaflet": "^4.2.1"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/AlejandroRM-DEV/leaflet-editable-hook.git"
- },
- "keywords": [
- "leaflet"
- ],
- "author": "Alejandro Ramírez Muñoz",
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/AlejandroRM-DEV/leaflet-editable-hook/issues"
- },
- "homepage": "https://github.com/AlejandroRM-DEV/leaflet-editable-hook#readme"
-}
diff --git a/leaflet-editable-hook/src/hooks/useLeafletEditable.js b/leaflet-editable-hook/useLeafletEditable.js
similarity index 100%
rename from leaflet-editable-hook/src/hooks/useLeafletEditable.js
rename to leaflet-editable-hook/useLeafletEditable.js