### Install React-Leaflet-Draw

Source: https://github.com/alex3165/react-leaflet-draw/blob/master/README.md

Install the package using npm.

```bash
npm install react-leaflet-draw
```

--------------------------------

### Basic Map with EditControl

Source: https://context7.com/alex3165/react-leaflet-draw/llms.txt

Demonstrates the basic setup of the EditControl within a FeatureGroup for handling map drawing events like creation, editing, and deletion. Requires react-leaflet and react-leaflet-draw.

```jsx
import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

function MapWithDrawing() {
  const handleCreated = (e) => {
    const { layerType, layer } = e;
    console.log(`Created a ${layerType}`, layer.toGeoJSON());
  };

  const handleEdited = (e) => {
    e.layers.eachLayer((layer) => {
      console.log('Edited layer:', layer.toGeoJSON());
    });
  };

  const handleDeleted = (e) => {
    e.layers.eachLayer((layer) => {
      console.log('Deleted layer:', layer.toGeoJSON());
    });
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <FeatureGroup>
        <EditControl
          position="topright"
          onCreated={handleCreated}
          onEdited={handleEdited}
          onDeleted={handleDeleted}
          draw={{
            rectangle: false,
            circle: true,
            polyline: true,
            polygon: true,
            marker: true,
            circlemarker: false,
          }}
        />
      </FeatureGroup>
    </MapContainer>
  );
}
```

--------------------------------

### Basic Usage of EditControl

Source: https://github.com/alex3165/react-leaflet-draw/blob/master/README.md

Wrap EditControl within a FeatureGroup and import necessary components. This example disables the rectangle drawing tool.

```jsx
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>
);
```

--------------------------------

### Include Leaflet and Leaflet-Draw Styles

Source: https://github.com/alex3165/react-leaflet-draw/blob/master/README.md

Include the necessary CSS files for Leaflet and Leaflet-Draw in your project.

```html
<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"/>
```

```html
node_modules/leaflet/dist/leaflet.css
node_modules/leaflet-draw/dist/leaflet.draw.css
```

--------------------------------

### Add Missing CSS Rule

Source: https://github.com/alex3165/react-leaflet-draw/blob/master/README.md

Add a missing CSS rule for screen readers if necessary.

```css
.sr-only {
    display: none;
  }
```

--------------------------------

### React Component with All Draw Event Handlers

Source: https://context7.com/alex3165/react-leaflet-draw/llms.txt

This component demonstrates how to use all available event handlers provided by React-Leaflet-Draw, such as onMounted, onDrawStart, onDrawStop, onEditStart, onEditMove, onEditResize, onEditVertex, onEditStop, onDeleteStart, and onDeleteStop. It logs events to the console when they occur.

```jsx
import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

function MapWithAllEventHandlers() {
  const onMounted = (drawControl) => {
    console.log('Draw control mounted:', drawControl);
  };

  const onDrawStart = (e) => {
    console.log('Drawing started:', e.layerType);
  };

  const onDrawStop = (e) => {
    console.log('Drawing stopped');
  };

  const onDrawVertex = (e) => {
    console.log('Vertex added:', e.layers);
  };

  const onEditStart = (e) => {
    console.log('Edit mode started');
  };

  const onEditMove = (e) => {
    console.log('Layer moved:', e.layer);
  };

  const onEditResize = (e) => {
    console.log('Layer resized:', e.layer);
  };

  const onEditVertex = (e) => {
    console.log('Vertex edited:', e.poly);
  };

  const onEditStop = (e) => {
    console.log('Edit mode stopped');
  };

  const onDeleteStart = (e) => {
    console.log('Delete mode started');
  };

  const onDeleteStop = (e) => {
    console.log('Delete mode stopped');
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <FeatureGroup>
        <EditControl
          position="topright"
          onMounted={onMounted}
          onDrawStart={onDrawStart}
          onDrawStop={onDrawStop}
          onDrawVertex={onDrawVertex}
          onEditStart={onEditStart}
          onEditMove={onEditMove}
          onEditResize={onEditResize}
          onEditVertex={onEditVertex}
          onEditStop={onEditStop}
          onDeleteStart={onDeleteStart}
          onDeleteStop={onDeleteStop}
          onCreated={(e) => console.log('Created:', e)}
          onEdited={(e) => console.log('Edited:', e)}
          onDeleted={(e) => console.log('Deleted:', e)}
          draw={{
            polygon: true,
            polyline: true,
            circle: true,
            rectangle: true,
            marker: true,
          }}
        />
      </FeatureGroup>
    </MapContainer>
  );
}

```

