hi res info

src/containers/datasets/biomass/widget.tsx

@@ -50,9 +50,9 @@ const BiomassWidget = () => {
         <Loading visible={isFetching} iconClassName="flex w-10 h-10 m-auto my-10" />
         {isAnalysisRunning && isFetching && !isCanceled && (
           <button
-            aria-label="Cancel analysis"
+            aria-label="cancel analysis"
             type="button"
-            onClick={handleCancelAnalysis}
+            onClick={() => void handleCancelAnalysis()}
             className="rounded-2xl bg-brand-800 px-6 py-1 text-sm text-white active:ring-2 active:ring-inset active:ring-brand-600"
           >
             Cancel analysis

src/containers/datasets/contextual-layers/hi-res-extent/info.mdx

@@ -4,8 +4,24 @@ import LayoutMdx from 'layouts/mdx';
 
 ## Overview:
 
+To enable improvevement of the resolution and local relevance of Global Mangrove Watch data, a new baseline layer has been created for the year 2020. Using Copernicus Sentinel-2 satellite imagery, processed to a pixel resolution of 10 m, the mangrove extent has been completely remapped and revised with many areas which were not previously mapped now included within the new map. This has increased the spatial resolution of the mapping from a pixel resolution of 25 m to 10 m, allowing finer features to be mapped, such as fringing and riverine mangroves.
+
+Using the same pre-processed Sentinel-2 data as used for the ESA WorldCover 2020 map (Zanaga et al., 2021), over 30,000 machine learning models were trained to classify mangroves using over 5 million reference points for mangrove and non-mangrove classes. The reference points were generated using the existing CoastTrain reference dataset (Murray et al., 2022), sampling from the GMW v3.0 mangrove extent layers, user feedback and extensive quality assurance and refinement during the production of the classification.
+
+## References:
+
+- Zanaga, D., Van De Kerchove, R., De Keersmaecker, W., Souverijns, N., Brockmann, C., Quast, R., Wevers, J., Grosu, A., Paccini, A., Vergnaud, S., Cartus, O., Santoro, M., Fritz, S., Georgieva, I., Lesiv, M., Carter, S., Herold, M., Li, Linlin, Tsendbazar, N.E., Ramoino, F., Arino, O., 2021. ESA WorldCover 10 m 2020 v100. <a href="https://doi.org/10.5281/zenodo.5571936" target="_blank" rel="noopener noreferrer">https://doi.org/10.5281/zenodo.5571936</a>
+
+- Murray, N.J.; Bunting, P.; Canto, R.F.; Hilarides, L.; Kennedy, E.V.; Lucas, R.M.; Lyons, M.B.; Navarro, A.; Roelfsema, C.M.; Rosenqvist, A.; et al. coastTrain: A Global Reference Library for Coastal Ecosystems. Remote Sens. 2022, 14, 5766. <a href="https://doi.org/10.3390/rs14225766" target="_blank" rel="noopener noreferrer">https://doi.org/10.3390/rs14225766</a>
+
 ## Date of content:
 
+2020
+
 ## License:
 
+<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">
+  CC-BY 4.0
+</a>
+
 export default ({ children, ...props }) => <LayoutMdx {...props}>{children}</LayoutMdx>;

src/containers/datasets/fisheries/map-legend.tsx

@@ -13,7 +13,7 @@ const FisheriesMapLegend = () => {
               className="my-0.5 mr-2.5 h-4 w-2 shrink-0 rounded-md text-sm"
             />
             <div className="flex flex-col items-start text-sm">
-              <p>{label}</p>
+              <p>{label} fisher days/km/year</p>
             </div>
           </div>
         );

src/containers/datasets/habitat-extent/download.tsx

@@ -11,7 +11,13 @@ const INFO = [
     title: 'JAXA (raster data)',
     href: 'https://www.eorc.jaxa.jp/ALOS/en/dataset/gmw_e.htm',
   },
+  {
+    id: 3,
+    title: 'High-resolution 2020 extent: Zenodo',
+    href: 'https://zenodo.org/records/12756047',
+  },
 ];
+
 const HabitatExtentDownload = () => <Download info={INFO} />;
 
 export default HabitatExtentDownload;

src/containers/datasets/habitat-extent/widget.tsx

@@ -195,7 +195,7 @@ const HabitatExtent = () => {
               name="High Resolution Extent"
               thumbSource="/images/thumbs/basemaps/hi-res-extent.jpg"
               id="hi-res-extent"
-              description="We recommend you to use High resolution."
+              description="Show high-resolution mangrove extent layer"
             />
           </div>
         </div>

src/containers/datasets/index.tsx

@@ -203,7 +203,7 @@ export const MAP_LEGENDS = {
   mangrove_coastal_protection_area: FloodProtectionAreaMapLegend,
   mangrove_coastal_protection_population: FloodProtectionPopulationMapLegend,
   mangrove_coastal_protection_stock: FloodProtectionStockMapLegend,
-  mangrove_rest_sites: RestorationSitesMapLegend,
+  // mangrove_rest_sites: RestorationSitesMapLegend,
   mangrove_iucn_ecoregion: IUCNEcoregionsMapLegend,
   mangrove_national_dashboard_layer: NationalDashboardMapLegend,
 };

src/containers/datasets/protection/info.mdx

@@ -7,10 +7,11 @@ import LayoutMdx from 'layouts/mdx';
 This layer shows the area and proportion of mangroves in protected areas per country. The level of protection that protected ares afford to mangrove habitats varies, as does the degree to which they are effectively governed and managed.
 
 The extent of mangroves found in protected areas was calculated using three datasets:
+
 - World Database on Protected Areas (July 2022)
 - Global Mangrove Watch v3.0 for the year 2020
 - Country and Exclusive Economic Zone boundaries by UNEP-WCMC.
-The WDPA dataset was filtered for protected areas (PA_DEF = 1) excluding those with a "proposed" status (STATUS != Proposed). The remaining data was intersected with the Country-EEZ dataset and then dissolved by country. This dataset was used to clip the GMWv3.0 dataset and calculate the mangrove extent in protected areas. This number was divided by the total extent of mangroves for each country to get the proportions.
+  The WDPA dataset was filtered for protected areas (PA_DEF = 1) excluding those with a "proposed" status (STATUS != Proposed). The remaining data was intersected with the Country-EEZ dataset and then dissolved by country. This dataset was used to clip the GMWv3.0 dataset and calculate the mangrove extent in protected areas. This number was divided by the total extent of mangroves for each country to get the proportions.
 
 ## Reference:
 
@@ -24,11 +25,10 @@ Country-EEZ: not yet available
 
 ## License:
 
-cc-by-4.0
-
+<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">
+  CC-BY 4.0
+</a>
+
+export default ({ children, ...props }) => <LayoutMdx {...props}>{children}</LayoutMdx>;
 
-export default ({ children, ...props }) => (
-  <LayoutMdx {...props}>
-    {children}
-  </LayoutMdx>
-);
+;

src/containers/map/layer-manager/index.tsx

@@ -2,17 +2,22 @@ import { useMemo, useCallback } from 'react';
 
 import { Layer } from 'react-map-gl';
 
+import { useRouter } from 'next/router';
+
 import { activeLayersAtom } from 'store/layers';
 import { interactiveLayerIdsAtom } from 'store/map';
 
 import { useRecoilState } from 'recoil';
-import { useRouter } from 'next/router';
+
 import { LAYERS, BASEMAPS } from 'containers/datasets';
+import { LocationTypes } from 'containers/datasets/locations/types';
+import { NATIONAL_DASHBOARD_LOCATIONS } from 'containers/layers/constants';
+import { widgets } from 'containers/widgets/constants';
 
 import type { LayerProps } from 'types/layers';
+import type { WidgetTypes } from 'types/widget';
 import type { ContextualBasemapsId, WidgetSlugType } from 'types/widget';
 
-import { NATIONAL_DASHBOARD_LOCATIONS } from 'containers/layers/constants';
 const CountryBoundariesLayer = LAYERS['country-boundaries'];
 
 const LayerManagerContainer = () => {
@@ -37,12 +42,38 @@ const LayerManagerContainer = () => {
   } = useRouter();
   const id = params?.[1];
 
+  const locationType = params?.[0] || ('worldwide' as LocationTypes);
+
+  function filterLayersByLocationType(widgets: WidgetTypes[], locationType: string): string[] {
+    const filteredLayers: string[] = [];
+
+    widgets.forEach((widget) => {
+      if (widget.locationType.includes(locationType)) {
+        if (widget.layersIds) {
+          filteredLayers.push(...widget.layersIds);
+        }
+        if (widget.contextualLayersIds) {
+          filteredLayers.push(...widget.contextualLayersIds);
+        }
+        if (widget.subLayersIds) {
+          filteredLayers.push(...widget.subLayersIds);
+        }
+      }
+    });
+
+    return filteredLayers;
+  }
+
+  const filteredLayers = filterLayersByLocationType(widgets, locationType);
+
   // layers that act as basemap (such planet imagery or high resolution extent) must be always at the bottom
   const basemap_layers = ACTIVE_LAYERS.filter(
-    (layer) => layer.includes('planet') || layer === 'hi-res-extent'
+    (layer) =>
+      (layer.includes('planet') || layer === 'hi-res-extent') && filteredLayers.includes(layer)
   );
   const no_planet_layers = ACTIVE_LAYERS.filter(
-    (layer) => !layer.includes('planet') && layer !== 'hi-res-extent'
+    (layer) =>
+      !layer.includes('planet') && layer !== 'hi-res-extent' && filteredLayers.includes(layer)
   );
 
   const filterNationalDashboardLayers = !NATIONAL_DASHBOARD_LOCATIONS.includes(id)

src/containers/map/legend/index.tsx

@@ -11,10 +11,13 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { FaArrowDown, FaArrowUp } from 'react-icons/fa6';
 import { useRecoilState } from 'recoil';
 
+import { LocationTypes } from 'containers/datasets/locations/types';
 import { NATIONAL_DASHBOARD_LOCATIONS } from 'containers/layers/constants';
+import { widgets } from 'containers/widgets/constants';
 
 import SortableList from 'components/map/legend/sortable/list';
 import { ActiveLayers } from 'types/layers';
+import type { WidgetTypes } from 'types/widget';
 
 import LegendItem from './item';
 
@@ -25,6 +28,33 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
   } = useRouter();
   const id = params?.[1];
 
+  const locationType = params?.[0] || ('worldwide' as LocationTypes);
+
+  function filterLayersByLocationType(widgets: WidgetTypes[], locationType: string): string[] {
+    const filteredLayers: string[] = [];
+
+    widgets.forEach((widget) => {
+      if (widget.locationType.includes(locationType)) {
+        if (widget.layersIds) {
+          filteredLayers.push(...widget.layersIds);
+        }
+        if (widget.contextualLayersIds) {
+          filteredLayers.push(...widget.contextualLayersIds);
+        }
+        if (widget.subLayersIds) {
+          filteredLayers.push(...widget.subLayersIds);
+        }
+      }
+    });
+
+    return filteredLayers;
+  }
+
+  const filteredLayersIds = filterLayersByLocationType(widgets, locationType);
+  const filteredLayers = activeLayers.filter(({ id }) => {
+    return filteredLayersIds.includes(id);
+  }) as ActiveLayers[];
+
   const [isOpen, setIsOpen] = useState(false);
 
   const openLegend = useCallback(() => {
@@ -47,7 +77,9 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
   );
 
   // planet layers behave as a basemap so there is no need to include them in the legend
-  const activeLayerNoPlanet = activeLayers.filter((l) => !l.id.includes('planet'));
+  const activeLayerNoPlanet = filteredLayers.filter(
+    (l) => !l.id.includes('planet') && !l.id.includes('custom-area')
+  );
 
   const filterNationalDashboardLayers = !NATIONAL_DASHBOARD_LOCATIONS.includes(id)
     ? activeLayerNoPlanet.filter((l) => !l.id.includes('national_dashboard'))

src/containers/widgets/constants.ts

@@ -51,7 +51,7 @@ const widgets_prod = [
     applicability: 'Global, National, Sub-National, and Local',
     categoryIds: ['all_datasets', 'restoration_and_conservation', 'distribution_and_change'],
     layersIds: ['mangrove_alerts'],
-    contextualLayersIds: ['45d01564-c099-42d8-b8f2-a0851accf3e7'],
+    contextualLayersIds: [],
   },
   {
     name: 'Species Location by Country',
@@ -261,7 +261,7 @@ export const WIDGETS_BY_CATEGORY = [
   },
   {
     restoration_and_conservation: [
-      'mangrove_rest_sites',
+      // 'mangrove_rest_sites',
       'mangrove_habitat_extent',
       'mangrove_net_change',
       'mangrove_alerts',