diff --git a/frontend/src/components/map/attributions/index.tsx b/frontend/src/components/map/attributions/index.tsx index f62731c9..7c6f3176 100644 --- a/frontend/src/components/map/attributions/index.tsx +++ b/frontend/src/components/map/attributions/index.tsx @@ -19,7 +19,7 @@ const Attributions: FC = () => { $in: activeLayers, }, }, - populate: 'metadata', + populate: 'metadata,environment', }, { query: { diff --git a/frontend/src/containers/map/content/map/layer-manager/item.tsx b/frontend/src/containers/map/content/map/layer-manager/item.tsx index da53b447..dfa1723f 100644 --- a/frontend/src/containers/map/content/map/layer-manager/item.tsx +++ b/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); diff --git a/frontend/src/containers/map/content/map/popup/generic/index.tsx b/frontend/src/containers/map/content/map/popup/generic/index.tsx index 329d9501..71dadfa3 100644 --- a/frontend/src/containers/map/content/map/popup/generic/index.tsx +++ b/frontend/src/containers/map/content/map/popup/generic/index.tsx @@ -35,7 +35,7 @@ const GenericPopup: FCWithMessages = ({ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore locale, - populate: 'metadata', + populate: 'metadata,environment', }, { query: { diff --git a/frontend/src/containers/map/content/map/popup/item.tsx b/frontend/src/containers/map/content/map/popup/item.tsx index c6e32108..63e78cd2 100644 --- a/frontend/src/containers/map/content/map/popup/item.tsx +++ b/frontend/src/containers/map/content/map/popup/item.tsx @@ -23,7 +23,7 @@ const PopupItem: FCWithMessages = ({ 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; diff --git a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx index c3e470c9..645e988f 100644 --- a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx +++ b/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: { diff --git a/frontend/src/containers/map/content/map/popup/regions/index.tsx b/frontend/src/containers/map/content/map/popup/regions/index.tsx index 03ca47ee..409b605a 100644 --- a/frontend/src/containers/map/content/map/popup/regions/index.tsx +++ b/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,7 +104,7 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => { }, environment: { slug: { - $eq: 'marine', + $eq: environment.slug, }, }, }, @@ -110,7 +112,14 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => { // @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 (

{localizedLocationName || '-'}

@@ -198,7 +210,11 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => { {!isFetching && !!protectionCoverageStats && ( <>
-
{t('marine-conservation-coverage')}
+
+ {environment?.slug === 'marine' + ? t('marine-conservation-coverage') + : t('terrestrial-conservation-coverage')} +
{formattedStats.percentage !== '-' && t.rich('percentage-bold', { @@ -217,10 +233,7 @@ const RegionsPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
{t('marine-protected-area', { protectedArea: formattedStats.protectedArea, - totalArea: formatKM( - locale, - Number(protectionCoverageStats?.location.data.attributes.total_marine_area) - ), + totalArea: formatKM(locale, Number(totalLocationArea)), })}
diff --git a/frontend/translations/en.json b/frontend/translations/en.json index 78efa932..b47081f5 100644 --- a/frontend/translations/en.json +++ b/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": "{percentage}%", "marine-protected-area": "{protectedArea} km² out of {totalArea} km²",