{"id":16401677,"url":"https://github.com/alejandrorm-dev/leaflet-editable-hook","last_synced_at":"2025-10-26T16:31:03.131Z","repository":{"id":225537743,"uuid":"766188561","full_name":"AlejandroRM-DEV/leaflet-editable-hook","owner":"AlejandroRM-DEV","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.","archived":false,"fork":false,"pushed_at":"2024-05-24T19:32:25.000Z","size":185,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-30T05:34:35.563Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://leaflet-editable-hook.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlejandroRM-DEV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-02T15:24:56.000Z","updated_at":"2024-05-23T02:15:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"23529d58-eb27-4435-a5eb-3ef8fa325aac","html_url":"https://github.com/AlejandroRM-DEV/leaflet-editable-hook","commit_stats":null,"previous_names":["alejandrorm-dev/leaflet-editable-hook"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2Fleaflet-editable-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2Fleaflet-editable-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2Fleaflet-editable-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2Fleaflet-editable-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlejandroRM-DEV","download_url":"https://codeload.github.com/AlejandroRM-DEV/leaflet-editable-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238366829,"owners_count":19460193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T05:43:52.938Z","updated_at":"2025-10-26T16:31:03.125Z","avatar_url":"https://github.com/AlejandroRM-DEV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet Editable Hook\n\n[![npm version](https://img.shields.io/npm/v/leaflet-editable-hook.svg?style=flat-square)](https://www.npmjs.com/package/leaflet-editable-hook)\n[![npm downloads](https://img.shields.io/npm/dm/leaflet-editable-hook.svg?style=flat-square)](https://www.npmjs.com/package/leaflet-editable-hook)\n[![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)\n[![MIT License](https://img.shields.io/npm/l/leaflet-editable-hook.svg?style=flat-square)](LICENSE)\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\nThe purpose of this hook is to provide functionality for editing features on the map, such as drawing polylines, polygons, markers, rectangles, circles, and more.\n\n## Demo\n\nhttps://leaflet-editable-hook.vercel.app/\n\n## Prerequisites\n\n- leaflet: \"^1.9.4\"\n- leaflet-editable: \"^1.2.0\"\n- react: \"^19.0.0\"\n- react-dom: \"^19.0.0\"\n- react-leaflet: \"^5.0.0\"\n\n## Installation\n\nInstall with npm\n\n```bash\n  npm i leaflet-editable-hook\n```\n\n## Documentation\n\n[See full documentation about Leaflet.Editable](https://leaflet.github.io/Leaflet.Editable/doc/api.html)\n\n| Hook returned methods                             | Returns     | Description                                                                                                                                                                                                                                                         |\n| ------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| drawing()                                         | boolean     | Return true if any drawing action is ongoing.                                                                                                                                                                                                                       |\n| stopDrawing()                                     | void        | When you need to stop any ongoing drawing, without needing to know which editor is active.                                                                                                                                                                          |\n| commitDrawing()                                   | void        | When you need to commit any ongoing drawing, without needing to know which editor is active.                                                                                                                                                                        |\n| startPolyline(\u003cL.LatLng\u003e latlng, \u003chash\u003e 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.                                                                         |\n| startPolygon(\u003cL.LatLng\u003e latlng, \u003chash\u003e 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.                                                                           |\n| startMarker(\u003cL.LatLng\u003e latlng, \u003chash\u003e 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. |\n| startRectangle(\u003cL.LatLng\u003e latlng, \u003chash\u003e 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.                                                                 |\n| startCircle(\u003cL.LatLng\u003e latlng, \u003chash\u003e 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.                                                                          |\n| enableEdit(feature: L.Layer)                      | void        | Enable editing, by creating an editor if not existing, and then calling enable on it.                                                                                                                                                                               |\n| disableEdit(feature: L.Layer)                     | void        | Disable editing, also remove the editor property reference.                                                                                                                                                                                                         |\n\n| Events                  |\n| ----------------------- |\n| onCreated               |\n| onEnable                |\n| onDisable               |\n| onEditing               |\n| onDragStart             |\n| onDrag                  |\n| onDragEnd               |\n| onDrawingStart          |\n| onDrawingEnd            |\n| onDrawingCancel         |\n| onDrawingCommit         |\n| onDrawingMousedown      |\n| onDrawingMouseup        |\n| onDrawingClick          |\n| onDrawingMove           |\n| onDrawingClicked        |\n| onVertexNew             |\n| onVertexClick           |\n| onVertexClicked         |\n| onVertexRawclick        |\n| onVertexDeleted         |\n| onVertexCtrlclick       |\n| onVertexShiftclick      |\n| onVertexMetakeyclick    |\n| onVertexAltclick        |\n| onVertexContextmenu     |\n| onVertexMousedown       |\n| onVertexDrag            |\n| onVertexDragstart       |\n| onVertexDragend         |\n| onMiddlemarkerMousedown |\n| onShapeNew              |\n| onShapeDelete           |\n| onShapeDeleted          |\n\n## Usage/Examples\n\n```javascript\nimport { useMap, Marker, Tooltip } from \"react-leaflet\";\nimport { useState, useEffect } from \"react\";\nimport * as turf from \"@turf/turf\";\nimport { useLeafletEditable } from \"leaflet-editable-hook\";\n\nfunction Ruler() {\n\tconst map = useMap();\n\tconst [ruler, setRuler] = useState(null);\n\n\tconst onDrawingClicked = (e) =\u003e {\n\t\tconst position = e.latlng;\n\t\tconst latlngs = e.layer._latlngs;\n\t\tlet length = 0;\n\t\tif (latlngs.length \u003e 1) {\n\t\t\tconst line = turf.lineString([\n\t\t\t\t...latlngs.map((item) =\u003e [item.lng, item.lat]),\n\t\t\t]);\n\t\t\tlength = turf.length(line, { units: \"kilometers\" });\n\t\t}\n\t\tsetRuler(\n\t\t\t\u003cRulerMarker position={[position.lat, position.lng]} length={length} /\u003e\n\t\t);\n\t};\n\n\tconst onVertexDrag = (e) =\u003e {\n\t\tconst latlngs = e.layer._latlngs;\n\t\tlet length = 0;\n\t\tif (latlngs.length \u003e 1) {\n\t\t\tconst line = turf.lineString([\n\t\t\t\t...latlngs.map((item) =\u003e [item.lng, item.lat]),\n\t\t\t]);\n\t\t\tlength = turf.length(line, { units: \"kilometers\" });\n\t\t}\n\t\tsetRuler(\n\t\t\t\u003cRulerMarker\n\t\t\t\tposition={[\n\t\t\t\t\tlatlngs[latlngs.length - 1].lat,\n\t\t\t\t\tlatlngs[latlngs.length - 1].lng,\n\t\t\t\t]}\n\t\t\t\tlength={length}\n\t\t\t/\u003e\n\t\t);\n\t};\n\n\tconst { startPolyline } = useLeafletEditable({\n\t\tevents: {\n\t\t\tonDrawingClicked,\n\t\t\tonVertexDrag,\n\t\t},\n\t});\n\n\tuseEffect(() =\u003e {\n\t\tconst polyline = startPolyline();\n\t\treturn () =\u003e {\n\t\t\tmap.removeLayer(polyline);\n\t\t};\n\t}, []);\n\n\treturn ruler;\n}\n\nfunction RulerMarker({ position, length }) {\n\treturn (\n\t\t\u003cMarker\n\t\t\tposition={position}\n\t\t\ticon={L.divIcon({\n\t\t\t\thtml: `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill-opacity=\"0%\"\u003e\n            \u003ctitle\u003ecircle-small\u003c/title\u003e\n            \u003cpath 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\" /\u003e\n            \u003c/svg\u003e`,\n\t\t\t\tclassName: \"marker-icon\",\n\t\t\t\ticonSize: [24, 24],\n\t\t\t\tpopupAnchor: [0, -12],\n\t\t\t})}\n\t\t\u003e\n\t\t\t\u003cTooltip permanent offset={[10, 0]} direction=\"right\"\u003e\n\t\t\t\t{length.toFixed(3)} KM\n\t\t\t\u003c/Tooltip\u003e\n\t\t\u003c/Marker\u003e\n\t);\n}\n\nexport default Ruler;\n```\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/charlieforward9\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/62311337?v=4?s=100\" width=\"100px;\" alt=\"Charles Richardson\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCharles Richardson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/AlejandroRM-DEV/leaflet-editable-hook/commits?author=charlieforward9\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/saiNaruUFL\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/110858892?v=4?s=100\" width=\"100px;\" alt=\"saiNaruUFL\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esaiNaruUFL\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/AlejandroRM-DEV/leaflet-editable-hook/commits?author=saiNaruUFL\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/AlejandroRM-DEV\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8054357?v=4?s=100\" width=\"100px;\" alt=\"Alejandro Ramírez Muñoz\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlejandro Ramírez Muñoz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/AlejandroRM-DEV/leaflet-editable-hook/commits?author=AlejandroRM-DEV\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falejandrorm-dev%2Fleaflet-editable-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falejandrorm-dev%2Fleaflet-editable-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falejandrorm-dev%2Fleaflet-editable-hook/lists"}