You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
3 years ago | |
|---|---|---|
| .. | ||
| dist | 3 years ago | |
| src | 3 years ago | |
| README.md | 3 years ago | |
| package.json | 3 years ago | |
README.md
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-draw styles in your project
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
or by including
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 |