-
Notifications
You must be signed in to change notification settings - Fork 995
API Reference
L.Control.Draw
L.Draw Handlers
L.Edit Handlers
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
These options make up the root object that is used when initialising the Leaflet.draw control. E.g.
var options = {
position: 'topleft',
draw: {
polyline: {
metric: true
},
polygon: {
allowIntersection: false,
showArea: true,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
}
},
circle: {
shapeOptions: {
color: '#662d91'
}
},
marker: false
},
edit: {
featureGroup: drawnItems,
remove: false
}
};
Option | Type | Default | Description |
---|---|---|---|
position | String | 'topleft' |
The initial position of the control (one of the map corners). See control positions. |
draw | DrawOptions | {} |
The options used to configure the draw toolbar. |
edit | EditOptions | false |
The options used to configure the edit toolbar. |
These options will allow you to configure the draw toolbar and its handlers.
Option | Type | Default | Description |
---|---|---|---|
polyline | PolylineOptions | { } |
Polyline draw handler options. Set to false to disable handler. |
polygon | PolygonOptions | { } |
Polygon draw handler options. Set to false to disable handler. |
rectangle | RectangleOptions | { } |
Rectangle draw handler options. Set to false to disable handler. |
circle | CircleOptions | { } |
Circle draw handler options. Set to false to disable handler. |
marker | MarkerOptions | { } |
Marker draw handler options. Set to false to disable handler. |
These options will allow you to configure the draw toolbar and its handlers.
Option | Type | Default | Description |
---|---|---|---|
featureGroup | Leaflet FeatureGroup | null |
This is the FeatureGroup that stores all editable shapes. THIS IS REQUIRED FOR THE EDIT TOOLBAR TO WORK |
edit | EditHandlerOptions | { } |
Edit handler options. Set to false to disable handler. |
remove | DeleteHandlerOptions | { } |
Delete handler options. Set to false to disable handler. |
Method | Returns | Description |
---|---|---|
remove |
- | Removes all draw and edit toolbars from the map. |
setDrawingOptions(<DrawOptions> options) |
- | Sets the options of the draw control. |
The following options will allow you to configure the individual draw handlers.
Polyline and Polygon drawing handlers take the same options.
Option | Type | Default | Description |
---|---|---|---|
allowIntersection | Bool | true |
Determines if line segments can cross. |
drawError | Object | See code | Configuration options for the error that displays if an intersection is detected. |
guidelineDistance | Number | 20 |
Distance in pixels between each guide dash. |
shapeOptions | Leaflet Polyline options | See code | The options used when drawing the polyline/polygon on the map. |
metric | Bool | true |
Determines which measurement system (metric or imperial) is used. |
zIndexOffset | Number | 2000 |
This should be a high number to ensure that you can draw over all other layers on the map. |
repeatMode | Bool | false |
Determines if the draw tool remains enabled after drawing a shape. |
Polygon options include all of the Polyline options plus the option to show the approximate area.
Option | Type | Default | Description |
---|---|---|---|
showArea | Bool | false |
Show the area of the drawn polygon in m², ha or km². The area is only approximate and become less accurate the larger the polygon is. |
Option | Type | Default | Description |
---|---|---|---|
shapeOptions | Leaflet Path options | See code | The options used when drawing the rectangle on the map. |
repeatMode | Bool | false |
Determines if the draw tool remains enabled after drawing a shape. |
Option | Type | Default | Description |
---|---|---|---|
shapeOptions | Leaflet Path options | See code | The options used when drawing the circle on the map. |
repeatMode | Bool | false |
Determines if the draw tool remains enabled after drawing a shape. |
Option | Type | Default | Description |
---|---|---|---|
icon | Leaflet Icon | L.Icon.Default() |
The icon displayed when drawing a marker. |
zIndexOffset | Number | 2000 |
This should be a high number to ensure that you can draw over all other layers on the map. |
repeatMode | Bool | false |
Determines if the draw tool remains enabled after drawing a shape. |
These options will allow you to configure the edit toolbar and its handlers.
Option | Type | Default | Description |
---|---|---|---|
selectedPathOptions | Leaflet Path options | See code | 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.
{
selectedPathOptions: {
maintainColor: true,
opacity: 0.3
}
}