Regions tooltip can now display information for terrestrial protection coverage stats

frontend/src/components/map/attributions/index.tsx

@@ -19,7 +19,7 @@ const Attributions: FC = () => {
           $in: activeLayers,
         },
       },
-      populate: 'metadata',
+      populate: 'metadata,environment',
     },
     {
       query: {

frontend/src/containers/map/content/map/layer-manager/item.tsx

@@ -25,7 +25,7 @@ const LayerManagerItem = ({ id, beforeId, settings }: LayerManagerItemProps) =>
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     locale,
-    populate: 'metadata',
+    populate: 'metadata,environment',
   });
   const [, setLayersInteractive] = useAtom(layersInteractiveAtom);
   const [, setLayersInteractiveIds] = useAtom(layersInteractiveIdsAtom);

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

@@ -35,7 +35,7 @@ const GenericPopup: FCWithMessages<InteractionConfig & { layerId: number }> = ({
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       locale,
-      populate: 'metadata',
+      populate: 'metadata,environment',
     },
     {
       query: {

frontend/src/containers/map/content/map/popup/item.tsx

@@ -23,7 +23,7 @@ const PopupItem: FCWithMessages<PopupItemProps> = ({ id }) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     locale,
-    populate: 'metadata',
+    populate: 'metadata,environment',
   });
 
   const attributes = data?.data?.attributes as LayerTyped;

frontend/src/containers/map/content/map/popup/protected-area/index.tsx

@@ -36,7 +36,7 @@ const ProtectedAreaPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) =>
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       locale,
-      populate: 'metadata',
+      populate: 'metadata,environment',
     },
     {
       query: {

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

@@ -32,6 +32,7 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);
 
   const layerQuery = useGetLayersId<{
+    environment: LayerTyped['environment']['data']['attributes'];
     source: LayerTyped['config']['source'];
     click: LayerTyped['interaction_config']['events'][0];
   }>(
@@ -40,12 +41,13 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       locale,
-      populate: 'metadata',
+      populate: 'metadata,environment',
     },
     {
       query: {
         select: ({ data }) => ({
-          source: (data.attributes as LayerTyped).config?.source,
+          environment: (data.attributes as LayerTyped)?.environment?.data?.attributes,
+          source: (data.attributes as LayerTyped)?.config?.source,
           click: (data.attributes as LayerTyped)?.interaction_config?.events.find(
             (ev) => ev.type === 'click'
           ),
@@ -54,7 +56,7 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
     }
   );
 
-  const { source } = layerQuery.data;
+  const { source, environment } = layerQuery.data;
 
   const DATA = useMemo(() => {
     if (source?.type === 'vector' && rendered && popup && map) {
@@ -102,15 +104,22 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
           },
           environment: {
             slug: {
-              $eq: 'marine',
+              $eq: environment.slug,
             },
           },
         },
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         populate: {
           location: {
-            fields: ['name', 'name_es', 'name_fr', 'code', 'total_marine_area'],
+            fields: [
+              'name',
+              'name_es',
+              'name_fr',
+              'code',
+              'total_marine_area',
+              'total_terrestrial_area',
+            ],
           },
         },
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -188,6 +197,9 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
 
   if (!DATA) return null;
 
+  const totalLocationArea =
+    protectionCoverageStats?.location.data.attributes[`total_${environment.slug}_area`];
+
   return (
     <div className="space-y-2">
       <h3 className="text-xl font-semibold">{localizedLocationName || '-'}</h3>
@@ -198,7 +210,11 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
       {!isFetching && !!protectionCoverageStats && (
         <>
           <div className="space-y-2">
-            <div className="my-4 max-w-[95%] font-mono">{t('marine-conservation-coverage')}</div>
+            <div className="my-4 max-w-[95%] font-mono">
+              {environment?.slug === 'marine'
+                ? t('marine-conservation-coverage')
+                : t('terrestrial-conservation-coverage')}
+            </div>
             <div className="space-x-1 font-mono tracking-tighter text-black">
               {formattedStats.percentage !== '-' &&
                 t.rich('percentage-bold', {
@@ -217,10 +233,7 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
             <div className="space-x-1 font-mono font-medium text-black">
               {t('marine-protected-area', {
                 protectedArea: formattedStats.protectedArea,
-                totalArea: formatKM(
-                  locale,
-                  Number(protectionCoverageStats?.location.data.attributes.total_marine_area)
-                ),
+                totalArea: formatKM(locale, Number(totalLocationArea)),
               })}
             </div>
           </div>

frontend/translations/en.json

@@ -253,6 +253,7 @@
       "no-data-available": "No data available",
       "no-results": "No results.",
       "marine-conservation-coverage": "Marine Conservation Coverage",
+      "terrestrial-conservation-coverage": "Terrestrial Conservation Coverage",
       "percentage": "{percentage}%",
       "percentage-bold": "<b1>{percentage}</b1><b2>%</b2>",
       "marine-protected-area": "{protectedArea} km² out of {totalArea} km²",