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.

To add the draw toolbar set the option drawControl: true in the map options.

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', {drawControl: true}).setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

To use the edit toolbar you must initialise the Leaflet.draw control and manually add it to the map.

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

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

The key here is the featureGroup option. This tells the plugin which FeatureGroup contains the layers that should be editable.

Events

Once you have successfully added the Leaflet.draw plugin to your map you will want to respond to the different actions users can initiate. The following events will be triggered on the map:

draw:created

Property	Type	Description
layer	Polyline/Polygon/Rectangle/Circle/Marker	Layer that was just created.
layerType	String	The type of layer this is. One of: `polyline`, `polygon`, `rectangle`, `circle`, `marker`

Triggered when a new vector or marker has been created.

map.on('draw: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);
});

draw:edited

Property	Type	Description
layers	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.

map.on('draw:edited', function (e) {
	var layers = e.layers;
	layers.eachLayer(function (layer) {
		//do whatever you want, most likely save back to db
	});
});

draw:deleted

Triggered when layers have been removed (and saved) from the FeatureGroup.

Property	Type	Description
layers	LayerGroup	List of all layers just removed from the map.

draw:drawstart

Triggered when the user has chosen to draw a particular vector or marker.

Property	Type	Description
layerType	String	The type of layer this is. One of: `polyline`, `polygon`, `rectangle`, `circle`, `marker`

draw:drawstop

Triggered when the user has finished a particular vector or marker.

Property	Type	Description
layerType	String	The type of layer this is. One of: `polyline`, `polygon`, `rectangle`, `circle`, `marker`

draw:editstart

Triggered when the user starts edit mode by clicking the edit tool button.

Property	Type	Description
handler	String	The type of edit this is. One of: `edit`

draw:editstop

Triggered when the user has finshed editing (edit mode) and saves edits.

Property	Type	Description
handler	String	The type of edit this is. One of: `edit`

draw:deletestart

Triggered when the user starts remove mode by clicking the remove tool button.

Property	Type	Description
handler	String	The type of edit this is. One of: `remove`

draw:deletestop

Triggered when the user has finished removing shapes (remove mode) and saves.

Property	Type	Description
handler	String	The type of edit this is. One of: `remove`

## Advanced options

You can configure the plugin by using the different options listed here.

Control.Draw

These options make up the root object that is used when initialising the Leaflet.draw control.

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.

Draw handler options

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.

### 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.

#### 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.

#### DeleteHandlerOptions

Option	Type	Default	Description

#### Customizing language and text in Leaflet.draw

Leaflet.draw uses the L.drawLocal configuration object to set any text used in the plugin. Customizing this will allow support for changing the text or supporting another language.

See Leaflet.draw.js for the default strings.

E.g.

// Set the button title text for the polygon button
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';

// Set the tooltip start text for the rectangle
L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Not telling...';

## Common tasks

The following examples outline some common tasks.

Example Leaflet.draw config

The following example will show you how to:

Change the position of the control's toolbar.
Customize the styles of a vector layer.
Use a custom marker.
Disable the delete functionality.

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
	cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
	map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var MyCustomMarker = L.Icon.extend({
	options: {
		shadowUrl: null,
		iconAnchor: new L.Point(12, 12),
		iconSize: new L.Point(24, 24),
		iconUrl: 'link/to/image.png'
	}
});

var options = {
	position: 'topright',
	draw: {
		polyline: {
			shapeOptions: {
				color: '#f357a1',
				weight: 10
			}
		},
		polygon: {
			allowIntersection: false, // Restricts shapes to simple polygons
			drawError: {
				color: '#e1e100', // Color the shape will turn when intersects
				message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
			},
			shapeOptions: {
				color: '#bada55'
			}
		},
		circle: false, // Turns off this drawing tool
		rectangle: {
			shapeOptions: {
				clickable: false
			}
		},
		marker: {
			icon: new MyCustomMarker()
		}
	},
	edit: {
		featureGroup: editableLayers, //REQUIRED!!
		remove: false
	}
};

