React-Leaflet Draw Controls

Common errors

• Error: Children of FeatureGroup must be a Layer.

  cause Attempting to render `EditControl` or other non-layer components directly inside a `FeatureGroup` from `react-leaflet` without being properly mounted.
  fix Ensure `EditControl` and any layers are correctly imported and rendered as valid children of `FeatureGroup`. This error is more likely if `react-leaflet` versions are mismatched.

• TypeError: Cannot read properties of undefined (reading '_getIconUrl')

  cause Leaflet's default marker icons are not correctly loaded by your bundler, leading to broken image paths.
  fix Apply the Leaflet icon workaround: `import L from 'leaflet'; delete L.Icon.Default.prototype._getIconUrl; L.Icon.Default.mergeOptions({ iconRetinaUrl: '...', iconUrl: '...', shadowUrl: '...' });` pointing to valid image paths.

• Module not found: Error: Can't resolve 'leaflet/dist/leaflet.css'

  cause The required Leaflet or Leaflet.draw CSS files are not being imported or found by your build system.
  fix Add `import 'leaflet/dist/leaflet.css';` and `import 'leaflet-draw/dist/leaflet.draw.css';` to your application's entry point or relevant component. Verify that `leaflet` and `leaflet-draw` are correctly installed in `node_modules`.

• Uncaught Error: `Map` component is no longer supported. Use `MapContainer` instead.

  cause `react-leaflet-draw` v0.21.0 has a peer dependency on `react-leaflet` v5+, which deprecated the `Map` component.
  fix Replace `<Map>` with `<MapContainer>` in your React-Leaflet application and review `react-leaflet` v5 migration guide for other necessary updates.

Warnings

• breaking Leaflet.draw CSS is not automatically included. You *must* manually import `leaflet.css` and `leaflet.draw.css` or link them via CDN. Neglecting this will result in unstyled and potentially broken UI for the drawing tools.
  Fix: Add `import 'leaflet/dist/leaflet.css';` and `import 'leaflet-draw/dist/leaflet.draw.css';` to your entry file or component, or include CDN links in your HTML.
• gotcha Leaflet's default marker icons often break in bundlers like Webpack or Vite due to incorrect URL resolution. This results in missing marker images for drawn points.
  Fix: Implement the Leaflet icon workaround by importing `L` from 'leaflet' and re-assigning `L.Icon.Default.prototype._getIconUrl` and `L.Icon.Default.mergeOptions` to point to a reliable source for the icon images (e.g., CDN or local assets).
• breaking The `EditControl` component must be rendered inside a `FeatureGroup` component from `react-leaflet`. This `FeatureGroup` acts as the layer where drawn elements are added and from which editable items are managed.
  Fix: Ensure `EditControl` is a child of `react-leaflet`'s `FeatureGroup` component. Any existing `Layer` components you want to be editable should also be children of this `FeatureGroup`.
• breaking Version 0.21.0 requires `react-leaflet` ^5.0.0. `react-leaflet` v5 introduced significant breaking changes, notably replacing `Map` with `MapContainer` and changes to layer components. Using `react-leaflet-draw` with older `react-leaflet` versions will lead to rendering errors.
  Fix: Upgrade your `react-leaflet` dependency to `^5.0.0` or higher and update your map component from `Map` to `MapContainer`. Review `react-leaflet` v5 migration guide for other potential breaking changes in your application.
• gotcha When using the `edit` prop, setting `featureGroup: null` is crucial to ensure that only layers within the parent `FeatureGroup` are considered for editing. Omitting this can lead to unexpected behavior or editing of layers outside the intended scope.
  Fix: Always explicitly set `edit: { featureGroup: null }` within your `EditControl` props if you are wrapping it in a `FeatureGroup`.

Install

• npm install react-leaflet-draw npm
• yarn add react-leaflet-draw yarn
• pnpm add react-leaflet-draw pnpm

Imports

• EditControl
  wrong:

  import EditControl from 'react-leaflet-draw'

  correct:

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

  EditControl is a named export, not a default export.
• MapContainer
  wrong:

  import { Map } from 'react-leaflet'

  correct:

  import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet'

  React-Leaflet v3+ replaced `Map` with `MapContainer`. Ensure you are using the correct component name based on your react-leaflet version (>=5.0.0 for this package).
• EditControlProps

  import type { EditControlProps } from 'react-leaflet-draw'

  TypeScript type import for component props.

Quickstart

This example demonstrates how to set up a basic Leaflet map with drawing and editing capabilities using `react-leaflet-draw`. It includes importing necessary components and styles, handling common Leaflet icon issues, and setting up event handlers for creation, editing, and deletion of map features. It also shows how to customize the available drawing tools and editing options.

import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw";
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';

// Workaround for missing Leaflet icons in Webpack/Vite
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'
});

const MapWithDrawControls = () => {
  const _onEdited = (e) => {
    e.layers.eachLayer((layer) => {
      console.log('Layer edited:', layer.toGeoJSON());
    });
  };

  const _onCreated = (e) => {
    const { layerType, layer } = e;
    console.log('Layer created:', layerType, layer.toGeoJSON());
  };

  const _onDeleted = (e) => {
    e.layers.eachLayer((layer) => {
      console.log('Layer deleted:', layer.toGeoJSON());
    });
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '500px', width: '100%' }}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <FeatureGroup>
        <EditControl
          position='topright'
          onEdited={_onEdited}
          onCreated={_onCreated}
          onDeleted={_onDeleted}
          draw={{
            rectangle: false, // Disable rectangle drawing
            circlemarker: false // Disable circle marker drawing
          }}
          edit={{
            poly: { allowIntersection: false }, // Prevent self-intersections for polygons
            featureGroup: null // This ensures only items in the parent FeatureGroup are editable
          }}
        />
        <Circle center={[51.51, -0.06]} radius={200} />
      </FeatureGroup>
    </MapContainer>
  );
};

export default MapWithDrawControls;