feat: remove panes, improve panning (#163)

jst-seminar-rostlab-tum · Jan 14, 2025 · 9dd2085 · 9dd2085
1 parent 6cccae0
commit 9dd2085
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -97,18 +97,31 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
       <ZoomControl threshold={SELECTED_COUNTRY_ZOOM_THRESHOLD} callback={onZoomThresholdReached} />
       <BackToGlobalButton />
 
+      {/* Ocean */}
       <Pane name="ocean" style={{ zIndex: 0 }}>
         <SVGOverlay bounds={oceanBounds}>
           <rect width="100%" height="100%" fill="hsl(var(--nextui-ocean))" />
         </SVGOverlay>
       </Pane>
-      <Pane name="countries_base" style={{ zIndex: 1 }}>
-        <LeafletGeoJSON
-          interactive={false}
-          data={MapOperations.convertCountriesToFeatureCollection(countries.features)}
-          style={countryBaseStyle}
-        />
-      </Pane>
+
+      {/* Countries */}
+      <LeafletGeoJSON
+        interactive={false}
+        data={MapOperations.convertCountriesToFeatureCollection(countries.features)}
+        style={countryBaseStyle}
+      />
+
+      {/* Country borders */}
+      <LeafletGeoJSON
+        data={MapOperations.convertCountriesToFeatureCollection(countries.features)}
+        style={countryBorderStyle}
+      />
+
+      {/* Disputed areas */}
+      <LeafletGeoJSON
+        data={MapOperations.convertCountriesToFeatureCollection(disputedAreas.features)}
+        style={disputedAreaStyle}
+      />
       {selectedMapType === GlobalInsight.FOOD && countries.features && (
         <>
           {countries.features.map((country) => (
@@ -122,7 +135,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
             />
           ))}
           {!selectedCountryId && (
-            <Pane name="fcs_raster" style={{ zIndex: 2 }}>
+            <Pane name="fcs_raster" style={{ zIndex: 401 }}>
               <TileLayer url="https://static.hungermapdata.org/proteus_tiles/{z}/{x}/{y}.png" tms />
             </Pane>
           )}
@@ -140,33 +153,20 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
         ))}
 
       {selectedMapType === GlobalInsight.VEGETATION && (
-        <Pane name="vegetation_raster" style={{ zIndex: 2 }}>
+        <Pane name="vegetation_raster" style={{ zIndex: 401 }}>
           <TileLayer url="https://dev.api.earthobservation.vam.wfp.org/tiles/latest/viq_dekad/{z}/{x}/{y}.png" />
         </Pane>
       )}
 
       {selectedMapType === GlobalInsight.RAINFALL && (
-        <Pane name="vegetation_raster" style={{ zIndex: 2 }}>
+        <Pane name="vegetation_raster" style={{ zIndex: 401 }}>
           <TileLayer url="https://dev.api.earthobservation.vam.wfp.org/tiles/latest/r3q_dekad/{z}/{x}/{y}.png" />
         </Pane>
       )}
 
       {selectedMapType === GlobalInsight.IPC && (
         <IpcChoropleth countries={countries} onDataUnavailable={onDataUnavailable} />
       )}
-
-      <Pane name="countries_border" style={{ zIndex: 3 }}>
-        <LeafletGeoJSON
-          data={MapOperations.convertCountriesToFeatureCollection(countries.features)}
-          style={countryBorderStyle}
-        />
-      </Pane>
-      <Pane name="disputed_areas" style={{ zIndex: 4 }}>
-        <LeafletGeoJSON
-          data={MapOperations.convertCountriesToFeatureCollection(disputedAreas.features)}
-          style={disputedAreaStyle}
-        />
-      </Pane>
     </MapContainer>
   );
 }
diff --git a/src/operations/map/FcsChoroplethOperations.ts b/src/operations/map/FcsChoroplethOperations.ts
@@ -30,7 +30,7 @@ class FcsChoroplethOperations {
     const pathLayer = layer as L.Path;
 
     pathLayer.on({
-      click: async () => {
+      click: () => {
         if (this.checkIfActive(feature as CountryMapData, fcsData)) {
           FcsChoroplethOperations.handleCountryClick(feature, setSelectedCountryId);
           document.getElementsByClassName('leaflet-container').item(0)?.classList.remove('interactive');