Raster timeseries

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

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+import markerSdfUrl from '../style/marker-sdf.png';
+
+const CUSTOM_MARKER_ID = 'marker-sdf';
+
+export const MARKER_LAYOUT = {
+  '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]);
+}

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

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { OptionalBbox } from "../types";
+import { FIT_BOUNDS_PADDING, checkFitBoundsFromLayer } from "../utils";
+import useMaps from "./use-maps";
+
+/**
+ * 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 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(
+  isUserPositionSet: boolean,
+  initialBbox: OptionalBbox,
+  stacBbox: OptionalBbox
+) {
+  const { current: mapInstance } = useMaps();
+  useEffect(() => {
+    if (isUserPositionSet  || !mapInstance) 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 as any)) {
+      mapInstance.fitBounds(bounds, { padding: FIT_BOUNDS_PADDING });
+    }
+  }, [mapInstance, isUserPositionSet, initialBbox, stacBbox]);
+}

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

@@ -0,0 +1,40 @@
+
+import { Feature } from 'geojson';
+import { useEffect } from 'react';
+import useMaps from './use-maps';
+
+interface LayerInteractionHookOptions {
+  layerId: string;
+  onClick: (features: Feature<any>[]) => void;
+}
+export default function useLayerInteraction({
+  layerId,
+  onClick
+}: LayerInteractionHookOptions) {
+  const { current: mapInstance } = useMaps();
+  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]);
+}

app/scripts/components/common/map/hooks/use-maps.ts

@@ -1,13 +1,19 @@
 import { useContext } from 'react';
 import { useMap } from 'react-map-gl';
 import { MapsContext } from '../maps';
+import { StylesContext } from '../styles';
 
 export default function useMaps() {
   const { mainId, comparedId } = useContext(MapsContext);
+  const { isCompared } = useContext(StylesContext);
   const maps = useMap();
+  const main = maps[mainId];
+  const compared = maps[comparedId];
+  const current = isCompared ? compared : main;
 
   return {
-    main: maps[mainId],
-    compared: maps[comparedId]
+    main,
+    compared,
+    current
   };
 }

app/scripts/components/common/map/maps.tsx

@@ -125,7 +125,7 @@ function Maps({ children, projection }: MapsProps) {
         <MapComponent controls={controls} projection={projection} />
       </Styles>
       {!!compareGenerators.length && (
-        <Styles>
+        <Styles isCompared>
           {compareGenerators}
           <MapComponent
             isCompared