reuse raster timeseries

app/scripts/components/common/map/hooks/use-custom-marker.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import markerSdfUrl from '../style/marker-sdf.png';
+
+const CUSTOM_MARKER_ID = 'marker-sdf';
+
+const markerLayout = {
+  'icon-image': CUSTOM_MARKER_ID,
+  'icon-size': 0.25,
+  'icon-anchor': 'bottom'
+};
+
+export default function useCustomMarker(mapInstance) {
+  useEffect(() => {
+    if (!mapInstance) return;
+    mapInstance.loadImage(markerSdfUrl, (error, image) => {
+      if (error) throw error;
+      if (!image) return;
+      if (mapInstance.hasImage(CUSTOM_MARKER_ID)) {
+        mapInstance.removeImage(CUSTOM_MARKER_ID);
+      }
+      // add image to the active style and make it SDF-enabled
+      mapInstance.addImage(CUSTOM_MARKER_ID, image, { sdf: true });
+    });
+  }, [mapInstance]);
+
+  return markerLayout;
+}

app/scripts/components/common/map/hooks/use-fit-bbox.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { Map as MapboxMap } from 'mapbox-gl';
+import { OptionalBbox } from "../types";
+import { FIT_BOUNDS_PADDING, checkFitBoundsFromLayer } from "../utils";
+
+/**
+ * Centers on the given bounds if the current position is not within the bounds,
+ * and there's no user defined position (via user initiated map movement). Gives
+ * preference to the layer defined bounds over the STAC collection bounds.
+ *
+ * @param mapInstance Mapbox instance
+ * @param isUserPositionSet Whether the user has set a position
+ * @param initialBbox Bounding box from the layer
+ * @param stacBbox Bounds from the STAC collection
+ */
+export default function useFitBbox(
+  mapInstance: MapboxMap,
+  isUserPositionSet: boolean,
+  initialBbox: OptionalBbox,
+  stacBbox: OptionalBbox
+) {
+  useEffect(() => {
+    if (isUserPositionSet) return;
+
+    // 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, isUserPositionSet, initialBbox, stacBbox]);
+}

app/scripts/components/common/map/hooks/use-layer-interaction.ts

@@ -0,0 +1,41 @@
+
+import { Feature } from 'geojson';
+import { Map as MapboxMap } from 'mapbox-gl';
+import { useEffect } from 'react';
+
+interface LayerInteractionHookOptions {
+  layerId: string;
+  mapInstance: MapboxMap;
+  onClick: (features: Feature<any>[]) => void;
+}
+export default function useLayerInteraction({
+  layerId,
+  mapInstance,
+  onClick
+}: LayerInteractionHookOptions) {
+  useEffect(() => {
+    if (!mapInstance) return;
+    const onPointsClick = (e) => {
+      if (!e.features.length) return;
+      onClick(e.features);
+    };
+
+    const onPointsEnter = () => {
+      mapInstance.getCanvas().style.cursor = 'pointer';
+    };
+
+    const onPointsLeave = () => {
+      mapInstance.getCanvas().style.cursor = '';
+    };
+
+    mapInstance.on('click', layerId, onPointsClick);
+    mapInstance.on('mouseenter', layerId, onPointsEnter);
+    mapInstance.on('mouseleave', layerId, onPointsLeave);
+
+    return () => {
+      mapInstance.off('click', layerId, onPointsClick);
+      mapInstance.off('mouseenter', layerId, onPointsEnter);
+      mapInstance.off('mouseleave', layerId, onPointsLeave);
+    };
+  }, [layerId, mapInstance, onClick]);
+}