How do I dynamically add a circle in my map from a query in react-leaflet-draw?

Question

I tried to create a circle from a query using the polygon component from react-leaflet. But it does not benefit from the toolbar that is provided by react-leaflet-draw. How do I make the said component to be in the context of the toolbar?

Answer 1

you should insert the react leaflet polygon component to the FeatureGroup component like this:

<FeatureGroup>
      <EditControl
        position="topright"
      />

      <FeatureGroup>
      <EditControl
        onCreated={(e) => this._onCreate(e)}
        onEdited={(e) => this._onChange(e)}
        position="topright"
        draw={{
          rectangle: false
        }}

      />

      {this.state.polygons.map((polygon) => <Polygon positions={polygon.pointsCoordinates} />)}

    </FeatureGroup>