Generalize fit bounds function

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

@@ -15,11 +15,11 @@ import { featureCollection, point } from '@turf/helpers';
 
 import { useMapStyle } from './styles';
 import {
- checkFitBoundsFromLayer,
  FIT_BOUNDS_PADDING,
  getFilterPayload,
  getMergedBBox,
  requestQuickCache,
+ useFitBbox,
  useLayerInteraction
 } from './utils';
 import { useCustomMarker } from './custom-marker';
@@ -467,22 +467,11 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
  //
  // FitBounds when needed
  //
- useEffect(() => {
- if (!stacCollection.length) return;
- const layerBounds = getMergedBBox(stacCollection);
-
- // 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, bounds, stacCollection]);
+ const layerBounds = useMemo(
+ () => (stacCollection.length ? getMergedBBox(stacCollection) : undefined),
+ [stacCollection]
+ );
+ useFitBbox(mapInstance, bounds, layerBounds);
 
  return null;
 }

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

@@ -431,3 +431,31 @@ export function useLayerInteraction({
  };
  }, [layerId, mapInstance, onClick]);
 }
+
+
+type OptionalBbox = number[] | undefined | null;
+
+/**
+ * Centers on the given bounds if the current position is not within the bounds.
+ * Gives preference to the layer defined bounds over the STAC collection bounds.
+ *
+ * @param mapInstance Mapbox instance
+ * @param initialBbox Bounding box from the layer
+ * @param stacBbox Bounds from the STAC collection
+ */
+export function useFitBbox(
+ mapInstance: MapboxMap,
+ initialBbox: OptionalBbox,
+ stacBbox: OptionalBbox
+) {
+ useEffect(() => {
+ // Prefer layer defined bounds to STAC collection bounds.
+ const bounds = (initialBbox ?? stacBbox) as
+ | [number, number, number, number]
+ | undefined;
+
+ if (bounds?.length && checkFitBoundsFromLayer(bounds, mapInstance)) {
+ mapInstance.fitBounds(bounds, { padding: FIT_BOUNDS_PADDING });
+ }
+ }, [mapInstance, initialBbox, stacBbox]);
+}

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

@@ -13,9 +13,8 @@ import { endOfDay, startOfDay } from 'date-fns';
 import centroid from '@turf/centroid';
 
 import {
- checkFitBoundsFromLayer,
- FIT_BOUNDS_PADDING,
  requestQuickCache,
+ useFitBbox,
  useLayerInteraction
 } from './utils';
 import { useMapStyle } from './styles';
@@ -54,6 +53,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
  const theme = useTheme();
  const { updateStyle } = useMapStyle();
  const [featuresApiEndpoint, setFeaturesApiEndpoint] = useState('');
+ const [featuresBbox, setFeaturesBbox] =
+ useState<[number, number, number, number]>();
 
  const [minZoom, maxZoom] = zoomExtent ?? [0, 20];
 
@@ -74,9 +75,19 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
  controller
  });
 
- setFeaturesApiEndpoint(
- data.links.find((l) => l.rel === 'external').href
- );
+ const endpoint = data.links.find((l) => l.rel === 'external').href;
+ setFeaturesApiEndpoint(endpoint);
+
+ const featuresData = await requestQuickCache({
+ url: endpoint,
+ method: 'GET',
+ controller
+ });
+
+ if (featuresData.extent.spatial.bbox) {
+ setFeaturesBbox(featuresData.extent.spatial.bbox[0]);
+ }
+
  onStatusChange?.({ status: S_SUCCEEDED, id });
  } catch (error) {
  if (!controller.signal.aborted) {
@@ -277,15 +288,7 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
  //
  // 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]);
+ useFitBbox(mapInstance, bounds, featuresBbox);
 
  return null;
 }

mock/datasets/fire.data.mdx

@@ -23,17 +23,9 @@ taxonomy:
  values:
  - COx
 layers:
- - id: eis_fire_fireline
- stacCol: eis_fire_fireline
- name: Fire
- type: vector
- description: eis_fire_fireline
- zoomExtent:
- - 5
- - 20
  - id: eis_fire_perimeter
  stacCol: eis_fire_perimeter
- name: Fire Perimeter
+ name: Fire
  type: vector
  description: eis_fire_perimeter
  zoomExtent: