{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-leaflet-draw"],"cli":null},"imports":["import { EditControl } from 'react-leaflet-draw'","import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet'","import type { EditControlProps } from 'react-leaflet-draw'"],"auth":{"required":false,"env_vars":[]},"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    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '500px', width: '100%' }}>\n      <TileLayer\n        attribution='&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n      />\n      <FeatureGroup>\n        <EditControl\n          position='topright'\n          onEdited={_onEdited}\n          onCreated={_onCreated}\n          onDeleted={_onDeleted}\n          draw={{\n            rectangle: false, // Disable rectangle drawing\n            circlemarker: false // Disable circle marker drawing\n          }}\n          edit={{\n            poly: { allowIntersection: false }, // Prevent self-intersections for polygons\n            featureGroup: null // This ensures only items in the parent FeatureGroup are editable\n          }}\n        />\n        <Circle center={[51.51, -0.06]} radius={200} />\n      </FeatureGroup>\n    </MapContainer>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}