Add carbon marine layer

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,
+    },
+  ];
 };

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 }));
 };
 

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
 

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]:

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,

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 = [

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}
         />
         <div className={styles.togglesContainer}>
-          <LayerToggle
-            key={carbonLayer.value}
-            map={map}
-            option={carbonLayer}
-            variant="light"
-            type="checkbox"
-            activeLayers={activeLayers}
-            themeCategorySlug={CARBON_LAYER}
-            theme={checkboxTheme.carbonLayer}
-            onChange={(option) => handleLayerToggle(option, CARBON_LAYER)}
-          />
+          {carbonLayers.map((carbonLayer) => (
+            <LayerToggle
+              key={carbonLayer.value}
+              map={map}
+              option={carbonLayer}
+              variant="light"
+              type="checkbox"
+              activeLayers={activeLayers}
+              themeCategorySlug={CARBON_LAYER}
+              theme={checkboxTheme.carbonLayer}
+              onChange={(option) => handleLayerToggle(option, CARBON_LAYER)}
+            />
+          ))}
         </div>
         <SourceAnnotation
           theme="light"

src/containers/sidebars/map-layers/carbon-sidebar-card/carbon-sidebar-card-selectors.js

@@ -2,21 +2,25 @@ import { createSelector, createStructuredSelector } from 'reselect';
 
 import { selectLangUrlState } from 'selectors/location-selectors';
 
-import { getCarbonLayer } from 'constants/carbon-layer';
+import { getCarbonLayers } from 'constants/carbon-layer';
 
 // locale is here to recompute the data when the language changes
 // eslint-disable-next-line no-unused-vars
-const getComputedCarbonLayer = createSelector(selectLangUrlState, (locale) =>
-  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
+      );
   }
 );