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)) {
+      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-map-compare.ts

@@ -1,11 +1,10 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import MapboxCompare from 'mapbox-gl-compare';
-import { MapsContext } from '../maps';
-import useMaps from './use-maps';
+import useMaps, { useMapsContext } from './use-maps';
 
 export default function useMapCompare() {
   const { main, compared } = useMaps();
-  const { containerId } = useContext(MapsContext);
+  const { containerId } = useMapsContext();
   const hasMapCompare = !!compared;
   useEffect(() => {
     if (!main) return;

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

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { StylesContext } from "../styles";
+import useCustomMarker from "./use-custom-marker";
+import useMaps from "./use-maps";
+
+export function useStylesContext() {
+  return useContext(StylesContext);
+}
+
+export default function useMapStyle() {
+  const { updateStyle, style } = useStylesContext();
+  const { current } = useMaps();
+  useCustomMarker(current);
+
+  return { updateStyle, style };
+}

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

@@ -1,13 +1,23 @@
 import { useContext } from 'react';
 import { useMap } from 'react-map-gl';
 import { MapsContext } from '../maps';
+import { useStylesContext } from './use-map-style';
+
+export function useMapsContext() {
+  return useContext(MapsContext);
+}
 
 export default function useMaps() {
-  const { mainId, comparedId } = useContext(MapsContext);
+  const { mainId, comparedId } = useMapsContext();
+  const { isCompared } = useStylesContext();
   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/map-component.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, ReactElement, useContext, useMemo } from 'react';
+import React, { useCallback, ReactElement, useMemo } from 'react';
 import ReactMapGlMap from 'react-map-gl';
 import { ProjectionOptions } from 'veda';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
 import { convertProjectionToMapbox } from '../mapbox/map-options/utils';
-import { useMapStyle } from './styles';
-import { MapsContext } from './maps';
+import useMapStyle from './hooks/use-map-style';
+import { useMapsContext } from './hooks/use-maps';
 
 export default function MapComponent({
   controls,
@@ -17,7 +17,7 @@ export default function MapComponent({
   projection?: ProjectionOptions;
 }) {
   const { initialViewState, setInitialViewState, mainId, comparedId } =
-    useContext(MapsContext);
+    useMapsContext();
 
   const id = isCompared ? comparedId : mainId;
 
@@ -30,11 +30,11 @@ export default function MapComponent({
     [isCompared, setInitialViewState]
   );
 
-    // Get MGL projection from Veda projection
-    const mapboxProjection = useMemo(() => {
-      if (!projection) return undefined;
-      return convertProjectionToMapbox(projection);
-    }, [projection]);
+  // Get MGL projection from Veda projection
+  const mapboxProjection = useMemo(() => {
+    if (!projection) return undefined;
+    return convertProjectionToMapbox(projection);
+  }, [projection]);
 
   const { style } = useMapStyle();
 

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

@@ -5,8 +5,7 @@ import React, {
   ReactElement,
   JSXElementConstructor,
   useState,
-  createContext,
-  useContext
+  createContext
 } from 'react';
 import styled from 'styled-components';
 import {
@@ -23,7 +22,7 @@ import MapboxStyleOverride from './mapbox-style-override';
 import { Styles } from './styles';
 import useMapCompare from './hooks/use-map-compare';
 import MapComponent from './map-component';
-import useMaps from './hooks/use-maps';
+import useMaps, { useMapsContext } from './hooks/use-maps';
 
 const chevronRightURI = () =>
   iconDataURI(CollecticonChevronRightSmall, {
@@ -116,7 +115,7 @@ function Maps({ children, projection }: MapsProps) {
     }
   });
 
-  const { containerId } = useContext(MapsContext);
+  const { containerId } = useMapsContext();
 
   return (
     <MapsContainer id={containerId} ref={observe}>
@@ -125,7 +124,7 @@ function Maps({ children, projection }: MapsProps) {
         <MapComponent controls={controls} projection={projection} />
       </Styles>
       {!!compareGenerators.length && (
-        <Styles>
+        <Styles isCompared>
           {compareGenerators}
           <MapComponent
             isCompared

app/scripts/components/common/map/style-generators/basemap.tsx

@@ -7,8 +7,8 @@ import {
   getStyleUrl,
   GROUPS_BY_OPTION
 } from '../controls/map-options/basemap';
-import { useMapStyle } from '../styles';
 import { ExtendedLayer } from '../types';
+import useMapStyle from '../hooks/use-map-style';
 
 interface BasemapProps {
   basemapStyleId?: BasemapId;