Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Leaflet/Leaflet.draw
Vector drawing and editing plugin for Leaflet
https://github.com/Leaflet/Leaflet.draw
Last synced: 16 days ago
JSON representation
Vector drawing and editing plugin for Leaflet
- Host: GitHub
- URL: https://github.com/Leaflet/Leaflet.draw
- Owner: Leaflet
- License: mit
- Created: 2012-06-05T04:57:52.000Z (over 12 years ago)
- Default Branch: develop
- Last Pushed: 2024-07-09T08:31:17.000Z (4 months ago)
- Last Synced: 2024-10-15T10:06:22.755Z (28 days ago)
- Language: JavaScript
- Homepage: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
- Size: 13.1 MB
- Stars: 1,968
- Watchers: 102
- Forks: 992
- Open Issues: 465
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: MIT-LICENSE.md
Awesome Lists containing this project
README
[](https://badge.fury.io/gh/Leaflet%2Fleaflet.draw)
[](https://badge.fury.io/js/leaflet-draw)
[](https://www.npmjs.com/package/leaflet-draw)
[](https://badge.fury.io/bo/leaflet.draw)
[](https://travis-ci.org/Leaflet/Leaflet.draw)
[](https://gitter.im/Leaflet/Leaflet.draw?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://github.com/Leaflet/Leaflet.draw/issues)
[](https://github.com/Leaflet/Leaflet.draw/network)
[](https://github.com/Leaflet/Leaflet.draw/stargazers)
[](https://raw.githubusercontent.com/Leaflet/Leaflet.draw/master/MIT-LICENSE.md)
# Leaflet.draw
Adds support for drawing and editing vectors and markers on [Leaflet maps](https://github.com/Leaflet/Leaflet).
Supports [Leaflet](https://github.com/Leaflet/Leaflet/releases) 0.7.x and 1.0.0+ branches.
Please check out our [Api Documentation](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html)
#### Upgrading from Leaflet.draw 0.1
Leaflet.draw 0.2.0 changes a LOT of things from 0.1. Please see [BREAKING CHANGES](https://github.com/Leaflet/Leaflet.draw/blob/master/BREAKINGCHANGES.md) for how to upgrade.
## In this readme
- [Customizing Language](#customizing-language-and-text-in-leafletdraw)
- [Common tasks](#common-tasks)
- [Contributing](#contributing)
- [Thanks](#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](https://github.com/Leaflet/Leaflet.draw/blob/master/src/Leaflet.draw.js) for the default strings.
E.g.
```js
// 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.
```js
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: 'Oh snap! 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:
```js
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](https://github.com/brunob), [@tnightingale](https://github.com/tnightingale), and [@shramov](https://github.com/shramov). I got a lot of ideas from their Leaflet plugins.
All the [contributors](https://github.com/Leaflet/Leaflet.draw/graphs/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](https://github.com/mourner) is the man! Thanks for dedicating so much of your time to create the gosh darn best JavaScript mapping library around.