Merge pull request #1099 from Vizzuality/fix/planet-imagery

planet imagery layers
Vizzuality · Apr 8, 2024 · 8b3fc6b · 8b3fc6b
2 parents a546b0d + 3b73e1f
commit 8b3fc6b
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 67 deletions.
diff --git a/src/containers/datasets/restoration/hooks.tsx b/src/containers/datasets/restoration/hooks.tsx
@@ -9,68 +9,67 @@ export function useSource(): SourceProps {
     type: 'vector',
     promoteId: 'ID',
     url: 'mapbox://globalmangrovewatch.7rr6p3ir',
+    id: 'mangrove_restoration',
   };
 }
-export function useLayers({
+export function useLayer({
   id,
   opacity,
   visibility = 'visible',
 }: {
   id: LayerProps['id'];
   opacity?: number;
   visibility?: Visibility;
-}): LayerProps[] {
+}): LayerProps {
   return useMemo(
     () =>
-      [
-        {
-          id: `${id}-layer`,
-          type: 'fill',
-          source: 'mangrove_restoration',
-          'source-layer': 'MOW_Global_Mangrove_Restoration_202212',
-          paint: {
-            'fill-color': [
-              'interpolate',
-              ['linear'],
-              ['get', 'Rest_Score'],
-              20,
-              '#f9ddda',
-              40,
-              '#ffadad',
-              60,
-              '#ce78b3',
-              80,
-              '#8478ce',
-              100,
-              '#224294',
-            ],
-            'fill-opacity': [
-              'case',
-              ['boolean', ['feature-state', 'hover'], false],
-              1,
-              opacity * 0.6,
-            ],
-            'fill-outline-color': [
-              'interpolate',
-              ['linear'],
-              ['get', 'Rest_Score'],
-              20,
-              '#f9ddda',
-              40,
-              '#ffadad',
-              60,
-              '#ce78b3',
-              80,
-              '#8478ce',
-              100,
-              '#224294',
-            ],
-          },
-          layout: {
-            visibility,
-          },
+      ({
+        id: `${id}-layer`,
+        type: 'fill',
+        source: 'mangrove_restoration',
+        'source-layer': 'MOW_Global_Mangrove_Restoration_202212',
+        paint: {
+          'fill-color': [
+            'interpolate',
+            ['linear'],
+            ['get', 'Rest_Score'],
+            20,
+            '#f9ddda',
+            40,
+            '#ffadad',
+            60,
+            '#ce78b3',
+            80,
+            '#8478ce',
+            100,
+            '#224294',
+          ],
+          'fill-opacity': [
+            'case',
+            ['boolean', ['feature-state', 'hover'], false],
+            1,
+            opacity * 0.6,
+          ],
+          'fill-outline-color': [
+            'interpolate',
+            ['linear'],
+            ['get', 'Rest_Score'],
+            20,
+            '#f9ddda',
+            40,
+            '#ffadad',
+            60,
+            '#ce78b3',
+            80,
+            '#8478ce',
+            100,
+            '#224294',
+          ],
         },
-      ] satisfies LayerProps[],
+        layout: {
+          visibility,
+        },
+      } satisfies LayerProps),
     [id, opacity, visibility]
   );
 }
diff --git a/src/containers/datasets/restoration/layer.tsx b/src/containers/datasets/restoration/layer.tsx
@@ -8,31 +8,28 @@ import { useRecoilValue } from 'recoil';
 
 import type { LayerProps } from 'types/layers';
 
-import { useLayers, useSource } from './hooks';
+import { useLayer, useSource } from './hooks';
 
 const MangrovesLayer = ({ beforeId, id, onAdd, onRemove }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
   const activeLayer = activeLayers.find((l) => l.id === id);
   const SOURCE = useSource();
-  const LAYERS = useLayers({
+  const LAYER = useLayer({
     id,
     opacity: parseFloat(activeLayer.opacity),
     visibility: activeLayer.visibility,
   });
 
   useEffect(() => {
-    const ids = LAYERS.map((layer) => layer.id);
-    onAdd(ids);
-    return () => onRemove(ids);
-  }, [LAYERS, onAdd, onRemove]);
+    onAdd([LAYER.id]);
+    return () => onRemove([LAYER.id]);
+  }, [LAYER, onAdd, onRemove]);
 
-  if (!SOURCE || !LAYERS) return null;
+  if (!SOURCE || !LAYER) return null;
 
   return (
     <Source {...SOURCE}>
-      {LAYERS.map((LAYER) => (
-        <Layer key={LAYER.id} {...LAYER} beforeId={beforeId} />
-      ))}
+      <Layer key={LAYER.id} {...LAYER} beforeId={beforeId} />
     </Source>
   );
 };

diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
@@ -297,7 +297,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
           map?.setFeatureState(
             {
               sourceLayer: 'MOW_Global_Mangrove_Restoration_202212',
-              source: 'jsx-source-0',
+              source: 'mangrove_restoration',
               id: hoveredStateId,
             },
             { hover: false }
@@ -308,7 +308,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
         map?.setFeatureState(
           {
             sourceLayer: 'MOW_Global_Mangrove_Restoration_202212',
-            source: 'jsx-source-0',
+            source: 'mangrove_restoration',
             id: hoveredStateId,
           },
           { hover: true }
@@ -320,7 +320,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
         map?.setFeatureState(
           {
             sourceLayer: 'MOW_Global_Mangrove_Restoration_202212',
-            source: 'jsx-source-0',
+            source: 'mangrove_restoration',
             id: hoveredStateId,
           },
           { hover: false }

diff --git a/src/containers/map/layer-manager/index.tsx b/src/containers/map/layer-manager/index.tsx
@@ -21,7 +21,7 @@ const LayerManagerContainer = () => {
 
   const activeLayersIds = layers.map((l) => l.id);
 
-  const LAYERS_FILTERED = useMemo(() => {
+  const ACTIVE_LAYERS = useMemo(() => {
     const filteredLayers = activeLayersIds.filter(
       (layer: WidgetSlugType | ContextualBasemapsId | 'custom-area') => {
         return Object.keys(LAYERS).some((k) => layer.includes(k));
@@ -31,6 +31,11 @@ const LayerManagerContainer = () => {
     return filteredLayers;
   }, [activeLayersIds]);
 
+  // planet layers must be always at the bottom
+  const planet_layers = ACTIVE_LAYERS.filter((layer) => layer.includes('planet'));
+  const no_planet_layers = ACTIVE_LAYERS.filter((layer) => !layer.includes('planet'));
+  const LAYERS_FILTERED = [...no_planet_layers, ...planet_layers];
+
   const handleAdd = useCallback(
     (styleIds: LayerProps['id'][]) => {
       setInteractiveLayerIds((prevInteractiveIds) => [...prevInteractiveIds, ...styleIds]);

diff --git a/src/containers/map/legend/index.tsx b/src/containers/map/legend/index.tsx
@@ -38,9 +38,12 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
     [activeLayers, setActiveLayers]
   );
 
+  // 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'));
+
   return (
     <div>
-      {!!activeLayers.length && (
+      {!!activeLayerNoPlanet.length && (
         <>
           <button
             onClick={openLegend}
@@ -73,15 +76,15 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
                     onChangeOrder={handleChangeOrder}
                     sortable={{ handle: true, enabled: true }}
                   >
-                    {activeLayers.map((l) => {
+                    {activeLayerNoPlanet.map((l) => {
                       return <LegendItem id={l.id} key={l.id} embedded={embedded} l={l} />;
                     })}
                   </SortableList>
                 </div>
 
                 <button
                   onClick={closeLegend}
-                  className="absolute -top-8 right-5 -z-10 rounded-t-3xl bg-white p-2 p-3"
+                  className="absolute -top-8 right-5 -z-10 rounded-t-3xl bg-white p-2"
                 >
                   <FaArrowDown />
                 </button>