Leaflet
Leaflet.Editable
Make geometries editable in Leaflet.
This is not a plug and play UI, and will not be. This is a minimal, lightweight, and fully extendable API to control editing of geometries. So you can easily build your own UI with your own needs and choices.
See the demo UI, an more examples below. This is also the drawing engine behind uMap.
Design keys:
- only the core needs
- no UI, instead hooks everywhere needed
- everything programmatically controllable
- MultiPolygon/MultiPolyline support
- Polygons' holes support
- touch support
- tests
Install
You need Leaflet >= 1.0.0, and then include src/Leaflet.Editable.js.
Path dragging
If you want path dragging, you need to also include Path.Drag.js.
Quick start
Allow Leaflet.Editable in the map options:
var map = L.map('map', {editable: true});Then, to start editing an existing feature, call the enableEdit method on it:
var polyline = L.polyline([[43.1, 1.2], [43.2, 1.3],[43.3, 1.2]]).addTo(map);
polyline.enableEdit();If you want to draw a new line:
map.editTools.startPolyline(); // map.editTools has been created
// by passing editable: true option to the mapIf you want to continue an existing line:
polyline.editor.continueForward();
// or
polyline.editor.continueBackward();Examples
- Basic controls
- Continue line by ctrl/command-clicking on first/last point
- Create hole in a polygon by ctrl-clicking on it
- Change line colour on editing
- Display a tooltip near cursor while drawing
- Basic demo of undo/redo (Use ctrl-Z to undo and ctrl-shift-Z to redo)
- Deleting shapes by ctrl/command clicking on it
- Multipolygon example
- Example of Leaflet.Snap integration to enable snapping
API
Licence
Leaflet.Editable is released under the WTFPL licence.