search

alex3165 / react-leaflet-draw

React component for leaflet-draw on top of react-leaflet
228 stars 152 forks source link
leaflet-draw map react react-leaflet react-leaflet-draw

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="https://github.com/alex3165/react-leaflet-draw/blob/master//cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"/>
<link rel="stylesheet" href="https://github.com/alex3165/react-leaflet-draw/blob/master//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 out the examples 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

Links to docs