how to draw programmatically

[MasterCna]

I want to create/draw shapes programmatically with given lat and lng. How can I do that ?

[afink170]

I too would like to do this. I have been able to programmatically enable the draw control, but I have not yet figured out whether it's possible to actually fire a draw event programmatically. I want to be able to do something like this:

_onMounted = drawControl => {
		drawControl._toolbars.draw._modes.rectangle.handler.drawShape(lat1, lng1, lat2, lng2);
	};

[ronaldruzicka]

Maybe you already figured it out, but you can draw a Polygon and put it inside the FeatureGroup component. It then becomes editable. So you basically don't need this functionality.

<Map center={coords} height={500}>
  <TileLayer
    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <FeatureGroup ref={mapRef}>
    <EditControl
      position="topright"
      onCreated={onCreated}
      draw={{
        polygon: true,
        circle: false,
        polyline: false,
        rectangle: false,
        circlemarker: false,
        marker: false,
      }}
    />
    <Polygon
      onClick={(event: any) => console.log('event', event.target.getLatLngs())}
      color={color}
      positions={positions} // Coordinations of the polygon e.g. from state
    />
  </FeatureGroup>
</Map>

[paveltretyakovru]

The answer on stackowerflow can help

[cowglow]

The issue is that you can access the L.Draw object from the onMount handler. If we could do that that's would be awesome. Ofcourse you can add a to the map, since we are already in context of "react-leaflet" you can use const map = useMap or something similar e.i const context = useLeafletContext() the issue remains that we can't actually edit the polygon added nor can we delete it with the react-leaflet-draw controls.