Add dataset layer predefined bounds support

Fix US-GHG-Center/veda-config-ghg#21

app/scripts/components/common/mapbox/index.tsx

@@ -422,6 +422,7 @@ function MapboxMapComponent(
                 date={date}
                 sourceParams={baseLayerResolvedData.sourceParams}
                 zoomExtent={baseLayerResolvedData.zoomExtent}
+                bounds={baseLayerResolvedData.bounds}
                 onStatusChange={onBaseLayerStatusChange}
               />
             )}
@@ -471,6 +472,7 @@ function MapboxMapComponent(
                   date={compareToDate ?? undefined}
                   sourceParams={compareLayerResolvedData.sourceParams}
                   zoomExtent={compareLayerResolvedData.zoomExtent}
+                  bounds={compareLayerResolvedData.bounds}
                   onStatusChange={onCompareLayerStatusChange}
                 />
               )}

app/scripts/components/common/mapbox/layers/raster-timeseries.tsx

@@ -16,6 +16,7 @@ import { featureCollection, point } from '@turf/helpers';
 import { useMapStyle } from './styles';
 import {
   checkFitBoundsFromLayer,
+  FIT_BOUNDS_PADDING,
   getFilterPayload,
   getMergedBBox,
   requestQuickCache,
@@ -34,15 +35,14 @@ import {
 // Whether or not to print the request logs.
 const LOG = true;
 
-const FIT_BOUNDS_PADDING = 32;
-
 export interface MapLayerRasterTimeseriesProps {
   id: string;
   stacCol: string;
   date?: Date;
   mapInstance: MapboxMap;
   sourceParams?: Record<string, any>;
   zoomExtent?: number[];
+  bounds?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   isHidden?: boolean;
   idSuffix?: string;
@@ -72,6 +72,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     mapInstance,
     sourceParams,
     zoomExtent,
+    bounds,
     onStatusChange,
     isHidden,
     idSuffix = ''
@@ -470,10 +471,18 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     if (!stacCollection.length) return;
     const layerBounds = getMergedBBox(stacCollection);
 
-    if (checkFitBoundsFromLayer(layerBounds, mapInstance)) {
-      mapInstance.fitBounds(layerBounds, { padding: FIT_BOUNDS_PADDING });
+    // Prefer layer defined bounds to STAC collection bounds.
+    const usableBounds = (bounds?.length === 4 ? bounds : layerBounds) as [
+      number,
+      number,
+      number,
+      number
+    ];
+
+    if (checkFitBoundsFromLayer(usableBounds, mapInstance)) {
+      mapInstance.fitBounds(usableBounds, { padding: FIT_BOUNDS_PADDING });
     }
-  }, [mapInstance, stacCol, stacCollection]);
+  }, [mapInstance, stacCol, bounds, stacCollection]);
 
   return null;
 }

app/scripts/components/common/mapbox/layers/utils.ts

@@ -370,6 +370,8 @@ export function getMergedBBox(features: StacFeature[]) {
   ) as [number, number, number, number];
 }
 
+export const FIT_BOUNDS_PADDING = 32;
+
 export function checkFitBoundsFromLayer(
   layerBounds?: [number, number, number, number],
   mapInstance?: MapboxMap

app/scripts/components/common/mapbox/layers/vector-timeseries.tsx

@@ -12,7 +12,12 @@ import { Feature } from 'geojson';
 import { endOfDay, startOfDay } from 'date-fns';
 import centroid from '@turf/centroid';
 
-import { requestQuickCache, useLayerInteraction } from './utils';
+import {
+  checkFitBoundsFromLayer,
+  FIT_BOUNDS_PADDING,
+  requestQuickCache,
+  useLayerInteraction
+} from './utils';
 import { useMapStyle } from './styles';
 import { useCustomMarker } from './custom-marker';
 
@@ -26,6 +31,7 @@ export interface MapLayerVectorTimeseriesProps {
   mapInstance: MapboxMap;
   sourceParams?: Record<string, any>;
   zoomExtent?: number[];
+  bounds?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   isHidden?: boolean;
   idSuffix?: string;
@@ -39,6 +45,7 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
     mapInstance,
     sourceParams,
     zoomExtent,
+    bounds,
     onStatusChange,
     isHidden,
     idSuffix = ''
@@ -67,7 +74,9 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
           controller
         });
 
-        setFeaturesApiEndpoint(data.links.find((l) => l.rel === 'external').href);
+        setFeaturesApiEndpoint(
+          data.links.find((l) => l.rel === 'external').href
+        );
         onStatusChange?.({ status: S_SUCCEEDED, id });
       } catch (error) {
         if (!controller.signal.aborted) {
@@ -85,7 +94,6 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
     };
   }, [mapInstance, id, stacCol, date, onStatusChange]);
 
-
   const markerLayout = useCustomMarker(mapInstance);
 
   //
@@ -192,7 +200,7 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
             'source-layer': 'default',
             layout: {
               ...(markerLayout as any),
-              visibility: isHidden ? 'none' : 'visible',
+              visibility: isHidden ? 'none' : 'visible'
             },
             paint: {
               'icon-color': theme.color?.infographicB,
@@ -266,5 +274,18 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
     onClick: onPointsClick
   });
 
+  //
+  // FitBounds when needed
+  //
+  useEffect(() => {
+    if (bounds?.length !== 4) return;
+
+    const b = bounds as [number, number, number, number];
+
+    if (checkFitBoundsFromLayer(b, mapInstance)) {
+      mapInstance.fitBounds(b, { padding: FIT_BOUNDS_PADDING });
+    }
+  }, [mapInstance, bounds]);
+
   return null;
 }

app/scripts/components/datasets/s-explore/index.tsx

@@ -215,6 +215,7 @@ function DatasetsExplore() {
   useEffect(() => {
     setPanelRevealed(!isMediumDown);
   }, [isMediumDown]);
+
   // When the panel changes resize the map after a the animation finishes.
   useEffect(() => {
     const id = setTimeout(

mock/datasets/no2.data.mdx

@@ -37,8 +37,9 @@ taxonomy:
 layers:
   - id: no2-monthly
     stacCol: no2-monthly
-    name: No2
+    name: No2 PT
     type: raster
+    bounds: [-10, 36, -5, 42]
     description: Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
     zoomExtent:
       - 0
@@ -73,7 +74,8 @@ layers:
         - "#050308"
   - id: no2-monthly-2
     stacCol: no2-monthly
-    name: No2
+    name: No2 US
+    bounds: [-124, 29, -65, 49]
     type: raster
     description: Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
     zoomExtent:

parcel-resolver-veda/index.d.ts

@@ -26,6 +26,7 @@ declare module 'veda' {
 
   interface DatasetLayerCommonProps {
     zoomExtent?: number[];
+    bounds?: number[];
     sourceParams?: Record<string, any>;
   }