Cannot read properties of undefined (reading 'enable') react leaflet edit control

92 Views Asked by At

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

Editcontrol tools

0

There are 0 best solutions below