{"id":15786,"library":"react-leaflet-draw","title":"React-Leaflet Draw Controls","description":"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.","status":"active","version":"0.21.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/alex3165/react-leaflet-draw","tags":["javascript","react","leaflet","draw","editor","typescript"],"install":[{"cmd":"npm install react-leaflet-draw","lang":"bash","label":"npm"},{"cmd":"yarn add react-leaflet-draw","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-leaflet-draw","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core mapping library required by Leaflet.draw and react-leaflet.","package":"leaflet","optional":false},{"reason":"The underlying Leaflet plugin providing the drawing and editing functionality.","package":"leaflet-draw","optional":false},{"reason":"Used for runtime type checking of props in React components.","package":"prop-types","optional":true},{"reason":"The foundational library for building user interfaces.","package":"react","optional":false},{"reason":"Provides React components for Leaflet maps, which react-leaflet-draw extends.","package":"react-leaflet","optional":false}],"imports":[{"note":"EditControl is a named export, not a default export.","wrong":"import EditControl from 'react-leaflet-draw'","symbol":"EditControl","correct":"import { EditControl } from 'react-leaflet-draw'"},{"note":"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).","wrong":"import { Map } from 'react-leaflet'","symbol":"MapContainer","correct":"import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet'"},{"note":"TypeScript type import for component props.","symbol":"EditControlProps","correct":"import type { EditControlProps } from 'react-leaflet-draw'"}],"quickstart":{"code":"import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';\nimport { EditControl } from \"react-leaflet-draw\";\nimport 'leaflet/dist/leaflet.css';\nimport 'leaflet-draw/dist/leaflet.draw.css';\n\n// Workaround for missing Leaflet icons in Webpack/Vite\nimport L from 'leaflet';\ndelete L.Icon.Default.prototype._getIconUrl;\nL.Icon.Default.mergeOptions({\n iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',\n iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',\n shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'\n});\n\nconst MapWithDrawControls = () => {\n const _onEdited = (e) => {\n e.layers.eachLayer((layer) => {\n console.log('Layer edited:', layer.toGeoJSON());\n });\n };\n\n const _onCreated = (e) => {\n const { layerType, layer } = e;\n console.log('Layer created:', layerType, layer.toGeoJSON());\n };\n\n const _onDeleted = (e) => {\n e.layers.eachLayer((layer) => {\n console.log('Layer deleted:', layer.toGeoJSON());\n });\n };\n\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default MapWithDrawControls;\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.1.0"},{"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).","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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`.","message":"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.","severity":"breaking","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.21.0"},{"fix":"Always explicitly set `edit: { featureGroup: null }` within your `EditControl` props if you are wrapping it in a `FeatureGroup`.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"Attempting to render `EditControl` or other non-layer components directly inside a `FeatureGroup` from `react-leaflet` without being properly mounted.","error":"Error: Children of FeatureGroup must be a Layer."},{"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.","cause":"Leaflet's default marker icons are not correctly loaded by your bundler, leading to broken image paths.","error":"TypeError: Cannot read properties of undefined (reading '_getIconUrl')"},{"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`.","cause":"The required Leaflet or Leaflet.draw CSS files are not being imported or found by your build system.","error":"Module not found: Error: Can't resolve 'leaflet/dist/leaflet.css'"},{"fix":"Replace `