Skip to content
Paolo Messina edited this page Sep 10, 2020 · 2 revisions

Table of Contents

L.Control.Draw
L.Draw Handlers
L.Edit Handlers

L.Control.Draw

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

Options

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.

DrawOptions

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.

EditOptions

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.

Methods

Method Returns Description
remove - Removes all draw and edit toolbars from the map.
setDrawingOptions(<DrawOptions> options) - Sets the options of the draw control.

L.Draw Handlers

The following options will allow you to configure the individual draw handlers.

PolylineOptions

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.

PolygonOptions

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.

RectangleOptions

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.

CircleOptions

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.

MarkerOptions

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.

L.Edit Handlers

These options will allow you to configure the edit toolbar and its handlers.

EditHandlerOptions

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
	}
}