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.

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

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

Adding the edit toolbar

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

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

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

nitialize the FeatureGroup to store editable layers
drawnItems = new L.FeatureGroup();
addLayer(drawnItems);

nitialize the draw control and pass it the FeatureGroup of editable layers
drawControl = new L.Control.Draw({
edit: {
    featureGroup: drawnItems
}

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:

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 initializing the Leaflet.draw control.

DrawOptions

These options will allow you to configure the draw toolbar and it's handlers.

Polyline and Polygon drawing handlers take the same options.

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.

EditOptions

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

| Option | Type | Default | Description | — | — | — | —

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.

Common tasks

The following examples outline some common tasks.

Example Leaflet.draw config

The following example will show you how to:

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

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

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

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


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
}


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

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.

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.

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:

Control.setDrawingOptions({
rectangle: {
    shapeOptions: {
        color: '#0000FF'
    }
}

Creating a custom build

Thanks