This documentation is has been transcribed from the original README.MD to jsdoc's or natural docs style for
use with Leafdoc. If you identify a typo or have a
suggestion for this documentation, please feel free toedit the js comment blocks in the src directory,
build with 'jake docs' and submit a pull request.
The key here is the featureGroup option. This tells the plugin which FeatureGroup contains the layers that
should be editable. The featureGroup can contain 0 or more features with geometry types Point, LineString, and Polygon.
Leaflet.draw does not work with multigeometry features such as MultiPoint, MultiLineString, MultiPolygon,
or GeometryCollection. If you need to add multigeometry features to the draw plugin, convert them to a
FeatureCollection of non-multigeometries (Points, LineStrings, or Polygons).
L.drawLocal
The core toolbar class of the API — it is used to create the toolbar ui
Usage example
var modifiedDraw = L.drawLocal.extend({
draw: {
toolbar: {
buttons: {
polygon: 'Draw an awesome polygon'
}
}
}
});
The default state for the control is the draw toolbar just below the zoom control.
This will allow map users to draw vectors and markers.
Please note the edit toolbar is not enabled by default.
L.Draw.Toolbar
The toolbar class of the API — it is used to create the ui
This will be depreciated
Usage example
var toolbar = L.Toolbar();
toolbar.addToolbar(map);
Disabling a toolbar
If you do not want a particular toolbar in your app you can turn it off by setting the toolbar to false.
var drawControl = new L.Control.Draw({
draw: false,
edit: {
featureGroup: editableLayers
}
});
Disabling a toolbar item
If you want to turn off a particular toolbar item, set it to false. The following disables drawing polygons and
markers. It also turns off the ability to edit layers.
var drawControl = new L.Control.Draw({
draw: {
polygon: false,
marker: false
},
edit: {
featureGroup: editableLayers,
edit: false
}
});
Methods
Methods for modifying the toolbar
Method
Returns
Description
initialize(options)
void
Toolbar constructor
enabled()
boolean
Gets a true/false of whether the toolbar is enabled
disable()
void
Disables the toolbar
addToolbar(map)
L.DomUtil
Adds the toolbar to the map and returns the toolbar dom element
removeToolbar()
void
Removes the toolbar and drops the handler event listeners
L.Draw.Event
Use L.Draw.Event.EVENTNAME constants to ensure events are correct.
Usage example
map.on(L.Draw.Event.CREATED; function (e) {
var type = e.layerType;
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
}
// Do whatever else you need to. (save to db; add to map etc)
map.addLayer(layer);
});
map.on('draw:edited'; function (e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
//do whatever you want; most likely save back to db
});
});
Events
Event
Data
Description
draw:created
PolyLine
Polygon; Rectangle; Circle; Marker | String
Layer that was just created.
The type of layer this is. One of: polyline; polygon; rectangle; circle; marker
Triggered when a new vector or marker has been created.
draw:edited
LayerGroup
List of all layers just edited on the map.
Triggered when layers in the FeatureGroup; initialised with the plugin; have been edited and saved.
draw:deleted
LayerGroup
List of all layers just removed from the map.
Triggered when layers have been removed (and saved) from the FeatureGroup.
draw:drawstart
String
The type of layer this is. One of:polyline; polygon; rectangle; circle; marker
Triggered when the user has chosen to draw a particular vector or marker.
draw:drawstop
String
The type of layer this is. One of: polyline; polygon; rectangle; circle; marker
Triggered when the user has finished a particular vector or marker.
draw:drawvertex
LayerGroup
List of all layers just being added from the map.
Triggered when a vertex is created on a polyline or polygon.
draw:editstart
String
The type of edit this is. One of: edit
Triggered when the user starts edit mode by clicking the edit tool button.
draw:editmove
ILayer
Layer that was just moved.
Triggered as the user moves a rectangle; circle or marker.
draw:editresize
ILayer
Layer that was just moved.
Triggered as the user resizes a rectangle or circle.
draw:editvertex
LayerGroup
List of all layers just being edited from the map.
Triggered when a vertex is edited on a polyline or polygon.
draw:editstop
String
The type of edit this is. One of: edit
Triggered when the user has finshed editing (edit mode) and saves edits.
draw:deletestart
String
The type of edit this is. One of: remove
Triggered when the user starts remove mode by clicking the remove tool button.
draw:deletestop
String
The type of edit this is. One of: remove
Triggered when the user has finished removing shapes (remove mode) and saves.
Checks a polygon for any intersecting line segments. Ignores holes.
L.Polyline
Methods
Method
Returns
Description
intersects()
void
Check to see if this polyline has any linesegments that intersect.
NOTE: does not support detecting intersection for degenerate cases.
newLatLngIntersects()
void
Check for intersection if new latlng was added to this polyline.
NOTE: does not support detecting intersection for degenerate cases.
newPointIntersects()
void
Check for intersection if new point was added to this polyline.
newPoint must be a layer point.
NOTE: does not support detecting intersection for degenerate cases.
L.Map.TouchExtend
Methods
Method
Returns
Description
initialize()
void
Sets TouchExtend private accessor variables
addHooks()
void
Adds dom listener events to the map container
removeHooks()
void
Removes dom listener events from the map container
L.Control.Draw
Methods
Method
Returns
Description
initialize()
void
Initializes draw control, toolbars from the options
onAdd()
container
Adds the toolbar container to the map
onRemove()
void
Removes the toolbars from the map toolbar container
setDrawingOptions(options)
void
Sets options to all toolbar instances
L.Draw.Tooltip
The tooltip class — it is used to display the tooltip while drawing
This will be depreciated
Usage example
var tooltip = L.Draw.Tooltip();
Methods
Methods for modifying draw state
Method
Returns
Description
initialize(map)
void
Tooltip constructor
dispose()
void
Remove Tooltip DOM and unbind events
updateContent(labelText)
this
Changes the tooltip text to string in function call
updatePosition(latlng)
this
Changes the location of the tooltip
showAsError()
this
Applies error class to tooltip
removeError()
this
Removes the error class from the tooltip
L.DrawToolbar
Methods
Method
Returns
Description
initialize()
void
getModeHandlers()
void
getActions()
void
setOptions()
void
L.EditToolbar
Methods
Method
Returns
Description
intialize()
void
getModeHandlers()
void
getActions()
void
addToolbar()
void
removeToolbar()
void
disable()
void
L.Edit.PolyVerticesEdit
Methods
Method
Returns
Description
intialize()
void
addHooks()
void
removeHooks()
void
updateMarkers()
void
L.Marker.Touch
This isn't full Touch support. This is just to get makers to also support dom touch events after creation
#TODO: find a better way of getting markers to support touch.
Install
You have four methods of installing Leaflet.Draw, copy the leaflet.draw.js, css, and images from dist and embed directly
into your application.
npm
To install the plugin run npm install leaflet-draw via command line in your project.
You must also require this in your project like so: var leafletDraw = require('leaflet-draw');
bower
To install the plugin run bower install leaflet-draw.
Builder
There is a custom builder at ../build/build.html to help make a custom package of Leaflet.Draw
with the command line.
You can configure the plugin by using the different options listed here. If you identify a typo or have a suggestion
for this section of the documentation, please edit docs-misc.leafdoc in the build directory.
Control.Draw
Option
Type
Default
Description
position
String
'topleft'
The initial position of the control (one of the map corners). See control positions.
The path options for how the layers will look while in edit mode. If this is set to null the editable path options will not be set.
Note: To maintain the original layer color of the layer use maintainColor: true within selectedPathOptions.
E.g. The edit options below will maintain the layer color and set the edit opacity to 0.3.