Several fixes

frontend/src/components/map/constants.ts

@@ -1,7 +1,7 @@
 import type { ViewState } from 'react-map-gl';
 
 export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
-  zoom: 1,
+  zoom: 2,
   latitude: 0,
   longitude: 0,
 };

frontend/src/containers/map/content/map/index.tsx

@@ -204,12 +204,11 @@ const MainMap: React.FC = () => {
       <Map
         initialViewState={initialViewState}
         bounds={bounds}
-        interactiveLayerIds={layersInteractiveIds}
+        interactiveLayerIds={!drawState.active && !drawState.feature ? layersInteractiveIds : []}
         onClick={handleMapClick}
         onMoveEnd={handleMoveEnd}
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
-        renderWorldCopies={false}
         attributionControl={false}
         cursor={cursor}
       >

frontend/src/containers/map/sidebar/analysis/widget/index.tsx

@@ -118,8 +118,9 @@ const AnalysisWidget: React.FC = () => {
             title="Administrative boundary"
             tooltip={tooltips?.['administrativeBoundary']}
           />
-          <span className="font-mono text-xs font-bold underline">
-            {administrativeBoundaries?.[0]} +{administrativeBoundaries?.length - 1}
+          <span className="text-right font-mono text-xs font-bold underline">
+            {administrativeBoundaries?.[0]}{' '}
+            {administrativeBoundaries?.length > 1 && `+${administrativeBoundaries?.length - 1}`}
           </span>
         </div>
         <div className={cn(DEFAULT_ENTRY_CLASSNAMES)}>

frontend/src/containers/map/sidebar/details/index.tsx

@@ -14,25 +14,17 @@ const SidebarDetails: React.FC = () => {
   } = useRouter();
   const [{ showDetails }] = useSyncMapContentSettings();
 
-  const locationsQuery = useGetLocations(
-    {
-      filters: {
-        code: locationCode,
-      },
+  const { data: locationsData } = useGetLocations({
+    filters: {
+      code: locationCode,
     },
-    {
-      query: {
-        queryKey: ['locations', locationCode],
-        select: ({ data }) => data?.[0]?.attributes,
-      },
-    }
-  );
+  });
 
   return (
     <>
       <div className="h-full w-full overflow-y-scroll border-x border-black pb-12">
         <div className="border-b border-black px-4 pt-4 pb-2 md:px-8">
-          <h1 className="text-5xl font-black">{locationsQuery.data?.name}</h1>
+          <h1 className="text-5xl font-black">{locationsData.data[0]?.attributes?.name}</h1>
           <LocationSelector className="my-2" />
         </div>
         <DetailsWidgets />

frontend/src/containers/map/sidebar/details/widgets/establishment-stages/index.tsx

@@ -97,7 +97,9 @@ const EstablishmentStagesWidget: React.FC<EstablishmentStagesWidgetProps> = ({ l
       return {
         title: establishmentStage.name,
         slug: establishmentStage.slug,
-        background: `border-box #fff url(${PATTERNS[establishmentStage.slug]})`,
+        ...(PATTERNS[establishmentStage.slug] && {
+          background: `border-box #fff url(${PATTERNS[establishmentStage.slug]})`,
+        }),
         totalArea: location.totalMarineArea,
         protectedArea: establishmentStage.area,
         info: establishmentStage.info,

frontend/src/containers/map/sidebar/details/widgets/index.tsx

@@ -12,26 +12,18 @@ const MapWidgets: React.FC = () => {
     query: { locationCode },
   } = useRouter();
 
-  const locationsQuery = useGetLocations(
-    {
-      filters: {
-        code: locationCode,
-      },
+  const { data: locationsData } = useGetLocations({
+    filters: {
+      code: locationCode,
     },
-    {
-      query: {
-        queryKey: ['locations', locationCode],
-        select: ({ data }) => data?.[0]?.attributes,
-      },
-    }
-  );
+  });
 
   return (
     <div className="flex flex-col divide-y-[1px] divide-black font-mono">
-      <MarineConservationWidget location={locationsQuery.data} />
-      <ProtectionTypesWidget location={locationsQuery.data} />
-      <EstablishmentStagesWidget location={locationsQuery.data} />
-      <HabitatWidget location={locationsQuery.data} />
+      <MarineConservationWidget location={locationsData?.data[0]?.attributes} />
+      <ProtectionTypesWidget location={locationsData?.data[0]?.attributes} />
+      <EstablishmentStagesWidget location={locationsData?.data[0]?.attributes} />
+      <HabitatWidget location={locationsData?.data[0]?.attributes} />
     </div>
   );
 };

frontend/src/pages/map/[locationCode].tsx

@@ -4,30 +4,39 @@ import type { GetServerSideProps } from 'next';
 import Content from '@/containers/map/content';
 import Sidebar from '@/containers/map/sidebar';
 import Layout from '@/layouts/map';
-import { getLocations } from '@/types/generated/location';
-import { Location, LocationListResponseDataItem } from '@/types/generated/strapi.schemas';
+import { getGetLocationsQueryKey, getGetLocationsQueryOptions } from '@/types/generated/location';
+import { Location, LocationListResponse } from '@/types/generated/strapi.schemas';
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { query } = context;
   const { locationCode } = query;
 
   const queryClient = new QueryClient();
 
-  const { data: locationsData } = await getLocations({
-    filters: {
-      code: locationCode,
-    },
+  await queryClient.prefetchQuery({
+    ...getGetLocationsQueryOptions({
+      filters: {
+        code: locationCode,
+      },
+    }),
   });
 
-  if (!locationsData) return { notFound: true };
+  const locationsData = queryClient.getQueryData<LocationListResponse>(
+    getGetLocationsQueryKey({
+      filters: {
+        code: locationCode,
+      },
+    })
+  );
 
-  queryClient.setQueryData<{ data: LocationListResponseDataItem[] }>(['locations', locationCode], {
-    data: locationsData,
-  });
+  if (!locationsData || !locationsData.data) return { notFound: true };
 
   return {
     props: {
-      location: locationsData[0].attributes,
+      location: locationsData.data[0].attributes || {
+        code: 'GLOB',
+        name: 'Global',
+      },
       dehydratedState: dehydrate(queryClient),
     },
   };