leaflet-draw

What is leaflet-draw?

The leaflet-draw npm package is an extension for the Leaflet library that adds support for drawing and editing vectors and markers on a map. It provides a user-friendly interface for creating, editing, and deleting various shapes such as polygons, polylines, rectangles, circles, and markers.

What are leaflet-draw's main functionalities?

Drawing Polygons

This feature allows users to draw polygons on the map. The code sample initializes a Leaflet map, adds a tile layer, and sets up the drawing control to enable polygon drawing. When a polygon is created, it is added to the drawn items layer.

L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a polygon';
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  },
  draw: {
    polygon: true
  }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  drawnItems.addLayer(layer);
});

Drawing Polylines

This feature allows users to draw polylines on the map. The code sample initializes a Leaflet map, adds a tile layer, and sets up the drawing control to enable polyline drawing. When a polyline is created, it is added to the drawn items layer.

L.drawLocal.draw.toolbar.buttons.polyline = 'Draw a polyline';
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  },
  draw: {
    polyline: true
  }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  drawnItems.addLayer(layer);
});

Drawing Rectangles

This feature allows users to draw rectangles on the map. The code sample initializes a Leaflet map, adds a tile layer, and sets up the drawing control to enable rectangle drawing. When a rectangle is created, it is added to the drawn items layer.

L.drawLocal.draw.toolbar.buttons.rectangle = 'Draw a rectangle';
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  },
  draw: {
    rectangle: true
  }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  drawnItems.addLayer(layer);
});

Drawing Circles

This feature allows users to draw circles on the map. The code sample initializes a Leaflet map, adds a tile layer, and sets up the drawing control to enable circle drawing. When a circle is created, it is added to the drawn items layer.

L.drawLocal.draw.toolbar.buttons.circle = 'Draw a circle';
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  },
  draw: {
    circle: true
  }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  drawnItems.addLayer(layer);
});

Drawing Markers

This feature allows users to place markers on the map. The code sample initializes a Leaflet map, adds a tile layer, and sets up the drawing control to enable marker placement. When a marker is created, it is added to the drawn items layer.

L.drawLocal.draw.toolbar.buttons.marker = 'Draw a marker';
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  },
  draw: {
    marker: true
  }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  drawnItems.addLayer(layer);
});

Other packages similar to leaflet-draw

leaflet.pm

Leaflet.pm is a popular Leaflet plugin that provides similar functionalities to leaflet-draw, including drawing, editing, and deleting shapes on a map. It offers a more modern and actively maintained alternative with additional features like snapping, cutting, and rotating shapes.

leaflet-path-drag

Leaflet-Path-Drag is a Leaflet plugin that allows users to drag and edit polylines and polygons on a map. While it does not provide the full range of drawing tools available in leaflet-draw, it is useful for applications that require simple shape editing capabilities.

README

Leaflet.draw

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
• Common tasks
• Contributing
• Thanks

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:

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

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

Contributing

Testing

To test you can install the npm dependencies:

npm install

and then use:

jake test

Documentation

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

Thanks

Touch friendly version of Leaflet.draw was created by Michael Guild (https://github.com/michaelguild13).

The touch support was initiated due to a demand for it at National Geographic for their Map Maker Projected (http://mapmaker.education.nationalgeographic.com/) that was created by Michael Guild and Daniel Schep (https://github.com/dschep)

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.