Registry / web-framework / react-leaflet-draw

react-leaflet-draw

library0.21.0jsnpmunverified

react-leaflet-draw provides a React component, `EditControl`, that integrates the popular Leaflet.draw plugin into React-Leaflet applications. It allows users to add drawing and editing capabilities for geographic features (polygons, lines, circles, markers) directly on a Leaflet map. The current stable version is 0.21.0. While there isn't a stated release cadence, development appears active, aligning with updates to its peer dependencies like `react-leaflet`. Its key differentiator is providing a declarative React interface for Leaflet.draw's imperative API, simplifying state management and rendering for interactive map editing within a React ecosystem. It relies heavily on `react-leaflet`'s context system to access the underlying Leaflet map instance. The library focuses solely on the draw functionality rather than broader GIS features.

web-framework data

npm install react-leaflet-draw

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-LEAFLET-DRAW

react-leaflet-draw

web-frameworkjavascriptv0.21.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

EditControl

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

✗ import EditControl from 'react-leaflet-draw'

EditControl is a named export, not a default export.

MapContainer

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

✗ import { Map } 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.

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='© <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;

Debug

Known issues

breakingLeaflet.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.

affects: >=0.1.0

gotchaLeaflet'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).

affects: >=0.1.0

breakingThe `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`.

affects: >=0.1.0

breakingVersion 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.

affects: >=0.21.0

gotchaWhen 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`.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Children of FeatureGroup must be a Layer.

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')

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'

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.

`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.

Upgrade

Version history

0.21.0latest on npm

Audit

Dependencies

leafletrequiredCore mapping library required by Leaflet.draw and react-leaflet.

leaflet-drawrequiredThe underlying Leaflet plugin providing the drawing and editing functionality.

prop-typesoptionalUsed for runtime type checking of props in React components.

reactrequiredThe foundational library for building user interfaces.

react-leafletrequiredProvides React components for Leaflet maps, which react-leaflet-draw extends.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/alex3165/react-leaflet-draw ↗

packagehttps://www.npmjs.com/package/react-leaflet-draw ↗