Merge pull request #1175 from Vizzuality/fix-nat-dash

national dash fix

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

src/containers/datasets/national-dashboard/indicator-source/index.tsx

@@ -84,6 +84,7 @@ const IndicatorSource = ({
           },
           ...activeLayers,
         ] as ActiveLayers[]);
+
     setActiveLayers(layersUpdate);
   }, [activeLayers, setActiveLayers, id, dataSource, isActive, layerIndex, locationIso, source]);
 

src/containers/datasets/national-dashboard/layer.tsx

@@ -12,18 +12,17 @@ const MangrovesNationalDashboardLayer = ({ beforeId, id }: LayerProps) => {
   const [activeLayers] = useRecoilState(activeLayersAtom);
   const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource({ settings: activeLayer.settings });
-
   const LAYER = useLayers({
     id: 'mangrove_national_dashboard_layer',
-    opacity: parseFloat(activeLayer.opacity),
+    opacity: parseFloat(activeLayer?.opacity),
     visibility: activeLayer.visibility,
     settings: activeLayer.settings,
   });
   if (!SOURCE || !LAYER) return null;
 
   return (
     <Source {...SOURCE}>
-      <Layer key={LAYER.id} {...LAYER} beforeId={beforeId} />
+      <Layer key={LAYER.id} id={SOURCE.id} {...LAYER} beforeId={beforeId} />
     </Source>
   );
 };

src/containers/map/index.tsx

@@ -344,6 +344,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
     setLoaded(true);
   }, []);
   const pitch = map?.getPitch();
+
   return (
     <div
       className="print:page-break-after print:page-break-inside-avoid absolute top-0 left-0 z-0 h-screen w-screen print:relative print:top-4 print:w-[90vw]"

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

@@ -42,43 +42,20 @@ 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'
   );
   const no_planet_layers = ACTIVE_LAYERS?.filter(
-    (layer) =>
-      !layer?.includes('planet') && layer !== 'hi-res-extent' && filteredLayers?.includes(layer)
+    (layer) => !layer?.includes('planet') && layer !== 'hi-res-extent'
   );
 
   const filterNationalDashboardLayers = !NATIONAL_DASHBOARD_LOCATIONS?.includes(id)
     ? no_planet_layers?.filter((l) => !l?.includes('national_dashboard'))
     : no_planet_layers;
 
   const LAYERS_FILTERED = [...(filterNationalDashboardLayers || []), ...(basemap_layers || [])];
+
   const handleAdd = useCallback(
     (styleIds: LayerProps['id'][]) => {
       setInteractiveLayerIds((prevInteractiveIds) => [...prevInteractiveIds, ...styleIds]);

src/containers/map/legend/index.tsx

@@ -51,7 +51,11 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
 
   const filteredLayersIds = filterLayersByLocationType(widgets, locationType);
   const filteredLayers = activeLayers?.filter(({ id }) => {
-    return filteredLayersIds.includes(id);
+    return (
+      filteredLayersIds.includes(id) ||
+      (id.includes('mangrove_national_dashboard') &&
+        filteredLayersIds.includes('mangrove_national_dashboard'))
+    );
   }) as ActiveLayers[];
 
   const [isOpen, setIsOpen] = useState(false);
@@ -67,7 +71,7 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
   const handleChangeOrder = useCallback(
     (order: string[]) => {
       const newLayers = order.map((id) => {
-        return activeLayers?.find((l) => l.id === id);
+        return activeLayers?.find((l) => l.id === id || l.id.includes(id));
       }) as ActiveLayers[];
       const activeLayerPlanet = activeLayers?.filter((l) => l.id.includes('planet'));
       setActiveLayers([...newLayers, ...activeLayerPlanet]);