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:editedevent | 
| onCreated | function | hook to leaflet-draw's draw:createdevent | 
| onDeleted | function | hook to leaflet-draw's draw:deletedevent | 
| onMounted | function | hook to leaflet-draw's draw:mountedevent | 
| onEditStart | function | hook to leaflet-draw's draw:editstartevent | 
| onEditStop | function | hook to leaflet-draw's draw:editstopevent | 
| onDeleteStart | function | hook to leaflet-draw's draw:deletestartevent | 
| onDeleteStop | function | hook to leaflet-draw's draw:deletestopevent | 
| onDrawStart | function | hook to leaflet-draw's draw:drawstartevent | 
| onDrawStop | function | hook to leaflet-draw's draw:drawstopevent | 
| onDrawVertex | function | hook to leaflet-draw's draw:drawvertexevent | 
| onEditMove | function | hook to leaflet-draw's draw:editmoveevent | 
| onEditResize | function | hook to leaflet-draw's draw:editresizeevent | 
| onEditVertex | function | hook to leaflet-draw's draw:editvertexevent |