## Using the plugin
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.
Too add the draw toolbar set the option drawControl: true
in the map options.
var map = L.map('map', {drawControl: true}).setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Adding the edit toolbar
To use the edit toolbar you must initialise the Leaflet.draw control and manually add it to the map.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
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
that contains the layers that should be editable.
Events
Once you have successfully added the Leaflet.draw plugin your map you will want to respond to the different actions users can do. The following events will be triggered on the map:
draw:created
Triggered when a new vector or marker has been created.
Triggered when layers in the FeatureGroup, that the plugin was initialized with, have been edited and saved.
Triggered when layers have been layers have been removed (and saved) from the FeatureGroup.
Triggered when the user has chosen to draw a particular vector or marker.
Triggered when the user has finshed a particular vector or marker.
The following options will allow you to configure the individual draw handlers.
## 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: {
title: 'Draw a kick ass polyline!'
shapeOptions: {
color: '#f357a1',
weight: 10
}
},
polygon: {
allowIntersection: false,
drawError: {
color: '#e1e100, // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!'
},
shapeOptions: {
color: '#bada55'
}
},
circle: false,
rectangle: {
shapeOptions: {
clickable: false
}
},
marker: {
icon: new MyCustomMarker()
}
},
edit: {
featureGroup: editableLayers,
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);
});
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
}
});
Changing a drawing handlers options
You can change a draw handlers options after initialization by using the setDrawingOptions
method on the Leaflet.draw control.
E.g. to change the colour of the rectangle:
drawControl.setDrawingOptions(
rectangle: {
color: '#0000FF'
}
);