fixed/added multipolygon handling

Signed-off-by: Lucas-Nan <[email protected]>
amosproj · Jul 7, 2024 · 38f6f55 · 38f6f55
1 parent 3a16353
commit 38f6f55
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
@@ -12,7 +12,13 @@ import {
   MarkerSelection,
   PolygonSelection,
 } from "../../types/MapSelectionTypes";
-import { Position } from "geojson";
+import { MultiPolygon, Position } from "geojson";
+
+// Function to filter and return an array of outer polygons
+function getOuterPolygons(multiPolygon: MultiPolygon): Position[][] {
+  // Filter out the inner polygons (holes) and keep only the outer ones
+  return multiPolygon.coordinates.map((polygon) => polygon[0]);
+}
 
 function DataView() {
   const { currentTabsCache, getCurrentTab } = useContext(TabsContext);
@@ -76,17 +82,21 @@ function DataView() {
     });
     // Prepare the location data
     if (currentCoords) {
-      let coords: Position[][] | Position[][][] = [];
+      let coords: Position[][] = [];
+
       if (currentCoords instanceof MarkerSelection) {
         const singlePosition: Position = [
           currentCoords.marker.lng,
           currentCoords.marker.lat,
         ];
         coords = [[singlePosition]];
       } else if (currentCoords instanceof PolygonSelection) {
-        coords = currentCoords.polygon.coordinates;
+        // we have multipolygons which can have quite complicated inner structures.
+        // we simplfiy fot the current api in a way that we ignore all inner "holes" or other parts and only take
+        // the outer parts. so the independent general polygons.
+        coords = getOuterPolygons(currentCoords.polygon);
       }
-      console.log(coords);
+
       // Send the location request
       const currentTab = getCurrentTab();
       if (currentTab) {

diff --git a/frontend/src/components/MapView/LeafletMap.tsx b/frontend/src/components/MapView/LeafletMap.tsx
@@ -24,7 +24,13 @@ import {
   MarkerSelection,
   PolygonSelection,
 } from "../../types/MapSelectionTypes";
-import { Feature, GeoJsonProperties, MultiPolygon } from "geojson";
+import {
+  Feature,
+  GeoJsonProperties,
+  Geometry,
+  MultiPolygon,
+  Position,
+} from "geojson";
 
 interface LeafletMapProps {
   datasetId: string;
@@ -123,15 +129,31 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ datasetId, mapType }) => {
         if (drawnObject instanceof L.Polygon) {
           if (drawnItems) {
             drawnItems.addLayer(drawnObject);
-            const latLongs = drawnObject.toGeoJSON() as Feature<
-              MultiPolygon,
+            const geoJsonObject = drawnObject.toGeoJSON() as Feature<
+              Geometry,
               GeoJsonProperties
             >;
+            let multiPolygon: MultiPolygon;
+
+            // we will probably always encounter only polygons but in a istant future it may be interesting to have multi polygon selection
+            if (geoJsonObject.geometry.type === "Polygon") {
+              const polygon = geoJsonObject.geometry
+                .coordinates as Position[][];
+              multiPolygon = {
+                type: "MultiPolygon",
+                coordinates: [polygon],
+              };
+            } else if (geoJsonObject.geometry.type === "MultiPolygon") {
+              multiPolygon = geoJsonObject.geometry as MultiPolygon;
+            } else {
+              throw new Error("Unsupported geometry type");
+            }
             const polygonSelection = new PolygonSelection(
-              latLongs.geometry,
+              multiPolygon,
               "Custom Polygon",
               true
             );
+
             setCurrentMapCache({
               ...currentMapCacheRef.current,
               selectedCoordinates: polygonSelection,