From 853a38a62d34ae6d7c50c64b234c2ff06f192c9c Mon Sep 17 00:00:00 2001 From: Alvaro Leal Date: Tue, 25 Jul 2023 11:18:40 +0200 Subject: [PATCH] Add carbon marine layer --- src/constants/carbon-layer.js | 22 ++++++++++----- src/constants/category-layers-constants.js | 6 ++-- src/constants/layers-slugs.js | 1 + src/constants/layers-urls.js | 3 ++ src/constants/metadata.js | 2 ++ src/constants/mol-layers-configs.js | 8 ++++++ .../carbon-sidebar-card-component.jsx | 28 ++++++++++--------- .../carbon-sidebar-card-selectors.js | 16 +++++++---- 8 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/constants/carbon-layer.js b/src/constants/carbon-layer.js index 69eac5737..bd53bfff3 100644 --- a/src/constants/carbon-layer.js +++ b/src/constants/carbon-layer.js @@ -1,12 +1,20 @@ import { t } from '@transifex/native'; -import { CARBON_LAYER } from 'constants/layers-slugs'; +import { CARBON_LAYER, MARINE_CARBON_LAYER } from 'constants/layers-slugs'; -export const getCarbonLayer = () => { +export const getCarbonLayers = () => { const CARBON_LAYER_LABEL = t('Irrecoverable land carbon'); - return { - name: CARBON_LAYER_LABEL, - value: CARBON_LAYER, - slug: CARBON_LAYER, - }; + const MARINE_CARBON_LAYER_LABEL = t('Irrecoverable marine carbon'); + return [ + { + name: CARBON_LAYER_LABEL, + value: CARBON_LAYER, + slug: CARBON_LAYER, + }, + { + name: MARINE_CARBON_LAYER_LABEL, + value: MARINE_CARBON_LAYER, + slug: MARINE_CARBON_LAYER, + }, + ]; }; diff --git a/src/constants/category-layers-constants.js b/src/constants/category-layers-constants.js index 2e720ba3e..5c8da5088 100644 --- a/src/constants/category-layers-constants.js +++ b/src/constants/category-layers-constants.js @@ -1,5 +1,5 @@ import { getLayersToggleConfig as getBiodiversityLayers } from 'constants/biodiversity-layers-constants'; -import { getCarbonLayer } from 'constants/carbon-layer'; +import { getCarbonLayers } from 'constants/carbon-layer'; import { getHumanPressuresLandUse, getHumanPressuresMarine, @@ -24,13 +24,13 @@ const getCategoryLayers = () => { getHumanPressuresMarine() ); const allHumanImpactLayers = Object.values(humanImpactLayers); - const carbonLayer = getCarbonLayer(); + const carbonLayers = getCarbonLayers(); return [ ...allBiodiversityLayers, ...allProtectionLayers, ...allHumanImpactLayers, - carbonLayer, + ...carbonLayers, ].map((layer) => ({ title: layer.value })); }; diff --git a/src/constants/layers-slugs.js b/src/constants/layers-slugs.js index b9d368ea8..afbce1c57 100644 --- a/src/constants/layers-slugs.js +++ b/src/constants/layers-slugs.js @@ -92,6 +92,7 @@ export const PRIORITY_POLYGONS_GRAPHIC_LAYER = // Carbon Layer export const CARBON_LAYER = 'carbon-layer-land'; +export const MARINE_CARBON_LAYER = 'carbon-layer-marine'; // Global biodiversity diff --git a/src/constants/layers-urls.js b/src/constants/layers-urls.js index af8117dd8..fd288cbf1 100644 --- a/src/constants/layers-urls.js +++ b/src/constants/layers-urls.js @@ -17,6 +17,7 @@ import { TERRESTRIAL_PROTECTED_AREAS_TILE_LAYER, COMMUNITY_AREAS_VECTOR_TILE_LAYER, CARBON_LAYER, + MARINE_CARBON_LAYER, HALF_EARTH_FUTURE_WDPA_LAYER, HALF_EARTH_FUTURE_TILE_LAYER, SPECIFIC_REGIONS_TILE_LAYER, @@ -189,6 +190,8 @@ export const LAYERS_URLS = { // Carbon layer [CARBON_LAYER]: 'https://tiles.arcgis.com/tiles/IkktFdUAcY3WrH25/arcgis/rest/services/Carbon_Total_2018/MapServer', + [MARINE_CARBON_LAYER]: + 'https://tiles.arcgis.com/tiles/IkktFdUAcY3WrH25/arcgis/rest/services/Mean_Marine_Carbon_Stock/MapServer', // Protected areas WDPA [PROTECTED_AREAS_VECTOR_TILE_LAYER]: diff --git a/src/constants/metadata.js b/src/constants/metadata.js index ab80cf21a..1cc89d5eb 100644 --- a/src/constants/metadata.js +++ b/src/constants/metadata.js @@ -60,6 +60,7 @@ import { TERRESTRIAL_PROTECTED_AREAS_TILE_LAYER, MARINE_PROTECTED_AREAS_VECTOR_TILE_LAYER, CARBON_LAYER, + MARINE_CARBON_LAYER, } from 'constants/layers-slugs'; export const SPECIES_PROTECTION_INDEX = 'spi-def'; @@ -75,6 +76,7 @@ export { export default { [ALL_TAXA_PRIORITY]: ALL_TAXA_PRIORITY, [CARBON_LAYER]: CARBON_LAYER, + [MARINE_CARBON_LAYER]: MARINE_CARBON_LAYER, [CHALLENGES_CHART]: CHALLENGES_CHART, [RANKING_CHART]: RANKING_CHART, [SPECIES_PROTECTION_INDEX]: SPECIES_PROTECTION_INDEX, diff --git a/src/constants/mol-layers-configs.js b/src/constants/mol-layers-configs.js index 8a53a641d..1ae1691ed 100644 --- a/src/constants/mol-layers-configs.js +++ b/src/constants/mol-layers-configs.js @@ -15,6 +15,7 @@ import { SATELLITE_BASEMAP_LAYER, FIREFLY_BASEMAP_LAYER, CARBON_LAYER, + MARINE_CARBON_LAYER, PRIORITY_PLACES_POLYGONS, PROTECTED_AREAS_VECTOR_TILE_LAYER, TERRESTRIAL_PROTECTED_AREAS_TILE_LAYER, @@ -839,6 +840,13 @@ export const layersConfig = { url: LAYERS_URLS[CARBON_LAYER], bbox: null, }, + [MARINE_CARBON_LAYER]: { + title: MARINE_CARBON_LAYER, + slug: MARINE_CARBON_LAYER, + type: LAYER_TYPES.TILE_LAYER, + url: LAYERS_URLS[MARINE_CARBON_LAYER], + bbox: null, + }, }; export const BIODIVERSITY_LAYERS_COLOUR_RAMP = [ diff --git a/src/containers/sidebars/map-layers/carbon-sidebar-card/carbon-sidebar-card-component.jsx b/src/containers/sidebars/map-layers/carbon-sidebar-card/carbon-sidebar-card-component.jsx index 220847559..5bffd05d7 100644 --- a/src/containers/sidebars/map-layers/carbon-sidebar-card/carbon-sidebar-card-component.jsx +++ b/src/containers/sidebars/map-layers/carbon-sidebar-card/carbon-sidebar-card-component.jsx @@ -14,7 +14,7 @@ import LayerToggle from 'components/layer-toggle'; import SourceAnnotation from 'components/source-annotation'; // Constants -import { getCarbonLayer } from 'constants/carbon-layer'; +import { getCarbonLayers } from 'constants/carbon-layer'; import { CARBON_LAYER } from 'constants/layers-slugs'; // Hooks @@ -37,7 +37,7 @@ function CarbonSidebarCardComponent({ const t = useT(); const locale = useLocale(); - const carbonLayer = useMemo(() => getCarbonLayer(), [locale]); + const carbonLayers = useMemo(() => getCarbonLayers(), [locale]); const texts = { categoryTitle: t('Carbon'), description: t( @@ -70,17 +70,19 @@ function CarbonSidebarCardComponent({ className={styles.legendContainer} />
- handleLayerToggle(option, CARBON_LAYER)} - /> + {carbonLayers.map((carbonLayer) => ( + handleLayerToggle(option, CARBON_LAYER)} + /> + ))}
- getCarbonLayer() +const getComputedCarbonLayers = createSelector(selectLangUrlState, (locale) => + getCarbonLayers() ); export const getCarbonCountedActiveLayers = createSelector( - [(state, props) => props && props.activeLayers, getComputedCarbonLayer], - (activeLayers, carbonLayer) => { + [(state, props) => props && props.activeLayers, getComputedCarbonLayers], + (activeLayers, carbonLayers) => { if (!activeLayers || !activeLayers.length) return 0; return activeLayers .map((l) => l.title) - .reduce((acc, title) => (carbonLayer.value === title ? acc + 1 : acc), 0); + .reduce( + (acc, title) => + carbonLayers.map((l) => l.value).includes(title) ? acc + 1 : acc, + 0 + ); } );