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
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
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:
.sr-only {
display: none;
}
It's important to wrap EditControl component into FeatureGroup component from 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.
import { Map, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw"
const Component = () => (
<FeatureGroup>
<EditControl
position='topright'
onEdited={this._onEditPath}
onCreated={this._onCreate}
onDeleted={this._onDeleted}
draw={{
rectangle: false
}}
/>
<Circle center={[51.51, -0.06]} radius={200} />
</FeatureGroup>
);
For more details on how to use this plugin check out the examples example.
yarn example:classto compile the class exampleyarn example:hooksto 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 |
