Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alex3165/react-leaflet-draw
React component for leaflet-draw on top of react-leaflet
https://github.com/alex3165/react-leaflet-draw
leaflet-draw map react react-leaflet react-leaflet-draw
Last synced: 3 days ago
JSON representation
React component for leaflet-draw on top of react-leaflet
- Host: GitHub
- URL: https://github.com/alex3165/react-leaflet-draw
- Owner: alex3165
- Created: 2015-12-22T17:48:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T02:33:05.000Z (almost 2 years ago)
- Last Synced: 2024-12-24T03:08:26.416Z (10 days ago)
- Topics: leaflet-draw, map, react, react-leaflet, react-leaflet-draw
- Language: JavaScript
- Homepage:
- Size: 1.11 MB
- Stars: 229
- Watchers: 11
- Forks: 152
- Open Issues: 63
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Leaflet-Draw
React component build on top of [React-Leaflet](https://github.com/PaulLeCam/react-leaflet) that integrate [leaflet-draw](https://github.com/Leaflet/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 `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 'react-leaflet';
import { EditControl } from "react-leaflet-draw"
const Component = () => (
);
```
For more details on how to use this plugin check out the examples [example](examples).
- `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](https://github.com/Leaflet/Leaflet.draw#user-content-example-leafletdraw-config)
## 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](http://leafletjs.com/reference.html#control-positions)
* [DrawOptions](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#drawoptions)
* [EditPolyOptions](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#editpolyoptions)
* [Draw events](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event)