--------------------------------

### Configuring Edit and Remove Behavior

Source: https://context7.com/alex3165/react-leaflet-draw/llms.txt

Enables editing and removal of shapes on the map using the `edit` prop, with specific options for polygon intersection. Includes a pre-existing Circle element.

```jsx
import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

function MapWithEditOptions() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <FeatureGroup>
        <EditControl
          position="topright"
          edit={{
            edit: true,
            remove: true,
            poly: {
              allowIntersection: false,
            },
          }}
          draw={{
            polygon: true,
            polyline: true,
            rectangle: false,
            circle: false,
            marker: false,
            circlemarker: false,
          }}
        />
        <Circle center={[51.51, -0.06]} radius={200} />
      </FeatureGroup>
    </MapContainer>
  );
}
```

--------------------------------

### Customizing Draw Options

Source: https://context7.com/alex3165/react-leaflet-draw/llms.txt

Configures specific drawing tools like polylines and polygons with custom styles and behavior using the `draw` prop. Disables rectangle and circle markers.

```jsx
import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

function MapWithCustomDrawOptions() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <FeatureGroup>
        <EditControl
          position="topleft"
          draw={{
            polyline: {
              shapeOptions: {
                color: '#f357a1',
                weight: 10,
              },
            },
            polygon: {
              allowIntersection: false,
              shapeOptions: {
                color: '#bada55',
              },
            },
            circle: {
              shapeOptions: {
                color: '#662d91',
              },
            },
            rectangle: false,
            marker: true,
            circlemarker: false,
          }}
        />
      </FeatureGroup>
    </MapContainer>
  );
}
```

--------------------------------

### TypeScript Map Editor with React-Leaflet-Draw

Source: https://context7.com/alex3165/react-leaflet-draw/llms.txt

This component allows users to draw shapes on a map using React-Leaflet-Draw. It includes type definitions for event handlers and props, and demonstrates saving drawn features as GeoJSON.

```tsx
import * as React from 'react';
import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import type { FeatureCollection } from 'geojson';
import type { DrawEvents } from 'leaflet';

interface MapEditorProps {
  initialData?: FeatureCollection;
  onSave: (data: FeatureCollection) => void;
}

function TypedMapEditor({ initialData, onSave }: MapEditorProps) {
  const featureGroupRef = React.useRef<L.FeatureGroup>(null);

  const handleCreated = (e: DrawEvents.Created) => {
    console.log('Layer type:', e.layerType);
    console.log('Layer:', e.layer);
    saveChanges();
  };

  const handleEdited = (e: DrawEvents.Edited) => {
    console.log('Layers edited:', e.layers);
    saveChanges();
  };

  const handleDeleted = (e: DrawEvents.Deleted) => {
    console.log('Layers deleted:', e.layers);
    saveChanges();
  };

  const saveChanges = () => {
    const geo = featureGroupRef.current?.toGeoJSON();
    if (geo?.type === 'FeatureCollection') {
      onSave(geo);
    }
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <FeatureGroup ref={featureGroupRef}>
        <EditControl
          position="topright"
          onCreated={handleCreated}
          onEdited={handleEdited}
          onDeleted={handleDeleted}
          draw={{
            polyline: true,
            polygon: true,
            rectangle: false,
            circle: true,
            marker: true,
            circlemarker: false,
          }}
        />
      </FeatureGroup>
    </MapContainer>
  );
}

```

--------------------------------

### React Component for Loading and Editing GeoJSON Data

Source: https://context7.com/alex3165/react-leaflet-draw/llms.txt

This component demonstrates how to load GeoJSON data into a FeatureGroup and enable editing. It uses React's useRef for the FeatureGroup and Leaflet's geoJSON method to parse and add layers. The EditControl is configured to allow editing and creation of specific geometry types.

