react-leaflet-draw
v0.20.4
Published
React component for leaflet-draw
Downloads
116,959
Readme
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 the 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 |