Started working on the polygons to markers

Signed-off-by: Emil Balitzki <[email protected]>
amosproj · Jul 2, 2024 · caac4c9 · caac4c9
1 parent 339edbc
commit caac4c9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/frontend/src/components/MapView/GeoDataFetcher.tsx b/frontend/src/components/MapView/GeoDataFetcher.tsx
@@ -41,7 +41,8 @@ const GeoDataFetcher = (
     // Check if the zoom threshold has not been achieved
     if (
       currentTab &&
-      currentTab.dataset.type === "markers" &&
+      currentTab.dataset.metaData &&
+      currentTab.dataset.metaData.type === "markers" &&
       zoom <= currentTab.dataset.metaData!.minZoomLevel
     ) {
       setData(undefined);

diff --git a/frontend/src/components/MapView/MapDatasetVisualizer.tsx b/frontend/src/components/MapView/MapDatasetVisualizer.tsx
@@ -13,6 +13,7 @@ import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 import { MapPin } from "@phosphor-icons/react";
 import { Dataset } from "../../types/DatasetTypes";
+import { MarkersTypes } from "../../types/MarkersTypes";
 
 interface MapDatasetVisualizerProps {
   dataset: Dataset;
@@ -89,19 +90,52 @@ const MapDatasetVisualizer: React.FC<MapDatasetVisualizerProps> = ({
   );
 
   useEffect(() => {
-    if (!geoData) return;
+    // Check if data has been fetched
+    if (!geoData || !dataset.metaData) return;
+    // Check if dataset type is none
+    if (dataset.metaData.type === MarkersTypes.None) {
+      return;
+    }
+    // For Areas type datasets
+    else if (dataset.metaData.type === MarkersTypes.Areas) {
+      // Check if the zoom level is above the markers threshold
+      // If yes, display markers instead of polygons
+      if (currentMapCache.zoom > dataset.metaData.markersThreshold) {
+        console.log("pol");
+        // Add the polygons to the map
+        try {
+          const geojsonLayer = L.geoJson(geoData);
+          geojsonLayer.addTo(map);
+          return () => {
+            map.removeLayer(geojsonLayer);
+          };
+        } catch (error) {
+          console.error("Error adding GeoJSON layer to the map:", error);
+        }
+      } else {
+        console.log("mark");
+        // Add the markers to the map instead
+        const geojsonLayer = L.geoJson(geoData, {
+          pointToLayer: function (_feature, latlng) {
+            return L.marker(latlng, {
+              icon: dataset.metaData
+                ? createDivIcon(dataset.metaData.icon)
+                : divIcondefault,
+            });
+          },
+
+          style: { fillOpacity: 0.1 },
+        });
+        const markerClusterGroup = L.markerClusterGroup();
 
-    if (dataset.id === "house_footprints") {
-      try {
-        const geojsonLayer = L.geoJson(geoData);
-        geojsonLayer.addTo(map);
+        markerClusterGroup.addLayer(geojsonLayer);
+        map.addLayer(markerClusterGroup);
 
         return () => {
-          map.removeLayer(geojsonLayer);
+          map.removeLayer(markerClusterGroup);
         };
-      } catch (error) {
-        console.error("Error adding GeoJSON layer to the map:", error);
       }
+      // For Markers type datasets
     } else {
       const geojsonLayer = L.geoJson(geoData, {
         pointToLayer: function (_feature, latlng) {

diff --git a/frontend/src/types/DatasetTypes.tsx b/frontend/src/types/DatasetTypes.tsx
@@ -25,6 +25,7 @@ export interface DatasetMetaData {
   type: MarkersTypes;
   longDescription: string;
   minZoomLevel: number;
+  markersThreshold: number;
   displayProperty: string;
   tables: Table[];
 }