```jsx
import * as React from 'react';
import * as L from 'leaflet';
import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

function MapWithGeoJSON() {
  const featureGroupRef = React.useRef(null);

  const geojsonData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [[
            [-73.976344, 40.767867],
            [-73.984754, 40.774237],
            [-73.96742, 40.783206],
            [-73.966733, 40.773067],
            [-73.976344, 40.767867],
          ]],
        },
      },
      {
        type: 'Feature',
        properties: { radius: 100 },
        geometry: { type: 'Point', coordinates: [-73.962357, 40.796658] },
      },
    ],
  };

  React.useEffect(() => {
    if (featureGroupRef.current?.getLayers().length === 0) {
      L.geoJSON(geojsonData).eachLayer((layer) => {
        if (layer instanceof L.Polyline || layer instanceof L.Polygon || layer instanceof L.Marker) {
          if (layer.feature?.properties.radius) {
            new L.Circle(
              layer.feature.geometry.coordinates.slice().reverse(),
              { radius: layer.feature.properties.radius }
            ).addTo(featureGroupRef.current);
          } else {
            featureGroupRef.current?.addLayer(layer);
          }
        }
      });
    }
  }, []);

  const handleChange = () => {
    const geo = featureGroupRef.current?.toGeoJSON();
    console.log('GeoJSON updated:', geo);
  };

  return (
    <MapContainer center={[40.776787, -73.968467]} zoom={14}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <FeatureGroup ref={featureGroupRef}>
        <EditControl
          position="topright"
          onEdited={handleChange}
          onCreated={handleChange}
          onDeleted={handleChange}
          draw={{
            rectangle: false,
            circle: true,
            polyline: true,
            polygon: true,
            marker: false,
            circlemarker: false,
          }}
        />
      </FeatureGroup>
    </MapContainer>
  );
}

```

--------------------------------

### EditControl API

Source: https://github.com/alex3165/react-leaflet-draw/blob/master/README.md

The EditControl component allows users to draw and edit features on a Leaflet map within a React application. It integrates with the leaflet-draw library and provides various props for customization and event handling.

```APIDOC
## EditControl API

### Description

The `EditControl` component is a React component that integrates the functionality of the `leaflet-draw` library into applications using `react-leaflet`. It allows users to draw various shapes (like polygons, rectangles, circles) and edit existing ones on the map. It must be wrapped within a `FeatureGroup` component from `react-leaflet`.

### Props

#### Common Props

- **position** (string) - Optional - Specifies the position of the control on the map. Refer to [Control position options](http://leafletjs.com/reference.html#control-positions).
- **draw** (object <DrawOptions>) - Optional - An object to enable/disable specific drawing controls. See [DrawOptions](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#drawoptions) for available options.
- **edit** (object <EditPolyOptions>) - Optional - An object to enable/disable specific editing controls. See [EditPolyOptions](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#editpolyoptions) for available options.

#### Event Hooks

- **onEdited** (function) - Optional - Callback function triggered when features are edited. Corresponds to leaflet-draw's `draw:edited` event.
- **onCreated** (function) - Optional - Callback function triggered when new features are created. Corresponds to leaflet-draw's `draw:created` event.
- **onDeleted** (function) - Optional - Callback function triggered when features are deleted. Corresponds to leaflet-draw's `draw:deleted` event.
- **onMounted** (function) - Optional - Callback function triggered when the control is mounted. Corresponds to leaflet-draw's `draw:mounted` event.
- **onEditStart** (function) - Optional - Callback function triggered when editing starts. Corresponds to leaflet-draw's `draw:editstart` event.
- **onEditStop** (function) - Optional - Callback function triggered when editing stops. Corresponds to leaflet-draw's `draw:editstop` event.
- **onDeleteStart** (function) - Optional - Callback function triggered when deletion starts. Corresponds to leaflet-draw's `draw:deletestart` event.
- **onDeleteStop** (function) - Optional - Callback function triggered when deletion stops. Corresponds to leaflet-draw's `draw:deletestop` event.
- **onDrawStart** (function) - Optional - Callback function triggered when drawing starts. Corresponds to leaflet-draw's `draw:drawstart` event.
- **onDrawStop** (function) - Optional - Callback function triggered when drawing stops. Corresponds to leaflet-draw's `draw:drawstop` event.
- **onDrawVertex** (function) - Optional - Callback function triggered for each vertex during drawing. Corresponds to leaflet-draw's `draw:drawvertex` event.
- **onEditMove** (function) - Optional - Callback function triggered when a feature is moved during editing. Corresponds to leaflet-draw's `draw:editmove` event.
- **onEditResize** (function) - Optional - Callback function triggered when a feature is resized during editing. Corresponds to leaflet-draw's `draw:editresize` event.
- **onEditVertex** (function) - Optional - Callback function triggered for each vertex during editing. Corresponds 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)

### Example Usage

```jsx
import { Map, TileLayer, FeatureGroup } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw";

const MyMapComponent = () => (
  <Map center={[51.505, -0.09]} zoom={13}>
    <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
    <FeatureGroup>
      <EditControl
        position='topright'
        onEdited={this._onEditPath}
        onCreated={this._onCreate}
        onDeleted={this._onDeleted}
        draw={{
          rectangle: false // Example: disable rectangle drawing
        }}
      />
    </FeatureGroup>
  </Map>
);

export default MyMapComponent;
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.