var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);

map.on('draw:created', function (e) {
	var type = e.layerType,
		layer = e.layer;

	if (type === 'marker') {
		layer.bindPopup('A popup!');
	}

	drawnItems.addLayer(layer);
});

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

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

Changing a drawing handlers options

You can change a draw handlers options after initialisation by using the setDrawingOptions method on the Leaflet.draw control.

E.g. to change the colour of the rectangle:

drawControl.setDrawingOptions({
    rectangle: {
    	shapeOptions: {
        	color: '#0000FF'
        }
    }
});

Creating a custom build

If you only require certain handlers (and not the UI), you may wish to create a custom build. You can generate the relevant jake command using the build html file.

See edit handlers example which uses only the edit handlers.

## Thanks

Thanks so much to @brunob, @tnightingale, and @shramov. I got a lot of ideas from their Leaflet plugins.

All the contributors and issue reporters of this plugin rock. Thanks for tidying up my mess and keeping the plugin on track.

The icons used for some of the toolbar buttons are either from http://glyphicons.com/ or inspired by them. <3 Glyphicons!

Finally, @mourner is the man! Thanks for dedicating so much of your time to create the gosh darn best JavaScript mapping library around.

0.2.3 (January 14, 2014)

Improvements

Restrict editing polygons so that at least 3 points are present. (by @Zverik). #200
Tooltips initially start hidden until the mouse has been moved. (by @Zverik). #210
Fixup spelling errors. (by @nexushoratio). #223
Combine ie specific style within leaflet.draw.css stylesheet. (by @frankrowe). #221
Improve my terrible engrish. (by @erictheise). #237
Fire editstart events when a poly or simple shape is initially edited. (by @atombender). #245
Add ability to add a new vertex to a polyline or polygon hander.
Added ability to remove/undo the last placed point for polyline or polygons. (by @Zverik). #242
Dynamically position the action toolbars. (by @DevinClark). #240
Improve polyline/polygon drawing by accepting some motion on click. (by @atombender). #249
Only draw a limited number of guide dashes to improve performance in some rare cases. #254

Bugfixes

Fix edit toolbar so diabled state is represented correctly. (by @joeybaker). #203
Fixed path middle marker positions. (by @Zverik). #208
Fix issue where toolbar buttons would have focus after clicked so couldn't use escape to cancel until clicked map at least once.
Fix toolbar icons for retina displays. (by @dwnoble). #217
Ensure that options are not shared between draw handler classes. (by @yohanboniface). #219
Fix bug where multiple handlers could be active. (by @manubb). #247

Keywords

FAQs

What is leaflet-draw?

Is leaflet-draw popular?

Is leaflet-draw well maintained?

Package last updated on 29 Mar 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

leaflet-draw

Important

Upgrading from Leaflet.draw 0.1

Table of Contents

Events

draw:created

draw:edited

draw:deleted

draw:drawstart

draw:drawstop

draw:editstart

draw:editstop

draw:deletestart

draw:deletestop

Control.Draw

Draw handler options

Example Leaflet.draw config

Changing a drawing handlers options

Creating a custom build

0.2.3 (January 14, 2014)

Improvements

Bugfixes

Keywords

Related posts

leaflet-draw

Important

Upgrading from Leaflet.draw 0.1

Table of Contents

Adding the edit toolbar

Events

draw:created

draw:edited

draw:deleted

draw:drawstart

draw:drawstop

draw:editstart

draw:editstop

draw:deletestart

draw:deletestop

Control.Draw

Draw handler options

Example Leaflet.draw config

Disabling a toolbar

Disabling a toolbar item

Changing a drawing handlers options

Creating a custom build

0.2.3 (January 14, 2014)

Improvements

Bugfixes

Keywords

Related posts

PyPI Introduces Digital Attestations to Strengthen Python Package Security

GitHub Removes Malicious Pull Requests Targeting Open Source Repositories