bily / leaflet.editable Goto Github PK

# Leaflet.Editable

Make geometries editable in Leaflet.

WARNING: the gh-pages branch needs latest Leaflet master (future 1.0). To use the stable Leaflet release, please use the leaflet0.7 branch.

This is not a plug and play UI, and will not. 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 programatically controlable
• MultiPolygon/MultiPolyline support
• Polygons' holes support
• touch support
• tests

## Install

You need Leaflet >= 0.7.3, and then include src/Leaflet.Editable.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 map

If 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

Leaflet.Editable is made to be fully extendable. You have three ways to customize the behaviour: using options, listening to events, or extending.

### L.Map

Leaflet.Editable add options and events to the L.Map object.

#### Options

Note on cancellable events: those event have attached a cancel method, calling this method (eg. e.cancel()) will cancel any subsequent action.

You will usually have only one instance of L.Editable, and generally the one created automatically at map init: map.editTools. It's the toolbox you will use to create new features, and also the object you will configure with options. Let's see them.

Note: you can pass them when creating a map using the editOptions key.

Those are the public methods. You will generally access them by the map.editTools instance:

map.editTools.startPolyline();

Same as L.Map.

The marker used to handle path vertex. You will usually interact with a VertexMarker instance when listening for events like editable:vertex:ctrlclick.

Those are its public methods.

When editing a feature (marker, polyline…), an editor is attached to it. This editor basically knows how to handle the edition.

It has some public methods:

Inherit from L.Editable.BaseEditor.

Inherit from L.Editable.BaseEditor.

Inherited by L.Editable.PolylineEditor and L.Editable.PolygonEditor.

Interesting new method:

### L.Editable.PolylineEditor

Inherit from L.Editable.PathEditor.

Useful specific methods:

### L.Editable.PolygonEditor

Inherit from L.Editable.PathEditor.

### L.Editable.RectangleEditor

Inherit from L.Editable.PathEditor.

### L.Editable.CircleEditor

Inherit from L.Editable.PathEditor.

EditableMixin is included to L.Polyline, L.Polygon and L.Marker. It adds the following methods to them.

When editing is enabled, the editor is accessible on the instance with the editor property.

#### Methods

Some events are also fired on the feature itself.

## Licence

Leaflet.Editable is released under the WTFPL licence.