I'm using leaflet Editcontrol for edit the polygon on geojson i imported but but when i click on the editcontrol tool the error say Cannot read properties of undefined (reading 'enable')
this is my Map
<MapContainer
ref={mapRef}
center={mapCenter}
zoom={mapZoom}
style={{ zIndex: 1 }}
className="w-full h-screen"
>
<ImageOverlay bounds={bounds} url={imageOverlayUrl} />
<FeatureGroup >
{adminMode ? (
<EditControl
position="topright"
onCreated={onCreated}
draw={{
rectangle: false,
polygon:true
}}
edit={true}
/>
) : null}
{geoJsonData && (
<GeoJSON
data={geoJsonData}
style={renderGeoJSONStyle}
onEachFeature={renderGeoJSONOnEachFeature}
/>
)}
</FeatureGroup>
</MapContainer>
This is import Geojson data
const importGeoJson = (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => {
try {
const importedData = JSON.parse(e.target?.result as string);
setImportedData(importedData.features || []);
setGeoJsonData(importedData);
setImageOverlayUrl(importedData.imageOverlayUrl);
console.log("GeoJSON import successful!"); // Log success message
} catch (error) {
console.error("Error parsing JSON:", error);
}
};
reader.readAsText(file);
}
};