React-leaflet-draw NPM

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