React-Leaflet-Draw

React component build on top of React-Leaflet that integrate leaflet-draw feature.

Install

``
npm install react-leaflet-draw
`

Getting started

First, include leaflet & leaflet-draw styles in your project
`html


`
or by including
`
node_modules/leaflet/dist/leaflet.css
node_modules/leaflet-draw/dist/leaflet.draw.css
`

You might need to add one more rule missing in the current css:
`css
.sr-only {
display: none;
}
`

It's important to wrap EditControl component into FeatureGroup component from marwan-yasser-react-leaflet.
The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited.

`jsx
import { Map, TileLayer, FeatureGroup, Circle } from 'marwan-yasser-react-leaflet';
import { EditControl } from "react-leaflet-draw"

const Component = () => (

position='topright'
onEdited={this._onEditPath}
onCreated={this._onCreate}
onDeleted={this._onDeleted}
draw={{
rectangle: false
}}
/>


);
`

For more details on how to use this plugin check out the examples example.
- yarn example:class to compile the class example
- yarn example:hooks to compile and run the hooks example

You can pass more options on draw object, this informations can be found here

EditControl API

#### Props

|name |type |description |
|----------------|----------------------------|------------------------------------------------------|
|position |string |control group position |
|draw |object |enable/disable draw controls |
|edit |object |enable/disable edit controls |
|onEdited |function |hook to leaflet-draw's draw:edited event |
|onCreated |function |hook to leaflet-draw's draw:created event |
|onDeleted |function |hook to leaflet-draw's draw:deleted event |
|onMounted |function |hook to leaflet-draw's draw:mounted event |
|onEditStart |function |hook to leaflet-draw's draw:editstart event |
|onEditStop |function |hook to leaflet-draw's draw:editstop event |
|onDeleteStart |function |hook to leaflet-draw's draw:deletestart event |
|onDeleteStop |function |hook to leaflet-draw's draw:deletestop event |
|onDrawStart |function |hook to leaflet-draw's draw:drawstart event |
|onDrawStop |function |hook to leaflet-draw's draw:drawstop event |
|onDrawVertex |function |hook to leaflet-draw's draw:drawvertex event |
|onEditMove |function |hook to leaflet-draw's draw:editmove event |
|onEditResize |function |hook to leaflet-draw's draw:editresize event |
|onEditVertex |function |hook to leaflet-draw's draw:editvertex` event |

#### Links to docs

* Control position options
* DrawOptions
* EditPolyOptions
* Draw events