[TM-1634] add landscape borders and titles (#853)

wri · Jan 29, 2025 · 562bddb · 562bddb
1 parent 422bd00
commit 562bddb
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 8 deletions.
diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx
@@ -58,6 +58,7 @@ import ViewImageCarousel from "./MapControls/ViewImageCarousel";
 import { ZoomControl } from "./MapControls/ZoomControl";
 import {
   addBorderCountry,
+  addBorderLandscape,
   addDeleteLayer,
   addFilterOnLayer,
   addGeojsonToDraw,
@@ -67,6 +68,7 @@ import {
   addSourcesToLayers,
   drawTemporaryPolygon,
   removeBorderCountry,
+  removeBorderLandscape,
   removeMediaLayer,
   removePopups,
   startDrawing,
@@ -121,6 +123,7 @@ interface MapProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
   listViewProjects?: any;
   role?: any;
   selectedCountry?: string | null;
+  selectedLandscapes?: string[];
   setLoader?: (value: boolean) => void;
   setIsLoadingDelayedJob?: (value: boolean) => void;
   isLoadingDelayedJob?: boolean;
@@ -172,7 +175,16 @@ export const MapContainer = ({
   const [sourcesAdded, setSourcesAdded] = useState<boolean>(false);
   const [viewImages, setViewImages] = useState(false);
   const [currentStyle, setCurrentStyle] = useState(MapStyle.Satellite);
-  const { polygonsData, bbox, setPolygonFromMap, polygonFromMap, sitePolygonData, selectedCountry, setLoader } = props;
+  const {
+    polygonsData,
+    bbox,
+    setPolygonFromMap,
+    polygonFromMap,
+    sitePolygonData,
+    selectedCountry,
+    selectedLandscapes,
+    setLoader
+  } = props;
   const context = useSitePolygonData();
   const contextMapArea = useMapAreaContext();
   const dashboardContext = useDashboardContext();
@@ -311,6 +323,23 @@ export const MapContainer = ({
       });
     }
   }, [selectedCountry, styleLoaded, sourcesAdded]);
+  useEffect(() => {
+    if (!map.current || !sourcesAdded) return;
+    const setupBorders = () => {
+      if (selectedLandscapes && selectedLandscapes.length > 0) {
+        addBorderLandscape(map.current, selectedLandscapes);
+      } else {
+        removeBorderLandscape(map.current);
+      }
+    };
+    if (map.current.isStyleLoaded()) {
+      setupBorders();
+    } else {
+      map.current.once("render", () => {
+        setupBorders();
+      });
+    }
+  }, [selectedLandscapes, styleLoaded, sourcesAdded]);
   useEffect(() => {
     const projectUUID = router.query.uuid as string;
     const isProjectPath = router.isReady && router.asPath.includes("project");

diff --git a/src/components/elements/Map-mapbox/utils.ts b/src/components/elements/Map-mapbox/utils.ts
@@ -704,6 +704,10 @@ export const setFilterCountry = (map: mapboxgl.Map, layerName: string, country:
   const filter = ["==", ["get", "iso"], country];
   map.setFilter(layerName, filter);
 };
+export const setFilterLandscape = (map: mapboxgl.Map, layerName: string, landscapes: string[]) => {
+  const filter = ["in", ["get", "landscape"], ["literal", landscapes]];
+  map.setFilter(layerName, filter);
+};
 export const addBorderCountry = (map: mapboxgl.Map, country: string) => {
   if (!country || !map) return;
 
@@ -732,6 +736,43 @@ export const addBorderCountry = (map: mapboxgl.Map, country: string) => {
   } as mapboxgl.AnyLayer);
   setFilterCountry(map, sourceName, country);
 };
+export const addBorderLandscape = (map: mapboxgl.Map, landscapes: string[]) => {
+  if (!landscapes || !map) return;
+
+  const styleName = `${LAYERS_NAMES.LANDSCAPES}`;
+  const landscapeLayer = layersList.find(layer => layer.name === styleName);
+  if (!landscapeLayer) return;
+  const countryStyles = landscapeLayer.styles || [];
+  const sourceName = landscapeLayer.name;
+  const GEOSERVER_TILE_URL = getGeoserverURL(landscapeLayer.geoserverLayerName);
+
+  if (!map.getSource(sourceName)) {
+    map.addSource(sourceName, {
+      type: "vector",
+      tiles: [GEOSERVER_TILE_URL]
+    });
+  }
+  if (map.getLayer(sourceName)) {
+    map.removeLayer(sourceName);
+  }
+  const style = countryStyles[0];
+  map.addLayer({
+    ...style,
+    id: sourceName,
+    source: sourceName,
+    "source-layer": landscapeLayer.geoserverLayerName
+  } as mapboxgl.AnyLayer);
+  setFilterLandscape(map, sourceName, landscapes);
+};
+export const removeBorderLandscape = (map: mapboxgl.Map) => {
+  const layerName = `${LAYERS_NAMES.LANDSCAPES}`;
+  if (map.getLayer(layerName)) {
+    map.removeLayer(layerName);
+  }
+  if (map.getSource(layerName)) {
+    map.removeSource(layerName);
+  }
+};
 
 export const removeBorderCountry = (map: mapboxgl.Map) => {
   const layerName = `${LAYERS_NAMES.WORLD_COUNTRIES}-line`;

diff --git a/src/constants/layers.ts b/src/constants/layers.ts
@@ -9,7 +9,8 @@ export const LAYERS_NAMES = {
   POLYGON_GEOMETRY: "polygon_geometry",
   MEDIA_IMAGES: "media_images",
   DELETED_GEOMETRIES: "deleted_geometries",
-  CENTROIDS: "centroids"
+  CENTROIDS: "centroids",
+  LANDSCAPES: "landscape_geom"
 };
 export const layersList: LayerType[] = [
   {
@@ -184,6 +185,21 @@ export const layersList: LayerType[] = [
     ],
     hover: false
   },
+  {
+    geoserverLayerName: LAYERS_NAMES.LANDSCAPES,
+    name: `${LAYERS_NAMES.LANDSCAPES}`,
+    styles: [
+      {
+        type: "line",
+        layout: {},
+        paint: {
+          "line-color": "#F0AD11",
+          "line-width": 2
+        }
+      }
+    ],
+    hover: false
+  },
   {
     name: LAYERS_NAMES.CENTROIDS,
     geoserverLayerName: "",

diff --git a/src/pages/dashboard/components/ContentOverview.tsx b/src/pages/dashboard/components/ContentOverview.tsx
@@ -78,12 +78,16 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
   const { openModal, closeModal, setModalLoading } = useModalContext();
   const { filters, setFilters, dashboardCountries } = useDashboardContext();
   const [selectedCountry, setSelectedCountry] = useState<string | undefined>(undefined);
+  const [selectedLandscapes, setSelectedLandscapes] = useState<string[] | undefined>(undefined);
   const [dashboardMapLoaded, setDashboardMapLoaded] = useState(false);
   const [modalMapLoaded, setModalMapLoaded] = useState(false);
 
   useEffect(() => {
     setSelectedCountry(filters.country.country_slug);
   }, [filters.country]);
+  useEffect(() => {
+    setSelectedLandscapes(filters.landscapes || []);
+  }, [filters.landscapes]);
   const [currentBbox, setCurrentBbox] = useState<BBox | undefined>(initialBbox);
   useEffect(() => {
     if (initialBbox) {
@@ -143,6 +147,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
               showImagesButton={showImagesButton}
               bbox={dashboardBbox}
               selectedCountry={selectedCountry}
+              selectedLandscapes={selectedLandscapes}
               setLoader={setModalMapLoaded}
             />
           </LoadingContainerOpacity>
@@ -242,6 +247,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
               bbox={currentBbox}
               selectedCountry={selectedCountry}
               setLoader={setDashboardMapLoaded}
+              selectedLandscapes={selectedLandscapes}
             />
           </LoadingContainerOpacity>
           <div className="z[1] absolute bottom-8 left-6 grid gap-2 rounded-lg bg-white px-4 py-2">

diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
@@ -292,17 +292,38 @@ const Dashboard = () => {
     <div className="mb-4 mr-2 mt-4 flex flex-1 flex-wrap gap-4 overflow-y-auto overflow-x-hidden bg-neutral-70 pl-4 pr-2 small:flex-nowrap">
       <div className="overflow-hiden mx-auto w-full max-w-[730px] small:w-1/2 small:max-w-max">
         <PageRow className="gap-4 p-0">
-          <When condition={filters.country.id !== 0 && !filters.uuid}>
+          <When condition={(filters.country.id !== 0 || filters.landscapes.length > 0) && !filters.uuid}>
             <div className="flex items-center gap-2">
-              <Text variant="text-14-light" className="uppercase text-black ">
+              <Text variant="text-14-light" className="uppercase text-black">
                 {t("results for:")}
               </Text>
-              <img src={filters.country?.data.icon} alt="flag" className="h-6 w-10 min-w-[40px] object-cover" />
-              <Text variant="text-24-semibold" className="text-black">
-                {t(filters.country?.data.label)}
-              </Text>
+
+              <When condition={filters.country.id !== 0 && filters.landscapes.length === 0 && !filters.uuid}>
+                <img src={filters.country?.data.icon} alt="flag" className="h-6 w-10 min-w-[40px] object-cover" />
+                <Text variant="text-24-semibold" className="text-black">
+                  {t(filters.country?.data.label)}
+                </Text>
+              </When>
+
+              <When condition={filters.landscapes.length === 1 && filters.country.id === 0 && !filters.uuid}>
+                <Text variant="text-24-semibold" className="text-black">
+                  {filters.landscapes[0]}
+                </Text>
+              </When>
+
+              <When
+                condition={
+                  (filters.landscapes.length > 1 && filters.country.id === 0) ||
+                  (filters.landscapes.length > 0 && filters.country.id !== 0)
+                }
+              >
+                <Text variant="text-24-semibold" className="text-black">
+                  {filters.country.id === 0 ? t("Multiple Landscapes") : t("Multiple Countries/Landscapes")}
+                </Text>
+              </When>
             </div>
           </When>
+
           <When condition={filters.uuid}>
             <div>
               <DashboardBreadcrumbs