Next-generation React component for Leaflet.draw, extending react-leaflet-draw with modern features and support.
npm install react-leaflet-draw-nextReact component build on top of React-Leaflet that integrate leaflet-draw feature. This is the next-generation version with React 19 and react-leaflet v5 support.
```
npm install react-leaflet-draw-next
First, include leaflet & leaflet-draw styles in your project
`html``
or by including`
node_modules/leaflet/dist/leaflet.css
node_modules/leaflet-draw/dist/leaflet.draw.css
You might need to add one more rule missing in the current css:
`css`
.sr-only {
display: none;
}
It's important to wrap EditControl component into FeatureGroup component from react-leaflet.
The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited.
`jsx
import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw-next"
const Component = () => {
const featureGroupRef = useRef();
return (
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
onEdited={this._onEditPath}
onCreated={this._onCreate}
onDeleted={this._onDeleted}
draw={{
rectangle: false
}}
featureGroup={featureGroupRef.current}
/>
);
};
`
`tsx
import * as React from 'react';
import * as L from 'leaflet';
import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw-next";
interface ComponentProps {
// your props here
}
const Component: React.FC
const featureGroupRef = React.useRef
const [featureGroupReady, setFeatureGroupReady] = React.useState(false);
React.useEffect(() => {
if (featureGroupRef.current && !featureGroupReady) {
setFeatureGroupReady(true);
}
}, [featureGroupReady]);
const handleEdited = (e: L.DrawEvents.Edited) => {
// Handle edited event
console.log('Features edited:', e);
};
const handleCreated = (e: L.DrawEvents.Created) => {
// Handle created event
console.log('Feature created:', e);
};
const handleDeleted = (e: L.DrawEvents.Deleted) => {
// Handle deleted event
console.log('Features deleted:', e);
};
return (
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
{featureGroupReady && featureGroupRef.current && (
onEdited={handleEdited}
onCreated={handleCreated}
onDeleted={handleDeleted}
draw={{
rectangle: false,
circle: true,
polyline: true,
polygon: true,
marker: false,
circlemarker: false,
}}
featureGroup={featureGroupRef.current}
/>
)}
);
};
`
For more details on how to use this plugin check out the examples example.
- npm run example:class to compile the class examplenpm run example:hooks
- to compile and run the hooks example
You can pass more options on draw object, this informations can be found here
This package is specifically designed for React 19 and react-leaflet v5. Key changes from the original react-leaflet-draw:
- Uses MapContainer instead of MapfeatureGroup
- Requires passing the prop to EditControl with the actual Leaflet FeatureGroup instance
- Compatible with the new hooks-based architecture of react-leaflet v5
⚠️ Important: The featureGroup prop is now required for proper functionality with react-leaflet v5. This is a breaking change from previous versions.
#### Props
|name |type |description |
|----------------|----------------------------|------------------------------------------------------|
|position |string |control group position |
|draw |object
|edit |object
|featureGroup |L.FeatureGroup |Required: L.FeatureGroup instance for react-leaflet v5|
|onEdited |function |hook to leaflet-draw's draw:edited event |draw:created
|onCreated |function |hook to leaflet-draw's event |draw:deleted
|onDeleted |function |hook to leaflet-draw's event |draw:mounted
|onMounted |function |hook to leaflet-draw's event |draw:editstart
|onEditStart |function |hook to leaflet-draw's event |draw:editstop
|onEditStop |function |hook to leaflet-draw's event |draw:deletestart
|onDeleteStart |function |hook to leaflet-draw's event |draw:deletestop
|onDeleteStop |function |hook to leaflet-draw's event |draw:drawstart
|onDrawStart |function |hook to leaflet-draw's event |draw:drawstop
|onDrawStop |function |hook to leaflet-draw's event |draw:drawvertex
|onDrawVertex |function |hook to leaflet-draw's event |draw:editmove
|onEditMove |function |hook to leaflet-draw's event |draw:editresize
|onEditResize |function |hook to leaflet-draw's event |draw:editvertex` event |
|onEditVertex |function |hook to leaflet-draw's
#### Links to docs
* Control position options
* DrawOptions
* EditPolyOptions
* Draw events