Vector drawing plugin for Leaflet
Pull request Compare This branch is 2 commits ahead, 778 commits behind Leaflet:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Adds support for drawing polys to Leaflet.

Check out the demo

This plugin was inspired by @brunob's draw plugin. I decided to create a new repo rather than forking as I wanted to take the coding style and functionality in a different direction.

Using the plugin

If you are happy with the control being displayed below the zoom controls just set drawControl = true when declaring your Leaflet map.


var cloudmadeUrl = 'http://{s}{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, drawControl: true });

If you would like to reposition the control, turn off a type or customize the styles then add the control manually:

var drawControl = new L.Control.Draw({
    position: 'topright',
    polyline: false

See example/map-polydraw.html for a working example.

Customize shape styles

L.Control.Draw can take an options object. You can customize the look and behaviour like so:

var options = {
    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

The shape styles are the leaflet Path and Polyline options.

Custom marker

To use a different image as the marker, simple override the icon option of option.marker:

// Declare a new Leaflet Icon
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'

// Pass this new icon in using options.marker
var drawControl = new L.Control.Draw({
    marker: {
        icon: new MyCustomMarker()