restoration layer

Vizzuality · Apr 23, 2024 · 287d730 · 287d730
1 parent c795bae
commit 287d730
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 57 deletions.
diff --git a/src/containers/datasets/alerts/hooks.tsx b/src/containers/datasets/alerts/hooks.tsx
@@ -208,7 +208,7 @@ export function useAlerts<T>(
 
   return useMemo(() => {
     const alertsTotal = getTotal(dataFiltered);
-    const dataLimitOverflow = dataFiltered.length > 16;
+    const dataLimitOverflow = dataFiltered.length > 12;
 
     const config = {
       data: chartData,
@@ -234,7 +234,7 @@ export function useAlerts<T>(
       xAxis: {
         tick: TickSmall,
         ...(dataLimitOverflow && { ticks: Array.from(new Set(chartData.map((d) => d.year))) }),
-        interval: dataLimitOverflow ? 'preserveStartEnd' : 0,
+        interval: dataLimitOverflow ? 0 : 'preserveStart',
         type: 'category',
       },
       yAxis: {

diff --git a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx
@@ -24,7 +24,7 @@ const MangrovesProtectedAreasLayer = ({ beforeId, id, onAdd, onRemove }: LayerPr
     const ids = LAYERS.map((layer) => layer.id);
     onAdd(ids);
     return () => onRemove(ids);
-  }, [onAdd, onRemove]);
+  }, [onAdd, onRemove, LAYERS]);
 
   if (!SOURCE || !LAYERS) return null;
   return (

diff --git a/src/containers/datasets/index.tsx b/src/containers/datasets/index.tsx
@@ -131,7 +131,7 @@ export const WIDGETS: WidgetsCollection = {
   mangrove_international_status: InternationalStatusWidget,
   mangrove_carbon_market_potential: CarbonMarketPotentialWidget,
   mangrove_emissions_mitigation: EmissionsMitigationWidget,
-  mangrove_restoration_sites: RestorationSitesWidget,
+  mangrove_rest_sites: RestorationSitesWidget,
   mangrove_restoration: RestorationWidget,
   mangrove_national_dashboard: NationalDashboardWidget,
   mangrove_flood_protection: FloodProtectionWidget,
@@ -164,7 +164,7 @@ export const LAYERS = {
   // contextual layers
   'country-boundaries': CountryBoundariesLayer,
   mangrove_protected_areas: ProtectedAreasLayer,
-  mangrove_restoration_sites: RestorationSitesLayer,
+  mangrove_rest_sites: RestorationSitesLayer,
   mangrove_coastal_protection_area: FloodProtectionAreaLayer,
   mangrove_coastal_protection_population: FloodProtectionPopulationLayer,
   mangrove_coastal_protection_stock: FloodProtectionStockLayer,
@@ -200,7 +200,7 @@ export const MAP_LEGENDS = {
   mangrove_coastal_protection_area: FloodProtectionAreaMapLegend,
   mangrove_coastal_protection_population: FloodProtectionPopulationMapLegend,
   mangrove_coastal_protection_stock: FloodProtectionStockMapLegend,
-  mangrove_restoration_sites: RestorationSitesMapLegend,
+  mangrove_rest_sites: RestorationSitesMapLegend,
   mangrove_iucn_ecoregion: IUCNEcoregionsMapLegend,
   mangrove_national_dashboard_layer: NationalDashboardMapLegend,
 };
@@ -225,7 +225,7 @@ export const INFO = {
   mangrove_emissions_mitigation: EmissionsMitigationInfo,
   mangrove_carbon_market_potential: CarbonMarketPotentialInfo,
   mangrove_international_status: InternationalStatusInfo,
-  mangrove_restoration_sites: RestorationSitesInfo,
+  mangrove_rest_sites: RestorationSitesInfo,
   mangrove_national_dashboard: NationalDashboardInfo,
   mangrove_flood_protection: FloodProtectionInfo,
   mangrove_iucn_ecoregion: IUCNEcoregionInfo,

diff --git a/src/containers/datasets/restoration-sites/hooks.tsx b/src/containers/datasets/restoration-sites/hooks.tsx
@@ -101,6 +101,7 @@ export function useSource(): SourceProps {
     .map(({ site_centroid, landscape_name, organizations, site_name }) => {
       if (site_centroid) {
         return {
+          type: 'Feature',
           geometry: JSON.parse(site_centroid),
           properties: {
             landscape_name,
@@ -111,8 +112,9 @@ export function useSource(): SourceProps {
       }
     });
 
+  if (!restorationSiteFeatures) return null;
   return {
-    id: 'restoration-sites',
+    id: 'mangrove_rest_sites',
     type: 'geojson',
     data: {
       type: 'FeatureCollection',
@@ -133,8 +135,10 @@ export function useLayer({
   return [
     {
       id: `${id}-clusters`,
+      metadata: {
+        position: 'top',
+      },
       type: 'circle',
-      source: 'restoration-sites',
       filter: ['has', 'point_count'],
       paint: {
         'circle-color': '#CC61B0',
@@ -150,8 +154,10 @@ export function useLayer({
     },
     {
       id: `${id}-clusters-points`,
+      metadata: {
+        position: 'top',
+      },
       type: 'circle',
-      source: 'restoration-sites',
       filter: ['!', ['has', 'point_count']],
       paint: {
         'circle-color': '#CC61B0',
@@ -165,10 +171,30 @@ export function useLayer({
         visibility,
       },
     },
+    {
+      id: `${id}-cluster-text`,
+      metadata: {
+        position: 'top',
+      },
+      type: 'symbol',
+      filter: ['!', ['has', 'point_count']],
+      layout: {
+        'text-field': ['get', 'site_name'],
+        'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
+        'text-size': 12,
+        visibility,
+      },
+      paint: {
+        'text-color': '#ffffff',
+        'text-opacity': opacity,
+      },
+    },
     {
       id: `${id}-cluster-count`,
+      metadata: {
+        position: 'top',
+      },
       type: 'symbol',
-      source: 'restoration-sites',
       filter: ['has', 'point_count'],
       layout: {
         'text-field': ['get', 'point_count_abbreviated'],

diff --git a/src/containers/datasets/restoration-sites/layer.tsx b/src/containers/datasets/restoration-sites/layer.tsx
@@ -8,9 +8,9 @@ import type { LayerProps } from 'types/layers';
 
 import { useLayer, useSource } from './hooks';
 
-const MangrovesLayer = ({ beforeId, id }: LayerProps) => {
+const MangrovesRestorationSitesLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === 'mangrove_restoration_sites');
+  const activeLayer = activeLayers.find((l) => l.id === 'mangrove_rest_sites');
 
   const SOURCE = useSource();
   const LAYERS = useLayer({
@@ -29,4 +29,4 @@ const MangrovesLayer = ({ beforeId, id }: LayerProps) => {
   );
 };
 
-export default MangrovesLayer;
+export default MangrovesRestorationSitesLayer;
diff --git a/src/containers/datasets/restoration-sites/map-legend.tsx b/src/containers/datasets/restoration-sites/map-legend.tsx
@@ -1,10 +1,8 @@
-const RestorationSitesMapLegend = () => {
-  return (
-    <div className="flex items-center space-x-2">
-      <div className="my-0.5 h-4 w-2 rounded-md bg-[#CC61B0] text-sm" />
-      <span className="text-sm text-black/60">Restoration sites</span>
-    </div>
-  );
-};
+const RestorationSitesMapLegend = () => (
+  <div className="flex items-center space-x-2">
+    <div className="my-0.5 h-4 w-2 rounded-md bg-[#CC61B0] text-sm" />
+    <span className="text-sm text-black/60">Restoration sites</span>
+  </div>
+);
 
 export default RestorationSitesMapLegend;
diff --git a/src/containers/datasets/restoration/map-legend.tsx b/src/containers/datasets/restoration/map-legend.tsx
@@ -1,20 +1,18 @@
-const RestorationMapLegend = () => {
-  return (
-    <div className="w-[280px]">
-      <div className="flex justify-between text-xs text-black/60">
-        <p>0%</p>
-        <p>100%</p>
-      </div>
-
-      <div
-        className="h-3 w-full border"
-        style={{
-          background:
-            'linear-gradient(90deg, #F9DDDA 0%, #FFADAD 25.52%, #CE78B3 50.52%, #8478CE 78.13%, #224294 100%)',
-        }}
-      />
+const RestorationMapLegend = () => (
+  <div className="w-[280px]">
+    <div className="flex justify-between text-xs text-black/60">
+      <p>0%</p>
+      <p>100%</p>
     </div>
-  );
-};
+
+    <div
+      className="h-3 w-full border"
+      style={{
+        background:
+          'linear-gradient(90deg, #F9DDDA 0%, #FFADAD 25.52%, #CE78B3 50.52%, #8478CE 78.13%, #224294 100%)',
+      }}
+    />
+  </div>
+);
 
 export default RestorationMapLegend;
diff --git a/src/containers/layers/constants.tsx b/src/containers/layers/constants.tsx
@@ -34,8 +34,8 @@ export const LAYERS = [
     id: 'mangrove_biomass',
   },
   {
-    name: 'Mangrove Restoration Sites',
-    id: 'mangrove_restoration_sites',
+    name: 'Restoration Sites',
+    id: 'mangrove_rest_sites',
   },
   {
     name: 'Mangrove restoration',
@@ -120,7 +120,7 @@ export const LAYERS_ORDER = [
   'mangrove_height',
   'mangrove_biomass',
   'mangrove_protection',
-  'mangrove_restoration_sites',
+  'mangrove_rest_sites',
   'mangrove_species_distribution',
   'mangrove_species_location',
   'mangrove_alerts',

diff --git a/src/containers/map/layer-manager/index.tsx b/src/containers/map/layer-manager/index.tsx
@@ -54,6 +54,14 @@ const LayerManagerContainer = () => {
 
   return (
     <>
+      {
+        <CountryBoundariesLayer
+          id="country-boundaries-layer"
+          beforeId="water"
+          onAdd={handleAdd}
+          onRemove={handleRemove}
+        />
+      }
       {LAYERS_FILTERED.map((layer, i) => {
         const beforeId = i === 0 ? 'custom-layers' : `${LAYERS_FILTERED[i - 1]}-bg`;
 
@@ -67,6 +75,7 @@ const LayerManagerContainer = () => {
           />
         );
       })}
+
       {LAYERS_FILTERED.map((layer, i) => {
         const beforeId = i === 0 ? 'custom-layers' : `${LAYERS_FILTERED[i - 1]}-bg`;
 
@@ -96,15 +105,6 @@ const LayerManagerContainer = () => {
           />
         );
       })}
-
-      {
-        <CountryBoundariesLayer
-          id="country-boundaries-layer"
-          beforeId="Country"
-          onAdd={handleAdd}
-          onRemove={handleRemove}
-        />
-      }
     </>
   );
 };

diff --git a/src/containers/map/legend/item/index.tsx b/src/containers/map/legend/item/index.tsx
@@ -93,7 +93,9 @@ const LegendItem = ({
 
   const HELPER_ID = activeLayers[0]?.id;
 
-  const layerId = Object.keys(MAP_LEGENDS).find((k) => l.id.includes(k));
+  const layerId = Object.keys(MAP_LEGENDS).find(
+    (k) => (l.id.startsWith('mangrove_national_dashboard') && l.id.includes(k)) || l.id === k
+  );
   const WidgetLegend = MAP_LEGENDS[layerId] as React.ElementType;
 
   const widgetId = l.id.includes('mangrove_national_dashboard_layer')

diff --git a/src/containers/widgets/constants.ts b/src/containers/widgets/constants.ts
@@ -11,11 +11,11 @@ const widgets_dev = [
   },
   {
     name: 'Mangrove Restoration Sites',
-    slug: 'mangrove_restoration_sites',
+    slug: 'mangrove_rest_sites',
     locationType: ['country', 'worldwide'],
     applicability: 'Global, National, and Sub-National',
     categoryIds: ['all_datasets', 'restoration_and_conservation'],
-    layersIds: ['restoration_sites'],
+    layersIds: ['restoration-sites'],
   },
 ] satisfies WidgetTypes[];
 
@@ -261,7 +261,7 @@ export const WIDGETS_BY_CATEGORY = [
   },
   {
     restoration_and_conservation: [
-      'mangrove_restoration_sites',
+      'mangrove_rest_sites',
       'mangrove_habitat_extent',
       'mangrove_net_change',
       'mangrove_alerts',
@@ -303,7 +303,7 @@ export const WIDGETS_BY_CATEGORY = [
   {
     all_datasets: [
       'mangrove_national_dashboard',
-      'mangrove_restoration_sites',
+      'mangrove_rest_sites',
       'mangrove_habitat_extent',
       'mangrove_net_change',
       'mangrove_habitat_change',

diff --git a/src/types/widget.ts b/src/types/widget.ts
@@ -25,7 +25,7 @@ export type WidgetSlugType =
   | 'mangrove_blue_carbon'
   | 'mangrove_protection'
   | 'mangrove_restoration'
-  | 'mangrove_restoration_sites'
+  | 'mangrove_rest_sites'
   | 'mangrove_species_distribution'
   | 'mangrove_species_threatened'
   | 'mangrove_species_location'