Leaflet.draw
Leaflet.draw copied to clipboard
Use the saved circle from the db and make it editable
Hi, I have a project where I use Leaflet Draw to draw a circle and save that circle radius and coordinates in the backend.
Now with that data, I want to display the same circle later with the coordinates and radius and make it editable. Is this possible?
I couldn't find any solutions. The solution I thought was to auto draw a circle without using toolbar once we load the page with coordinates and radius.
Please help! Thanks in advance
const renderCircles = () => {
return groups.map((_group, key) => (
// i use this componet to draw all circles that i have in my DB
<Circle
key={key}
radius={GeneralPurposeFunctions.MeasuresConverter.kmToMeters(
_group.radius
)}
center={[_group.lat, _group.long]}
color={_group.color}
/>
));
};
const renderDrawnOptions = () => {
return (
<FeatureGroup>
<EditControl
position="topright"
onCreated={_onCreate}
onEditStop={_createGroup}
onEdited={_onEdit}
draw={{
polygon: false,
rectangle: false,
circlemarker: false,
marker: false,
polyline: false,
circle: {
repeatMode: true,
},
}}
/>
{renderCircles()}
</FeatureGroup>
);
};