Change the bounds when changing tab

frontend/src/containers/map/sidebar/main-panel/panels/details/index.tsx

@@ -2,16 +2,22 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useRouter } from 'next/router';
 
+import { BBox } from '@turf/turf';
+import { useAtom } from 'jotai';
 import { useLocale, useTranslations } from 'next-intl';
 
+import { CustomMapProps } from '@/components/map/types';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { PAGES } from '@/constants/pages';
 import { useMapSearchParams } from '@/containers/map/content/map/sync-settings';
+import { bboxLocationAtom } from '@/containers/map/store';
 import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 import useScrollPosition from '@/hooks/use-scroll-position';
 import { cn } from '@/lib/classnames';
+import { combineBoundingBoxes } from '@/lib/utils/geo';
 import { FCWithMessages } from '@/types';
 import { useGetLocations } from '@/types/generated/location';
+import { Location } from '@/types/generated/strapi.schemas';
 
 import LocationSelector from '../../location-selector';
 
@@ -35,13 +41,23 @@ const SidebarDetails: FCWithMessages = () => {
   const searchParams = useMapSearchParams();
 
   const [{ tab }, setSettings] = useSyncMapContentSettings();
+  const [, setLocationBBox] = useAtom(bboxLocationAtom);
 
   const { data: locationsData } = useGetLocations({
     locale,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    fields: ['name', 'name_es', 'name_fr', 'marine_bounds', 'terrestrial_bounds'],
     filters: {
       code: locationCode,
     },
-    populate: 'members',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    populate: {
+      members: {
+        fields: ['code', 'name', 'name_es', 'name_fr'],
+      },
+    },
   });
 
   const locationNameField = useMemo(() => {
@@ -55,6 +71,25 @@ const SidebarDetails: FCWithMessages = () => {
     return res;
   }, [locale]);
 
+  const locationBounds = useMemo(() => {
+    const { terrestrial_bounds, marine_bounds } =
+      locationsData?.data[0]?.attributes ?? ({} as Location);
+
+    if (tab === 'terrestrial') {
+      return terrestrial_bounds;
+    }
+
+    if (tab === 'marine') {
+      return marine_bounds;
+    }
+
+    if (terrestrial_bounds === undefined || marine_bounds === undefined) {
+      return null;
+    }
+
+    return combineBoundingBoxes(terrestrial_bounds as BBox, marine_bounds as BBox);
+  }, [locationsData, tab]);
+
   const memberCountries = useMemo(() => {
     return locationsData?.data[0]?.attributes?.members?.data?.map(({ attributes }) => ({
       code: attributes?.code,
@@ -80,6 +115,13 @@ const SidebarDetails: FCWithMessages = () => {
     containerRef.current?.scrollTo({ top: 0 });
   }, [tab, locationCode]);
 
+  // Zoom the map to the location's bounds (terrestrial bounds, marine bounds or both)
+  useEffect(() => {
+    if (locationBounds) {
+      setLocationBBox(locationBounds as CustomMapProps['bounds']['bbox']);
+    }
+  }, [setLocationBBox, locationBounds]);
+
   return (
     <Tabs value={tab} onValueChange={handleTabChange} className="flex h-full w-full flex-col">
       <div

frontend/src/lib/utils/geo.ts

@@ -0,0 +1,16 @@
+import { BBox } from '@turf/helpers';
+
+/**
+ * Combines two bounding boxes into a single bounding box that encompasses both
+ * @param bbox1 First bounding box [minLon, minLat, maxLon, maxLat]
+ * @param bbox2 Second bounding box [minLon, minLat, maxLon, maxLat]
+ * @returns Combined bounding box
+ */
+export const combineBoundingBoxes = (bbox1: BBox, bbox2: BBox): BBox => {
+  return [
+    Math.min(bbox1[0], bbox2[0]),
+    Math.min(bbox1[1], bbox2[1]),
+    Math.max(bbox1[2], bbox2[2]),
+    Math.max(bbox1[3], bbox2[3]),
+  ];
+};