How to enable polygon (geofence) editing enable,on clicking polygon itself, without clicking on Edit button

1k Views Asked by At

I an using react-leaflet and 'react-leaflet-draw', for creating fences on map.

I want to edit fence on clicking of fence itself only, not by clicking on edit button.I am using geoJson for creating fences,

So anybody can tell me about the property which allow fences in edit mode?

render() {
 return (
  <FeatureGroup>
    <EditControl
      position="bottomright"

      edit={{ remove: false }}
      draw={{
        marker: false,
        circle: false,
        rectangle: false,
        polygon: false,
        polyline: false,
        circlemarker: false,
      }}
    />

{Object.values(this.props.geoFenceIdDataMapWithFlipCoordinates).
 map(geoFence => (
      <Polygon
        key={geoFence.id}
        color={`${geoFence.colorCode}`}
        positions={geoFence.geoData.geoJSON.geometry.coordinates[0]}
      />
    ))}

  </FeatureGroup>
   );
   }
}
1

There are 1 best solutions below

1
On

https://www.icampanile.com/reactjs/react-leaflet-and-google-map-layer-with-controls-draw/ this url will have an example update _onFeatureGroupReady method with

leafletGeoJSON.eachLayer((layer) => { leafletFG.addLayer(layer) layer?.editing?.enable()})