Skip to content
Vector drawing and editing plugin for Leaflet
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
build [docs] Move showRadius property from RectangleOptions to CircleOptions. Mar 31, 2018
spec refs #714. L.CircleMarker can be edited and drawed for leaflet 1.0.3 Jul 13, 2017
src Merge pull request #856 from octavm/patch-1 Aug 10, 2018
.codeclimate.yml Update .codeclimate.yml Jan 18, 2017
.editorconfig Added .editorconfig file for auto editor configuration. Jan 17, 2017
.eslintrc Rewriting documentation using Leafdoc, introducing Leaflet' build pro… Nov 5, 2016
.gitignore Partial for #603 Nov 30, 2016
.travis.yml Updating travis to test many versions Nov 6, 2016 Tweaking examples, karma specs, reordering builds since jake also bui… Nov 6, 2016 Version 0.4.10 to limit support to leaflet 1.0.x Jul 3, 2017 Rewriting documentation using Leafdoc, introducing Leaflet' build pro… Nov 5, 2016
Jakefile.js Tweaking examples, karma specs, reordering builds since jake also bui… Nov 6, 2016
Leaflet.draw.iml Ensure that the click event isn't double handled by setting and clear… Nov 30, 2016 Fix relative links Oct 13, 2017
index.html Rewriting documentation using Leafdoc, introducing Leaflet' build pro… Nov 5, 2016
package-lock.json 1.0.3 Sep 13, 2018
package.json 1.0.3 Sep 13, 2018

GitHub version npm version NPM Downloads Bower version Build Status Leaflet.draw Chat GitHub issues GitHub forks GitHub stars GitHub license


Adds support for drawing and editing vectors and markers on Leaflet maps.

Supports Leaflet 0.7.x and 1.0.0+ branches.

Please check out our Api Documentation

Upgrading from Leaflet.draw 0.1

Leaflet.draw 0.2.0 changes a LOT of things from 0.1. Please see BREAKING CHANGES for how to upgrade.

In this readme

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.


    // 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:

  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.
    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 });
    var editableLayers = new L.FeatureGroup();
    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.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            layer.bindPopup('A popup!');

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:

    rectangle: {
    	shapeOptions: {
        	color: '#0000FF'



To test you can install the npm dependencies:

npm install

and then use:

jake test


Documentation is build with Leafdoc, to generate the documentation use

jake docs

and the generated html documentation is saved to ./docs/leaflet-draw-latest.html


Touch friendly version of Leaflet.draw was created by Michael Guild (

The touch support was initiated due to a demand for it at National Geographic for their Map Maker Projected ( that was created by Michael Guild and Daniel Schep (

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

You can’t perform that action at this time.