Use the saved circle from the db and make it editable

[muzaffarmhm]

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

[edilson14]

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>
    );
  };