Miscellaneous bits of documentation that don't really fit anywhere else
@namespace Install
You have four methods of installing Leaflet.Draw, copy the leaflet.draw.js, css, and images from dist and embed directly
into your application.
### npm
To install the plugin run `npm install leaflet-draw` via command line in your project.
You must also require this in your project like so: `var leafletDraw = require('leaflet-draw');`
### bower
To install the plugin run `bower install leaflet-draw`.
### Builder
There is a custom builder at [../build/build.html](../build/build.html) to help make a custom package of Leaflet.Draw
with the command line.
@namespace CDN's
```html
```
@namespace Options
You can configure the plugin by using the different options listed here. If you identify a typo or have a suggestion
for this section of the documentation, please edit docs-misc.leafdoc in the build directory.
@namespace Control.Draw
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| position | String | `'topleft'` | The initial position of the control (one of the map corners). See [control positions](http://leafletjs.com/reference.html#control-positions). |
| draw | [DrawOptions](#drawoptions) | `{}` | The options used to configure the draw toolbar. |
| edit | [EditPolyOptions](#editpolyoptions) | `false` | The options used to configure the edit toolbar. |
@namespace DrawOptions
| Option | Type | Default | Description |
| --------- | ----- | --------- | ------------- |
| polyline | [PolylineOptions](#polylineoptions) | `{ }` | Polyline draw handler options. Set to `false` to disable handler. |
| polygon | [PolygonOptions](#polygonoptions) | `{ }` | Polygon draw handler options. Set to `false` to disable handler. |
| rectangle | [RectangleOptions](#rectangleoptions) | `{ }` | Rectangle draw handler options. Set to `false` to disable handler.|
| circle | [CircleOptions](#circleoptions) | `{ }` | Circle draw handler options. Set to `false` to disable handler. |
| marker | [MarkerOptions](#markeroptions) | `{ }` | Marker draw handler options. Set to `false` to disable handler. |
@namespace PolylineOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| allowIntersection | Bool | `true` | Determines if line segments can cross.
| drawError | Object | [See code](https://github.com/Leaflet/Leaflet.draw/blob/master/src/draw/handler/Draw.Polyline.js#L10) | Configuration options for the error that displays if an intersection is detected.
| guidelineDistance | Number | `20` | Distance in pixels between each guide dash.
| shapeOptions | [Leaflet Polyline options](http://leafletjs.com/reference.html#polyline-options) | [See code](https://github.com/Leaflet/Leaflet.draw/blob/master/src/draw/handler/Draw.Polyline.js#L20) | The options used when drawing the polyline/polygon on the map.
| metric | Bool | `true` | Determines which measurement system (metric or imperial) is used.
| zIndexOffset | Number | `2000` | This should be a high number to ensure that you can draw over all other layers on the map.
| repeatMode | Bool | `false` | Determines if the draw tool remains enabled after drawing a shape.
@namespace PolygonOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| showArea | Bool | `false` | Show the area of the drawn polygon in m², ha or km². **The area is only approximate and become less accurate the larger the polygon is.**
@namespace RectangleOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| shapeOptions | [Leaflet Path options](http://leafletjs.com/reference.html#path-options) | [See code](https://github.com/Leaflet/Leaflet.draw/blob/master/src/draw/handler/Draw.Rectangle.js#L7) | The options used when drawing the rectangle on the map.
| repeatMode | Bool | `false` | Determines if the draw tool remains enabled after drawing a shape.
| showRadius | Bool | `true` | Show the area of the drawn circle in m², ha or km². **The area is only approximate and become less accurate the larger the circle is.**
@namespace CircleOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| shapeOptions | [Leaflet Path options](http://leafletjs.com/reference.html#path-options) | [See code](https://github.com/Leaflet/Leaflet.draw/blob/master/src/draw/handler/Draw.Circle.js#L7) | The options used when drawing the circle on the map.
| repeatMode | Bool | `false` | Determines if the draw tool remains enabled after drawing a shape.
@namespace MarkerOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| icon | [Leaflet Icon](http://leafletjs.com/reference.html#icon) | `L.Icon.Default()` | The icon displayed when drawing a marker.
| zIndexOffset | Number | `2000` | This should be a high number to ensure that you can draw over all other layers on the map.
| repeatMode | Bool | `false` | Determines if the draw tool remains enabled after drawing a shape.
@namespace EditPolyOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| featureGroup | [Leaflet FeatureGroup](http://leafletjs.com/reference.html#featuregroup) | `null` | This is the FeatureGroup that stores all editable shapes. **THIS IS REQUIRED FOR THE EDIT TOOLBAR TO WORK**
| edit | [EditHandlerOptions](#edithandleroptions) | `{ }` | Edit handler options. Set to `false` to disable handler.
| remove | [DeleteHandlerOptions](#deletehandleroptions) | `{ }` | Delete handler options. Set to `false` to disable handler.
| poly | [EditPolyOptions](#editpoly) | `{ }` | Set polygon editing options
| allowIntersection | Bool | `true` | Determines if line segments can cross.
@namespace EditHandlerOptions
| Option | Type | Default | Description
| --- | --- | --- | ---
| selectedPathOptions | [Leaflet Path options](http://leafletjs.com/reference.html#path-options) | [See code](https://github.com/Leaflet/Leaflet.draw/blob/master/src/edit/handler/EditToolbar.Edit.js#L9) | The path options for how the layers will look while in edit mode. If this is set to null the editable path options will not be set.
**Note:** To maintain the original layer color of the layer use `maintainColor: true` within `selectedPathOptions`.
E.g. The edit options below will maintain the layer color and set the edit opacity to 0.3.
````js
{
selectedPathOptions: {
maintainColor: true,
opacity: 0.3
}
}
````
@namespace version
A constant that represents the Leaflet.Draw version in use.
```js
L.drawVersion; // contains "0.4.2" (or whatever version is currently in use)
```