DOCSEARCHbyAlgolia
Submit Docs

react-leaflet-draw

repository·master·Indexed 42 days ago

https://github.com/alex3165/react-leaflet-draw

A React component wrapper for the Leaflet.draw plugin, version 0.21.0, designed for use with React-Leaflet. It provides the EditControl component to add drawing and editing capabilities for polygons, rectangles, circles, markers, and polylines to interactive maps. Includes a comprehensive API for configuring drawing tools and handling lifecycle events such as onCreated, onEdited, and onDeleted.

Tokens
2K
Snippets
6
Records
7
Agent score
4%

What's inside react-leaflet-draw

  1. How EditControl and FeatureGroup work together

    master

    The EditControl component must be wrapped inside a FeatureGroup component from react-leaflet.

    Mental Model:

    • The FeatureGroup acts as the container for all drawable elements.
    • When you draw a new shape, it is automatically added to this FeatureGroup layer.
    • When you enter 'edit mode', only the items contained within that specific FeatureGroup will be available for editing.
    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>
);

  2. Include required Leaflet and Leaflet.draw styles

    master

    To ensure the drawing controls and map elements render correctly, you must include the CSS for both leaflet and leaflet-draw.

    You can include them via CDN:

    <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 importing them from your node_modules:

    • node_modules/leaflet/dist/leaflet.css
    • node_modules/leaflet-draw/dist/leaflet.draw.css

    Note: You may need to manually add the following CSS rule if it is missing from your project to handle accessibility classes:

    .sr-only {
  display: none;
}

  4. EditControl API Reference

    master

    The EditControl component provides several props to configure the drawing interface and hook into leaflet-draw events.

    Configuration Props

    • position (string): The control group position (e.g., 'topright').
    • draw (object <DrawOptions>): Configuration to enable or disable specific draw controls.
    • edit (object <EditPolyOptions>): Configuration to enable or disable edit controls.

    Event Hook Props

    These props allow you to respond to leaflet-draw lifecycle events:

    • onEdited: Hook to draw:edited event.
    • onCreated: Hook to draw:created event.
    • onDeleted: Hook to draw:deleted event.
    • onMounted: Hook to draw:mounted event.
    • onEditStart: Hook to draw:editstart event.
    • onEditStop: Hook to draw:editstop event.
    • onDeleteStart: Hook to draw:deletestart event.
    • onDeleteStop: Hook to draw:deletestop event.
    • onDrawStart: Hook to draw:drawstart event.
    • onDrawStop: Hook to draw:drawstop event.
    • onDrawVertex: Hook to draw:drawvertex event.
    • onEditMove: Hook to draw:editmove event.
    • onEditResize: Hook to draw:editresize event.
    • onEditVertex: Hook to draw:editvertex event

  5. Use the EditControl component

    master

    The EditControl component provides a Leaflet Draw interface within a React application. It allows users to draw new shapes (polylines, polygons, rectangles, circles, markers, and circlemarkers) and edit or delete existing ones. You can configure which drawing tools are available via the draw prop and handle lifecycle events (like creation, editing, or deletion) using various on... callback props.

    import { EditControl } from 'react-leaflet-draw';

<EditControl
  position="topleft"
  onCreated={(e) => console.log('Created:', e)}
  draw={{
    polyline: true,
    polygon: { shapeOptions: { color: 'red' } },
    rectangle: false
  }}
/>

  6. Configure EditControl drawing tools

    master

    The draw prop determines which shapes can be drawn on the map. Each key in the draw object can be set to a boolean to enable/disable the tool, or an options object of the corresponding Leaflet Draw type to customize the behavior of that specific tool.

    Supported drawing tools:

    • polyline
    • polygon
    • rectangle
    • circle
    • marker
    • circlemarker
    draw: {
	polyline?: DrawOptions.PolylineOptions | boolean;
	polygon?: DrawOptions.PolygonOptions | boolean;
	rectangle?: DrawOptions.RectangleOptions | boolean;
	circle?: DrawOptions.CircleOptions | boolean;
	marker?: DrawOptions.MarkerOptions | boolean;
	circlemarker?: DrawOptions.CircleOptions | boolean;
}

  7. Handle EditControl lifecycle events

    master

    The EditControl component exposes several callback props to intercept Leaflet Draw events. These events allow you to react to user interactions such as starting a draw, finishing a shape, editing vertices, or deleting layers.

    Drawing Events:

    • onDrawStart: Triggered when a user starts drawing.
    • onDrawStop: Triggered when a user finishes drawing.
    • onDrawVertex: Triggered when a vertex is moved during drawing.
    • onCreated: Triggered when a new layer is successfully created.

    Editing Events:

    • onEditStart: Triggered when editing begins.
    • onEditMove: Triggered when an edited layer is moved.
    • onEditResize: Triggered when an edited layer is resized.
    • onEditVertex: Triggered when an edited layer's vertex is moved.
    • onEditStop: Triggered when editing is finished.

    Deletion Events:

    • onDeleteStart: Triggered when deletion begins.
    • onDeleteStop: Triggered when deletion is finished.
    • onDeleted: Triggered when layers are successfully deleted.

    Other Events:

    • onMounted: A function called when the component is mounted.
    interface EditControlProps {
	onCreated?: (v: DrawEvents.Created) => void;
	onDrawStart?: (v: DrawEvents.DrawStart) => void;
	onDrawStop?: (v: DrawEvents.DrawStop) => void;
	onDrawVertex?: (v: DrawEvents.DrawVertex) => void;
	onEditStart?: (v: DrawEvents.EditStart) => void;
	onEditMove?: (v: DrawEvents.EditMove) => void;
	onEditResize?: (v: DrawEvents.EditResize) => void;
	onEditVertex?: (v: DrawEvents.EditVertex) => void;
	onEditStop?: (v: DrawEvents.EditStop) => void;
	onDeleted?: (v: DrawEvents.Deleted) => void;
	onDeleteStart?: (v: DrawEvents.DeleteStart) => void;
	onDeleteStop?: (v: DrawEvents.DeleteStop) => void;
	onMounted?: Function;
}