Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Vector drawing plugin for Leaflet
Branch: master
Pull request Compare This branch is 625 commits behind Leaflet:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
example
images
lib/leaflet
.gitattributes
.gitignore
Control.Draw.css
Control.Draw.js
Handler.Draw.js
Marker.Draw.js
Polygon.Draw.js
Polyline.Draw.js
README.md
Rectangle.Draw.js

README.md

Leaflet.draw

Adds support for drawing polys to Leaflet.

This plugin is based on @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.

E.g.:

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, drawControl: true });

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

var drawControl = new L.Control.Draw({
    position: 'topright',
    drawPolyline: false
});
map.addControl(drawControl);

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

Customize shape styles

L.Control.Draw can take an options object. You can specify a styles property like so:

var options = {
    styles: {
        polyine: {
            color: '#f357a1',
            width: 10
        },
        polygon: {
            color: '#bada55'
        },
        rectangle: {
            clickable: false
        }
    }
}

The shape styles are the leaflet Path and Polyline options.

Official support

Leaflet plan to include drawing in 0.4 so this is just a band-aid until it comes. See https://github.com/CloudMade/Leaflet/issues/174

Something went wrong with that request. Please try again.