@macrostrat/map-interface 0.0.1

package/src/helpers.ts

@@ -0,0 +1,171 @@
+import {
+  useMapRef,
+  useMapEaseToCenter,
+  useMapDispatch,
+  useMapStatus,
+} from "@macrostrat/mapbox-react";
+import { useRef } from "react";
+import { debounce } from "underscore";
+import useResizeObserver from "use-resize-observer";
+
+import { getMapPosition } from "@macrostrat/mapbox-utils";
+import mapboxgl from "mapbox-gl";
+import { useCallback, useEffect, useState } from "react";
+import { getMapPadding, useMapMarker } from "./utils";
+
+export function MapResizeManager({ containerRef }) {
+  const mapRef = useMapRef();
+
+  const debouncedResize = useRef(
+    debounce(() => {
+      mapRef.current?.resize();
+    }, 100)
+  );
+
+  useResizeObserver({
+    ref: containerRef,
+    onResize: debouncedResize.current,
+  });
+
+  return null;
+}
+
+interface MapPaddingManagerProps {
+  containerRef: React.RefObject<HTMLDivElement>;
+  parentRef: React.RefObject<HTMLDivElement>;
+  infoMarkerPosition: mapboxgl.LngLatLike;
+}
+
+export function MapPaddingManager({
+  containerRef,
+  parentRef,
+  infoMarkerPosition,
+}: MapPaddingManagerProps) {
+  const mapRef = useMapRef();
+
+  const [padding, setPadding] = useState(
+    getMapPadding(containerRef, parentRef)
+  );
+
+  const updateMapPadding = useCallback(() => {
+    const newPadding = getMapPadding(containerRef, parentRef);
+    setPadding(newPadding);
+  }, [containerRef.current, parentRef.current]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map == null) return;
+    // Update map padding on load
+    updateMapPadding();
+  }, [mapRef.current]);
+
+  useResizeObserver({
+    ref: parentRef,
+    onResize(sz) {
+      updateMapPadding();
+    },
+  });
+
+  useMapEaseToCenter(infoMarkerPosition, padding);
+
+  return null;
+}
+
+export function MapMovedReporter({ onMapMoved = null }) {
+  const mapRef = useMapRef();
+  const dispatch = useMapDispatch();
+
+  const mapMovedCallback = useCallback(() => {
+    const map = mapRef.current;
+    if (map == null) return;
+    const mapPosition = getMapPosition(map);
+    dispatch({ type: "map-moved", payload: mapPosition });
+    onMapMoved?.(mapPosition, map);
+  }, [mapRef.current, onMapMoved, dispatch]);
+
+  useEffect(() => {
+    // Get the current value of the map. Useful for gradually moving away
+    // from class component
+    const map = mapRef.current;
+    if (map == null) return;
+    // Update the URI when the map moves
+    mapMovedCallback();
+    const cb = debounce(mapMovedCallback, 100);
+    map.on("moveend", cb);
+    return () => {
+      map?.off("moveend", cb);
+    };
+  }, [mapMovedCallback]);
+  return null;
+}
+
+export function MapLoadingReporter({
+  ignoredSources,
+  onMapLoading = null,
+  onMapIdle = null,
+  mapIsLoading,
+}) {
+  const mapRef = useMapRef();
+  const loadingRef = useRef(false);
+  const dispatch = useMapDispatch();
+
+  useEffect(() => {
+    const map = mapRef.current;
+    const mapIsLoading = loadingRef.current;
+    if (map == null) return;
+
+    let didSendLoading = false;
+
+    const loadingCallback = (evt) => {
+      if (ignoredSources.includes(evt.sourceId) || mapIsLoading) return;
+      if (didSendLoading) return;
+      onMapLoading?.(evt);
+      dispatch({ type: "set-loading", payload: true });
+      loadingRef.current = true;
+      didSendLoading = true;
+    };
+    const idleCallback = (evt) => {
+      if (!mapIsLoading) return;
+      dispatch({ type: "set-loading", payload: false });
+      loadingRef.current = false;
+      onMapIdle?.(evt);
+    };
+    map.on("sourcedataloading", loadingCallback);
+    map.on("idle", idleCallback);
+    return () => {
+      map?.off("sourcedataloading", loadingCallback);
+      map?.off("idle", idleCallback);
+    };
+  }, [ignoredSources, mapRef.current, mapIsLoading]);
+  return null;
+}
+
+export function MapMarker({ position, setPosition, centerMarker = true }) {
+  const mapRef = useMapRef();
+  const markerRef = useRef(null);
+
+  useMapMarker(mapRef, markerRef, position);
+
+  const handleMapClick = useCallback(
+    (event: mapboxgl.MapMouseEvent) => {
+      setPosition(event.lngLat, event, mapRef.current);
+      // We should integrate this with the "easeToCenter" hook
+      if (centerMarker) {
+        mapRef.current?.flyTo({ center: event.lngLat, duration: 800 });
+      }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mapRef.current, setPosition]
+  );
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map != null && setPosition != null) {
+      map.on("click", handleMapClick);
+    }
+    return () => {
+      map?.off("click", handleMapClick);
+    };
+  }, [mapRef.current, setPosition]);
+
+  return null;
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./context-panel";
+export * from "./location-panel";
+export * from "./dev";
+export * from "./container";
+export * from "./map-view";

package/src/location-info/index.ts

@@ -0,0 +1,89 @@
+import h from "@macrostrat/hyper";
+import {
+  formatValue,
+  normalizeLng,
+  metersToFeet,
+  formatCoordForZoomLevel,
+} from "./utils";
+
+export function ValueWithUnit(props) {
+  const { value, unit } = props;
+  return h("span.value-with-unit", [
+    h("span.value", [value]),
+    h("span.spacer", [" "]),
+    h("span.unit", [unit]),
+  ]);
+}
+
+export function DegreeCoord(props) {
+  const { value, labels, precision = 3, format = formatValue } = props;
+  const direction = value < 0 ? labels[1] : labels[0];
+
+  return h(ValueWithUnit, {
+    value: format(Math.abs(value), precision) + "°",
+    unit: direction,
+  });
+}
+
+export interface LngLatProps {
+  /** Map position */
+  position: [number, number] | { lat: number; lng: number };
+  className?: string;
+  /** Zoom level (used to infer coordinate rounding if provided) */
+  zoom?: number | null;
+  /** Number of decimal places to round coordinates to */
+  precision: number | null;
+  /** Function to format coordinates */
+  format?: (val: number, precision: number) => string;
+}
+
+export function LngLatCoords(props: LngLatProps) {
+  /** Formatted geographic coordinates */
+  const { position, className, precision, zoom } = props;
+  let { format } = props;
+  if (position == null) {
+    return null;
+  }
+  let lat, lng;
+  if (Array.isArray(position)) {
+    [lng, lat] = position;
+  } else {
+    ({ lat, lng } = position);
+  }
+
+  if (zoom != null && format == null && precision == null) {
+    format = (val, _) => formatCoordForZoomLevel(val, zoom);
+  }
+
+  return h("div.lnglat-container", { className }, [
+    h("span.lnglat", [
+      h(DegreeCoord, {
+        value: lat,
+        labels: ["N", "S"],
+        precision,
+        format,
+      }),
+      ", ",
+      h(DegreeCoord, {
+        value: normalizeLng(lng),
+        labels: ["E", "W"],
+        precision,
+        format,
+      }),
+    ]),
+  ]);
+}
+
+export function Elevation(props) {
+  /** Renders an elevation value in meters and a parenthetical conversion to feet. */
+  const { elevation, className, includeFeet = true } = props;
+  if (elevation == null) return null;
+  return h("div.elevation", { className }, [
+    h(ValueWithUnit, { value: elevation, unit: "m" }),
+    h.if(includeFeet)("span.secondary", [
+      " (",
+      h(ValueWithUnit, { value: metersToFeet(elevation), unit: "ft" }),
+      ")",
+    ]),
+  ]);
+}

package/src/location-info/utils.ts

@@ -0,0 +1,44 @@
+import { format } from "d3-format";
+
+export function formatCoordForZoomLevel(val: number, zoom: number): string {
+  if (zoom < 2) {
+    return fmt1(val);
+  } else if (zoom < 4) {
+    return fmt2(val);
+  } else if (zoom < 7) {
+    return fmt3(val);
+  }
+  return fmt4(val);
+}
+
+export function normalizeLng(lng) {
+  // via https://github.com/Leaflet/Leaflet/blob/32c9156cb1d1c9bd53130639ec4d8575fbeef5a6/src/core/Util.js#L87
+  return (((((lng - 180) % 360) + 360) % 360) - 180).toFixed(4);
+}
+
+export const fmt4 = format(".4~f");
+export const fmt3 = format(".3~f");
+export const fmt2 = format(".2~f");
+export const fmt1 = format(".1~f");
+export const fmtInt = format(".0f");
+
+export function formatValue(val: number, precision: number = 0): string {
+  switch (precision) {
+    case 4:
+      return fmt4(val);
+    case 3:
+      return fmt3(val);
+    case 2:
+      return fmt2(val);
+    case 1:
+      return fmt1(val);
+    case 0:
+      return fmtInt(val);
+    default:
+      return fmt4(val);
+  }
+}
+
+export function metersToFeet(meters, precision = 0) {
+  return (meters * 3.28084).toFixed(precision);
+}

package/src/location-panel/header.ts

@@ -0,0 +1,86 @@
+import { Icon, Button } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import { useToaster } from "@macrostrat/ui-components";
+import { LngLatCoords, Elevation } from "../location-info";
+import {
+  LocationFocusButton,
+  useFocusState,
+  isCentered,
+} from "@macrostrat/mapbox-react";
+
+const h = hyper.styled(styles);
+
+function PositionButton({ position }) {
+  const focusState = useFocusState(position);
+
+  return h("div.position-controls", [
+    h(LocationFocusButton, { location: position, focusState }, []),
+    isCentered(focusState) ? h(CopyLinkButton, { itemName: "position" }) : null,
+  ]);
+}
+
+function CopyLinkButton({ itemName, children, onClick, ...rest }) {
+  const toaster = useToaster();
+
+  let message = `Copied link`;
+  if (itemName != null) {
+    message += ` to ${itemName}`;
+  }
+  message += "!";
+
+  return h(
+    Button,
+    {
+      className: "copy-link-button",
+      rightIcon: h(Icon, { icon: "link", size: 12 }),
+      minimal: true,
+      small: true,
+      onClick() {
+        navigator.clipboard.writeText(window.location.href).then(
+          () => {
+            toaster?.show({
+              message,
+              intent: "success",
+              icon: "clipboard",
+              timeout: 1000,
+            });
+            onClick?.();
+          },
+          () => {
+            toaster?.show({
+              message: "Failed to copy link",
+              intent: "danger",
+              icon: "error",
+              timeout: 1000,
+            });
+          }
+        );
+      },
+      ...rest,
+    },
+    children ?? "Copy link"
+  );
+}
+
+interface InfoDrawerHeaderProps {
+  onClose: () => void;
+  position: mapboxgl.LngLat;
+  zoom?: number;
+  elevation?: number;
+}
+
+export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
+  const { onClose, position, zoom = 7, elevation } = props;
+
+  return h("header.location-panel-header", [
+    h(PositionButton, { position }),
+    h("div.spacer"),
+    h(LngLatCoords, { position, zoom, className: "infodrawer-header-item" }),
+    h.if(elevation != null)(Elevation, {
+      elevation,
+      className: "infodrawer-header-item",
+    }),
+    h(Button, { minimal: true, icon: "cross", onClick: onClose }),
+  ]);
+}

package/src/location-panel/index.ts

@@ -0,0 +1,22 @@
+import { Card } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import { InfoDrawerHeader } from "./header";
+import classNames from "classnames";
+import styles from "./main.module.sass";
+import { ErrorBoundary } from "@macrostrat/ui-components";
+
+const h = hyper.styled(styles);
+
+export function InfoDrawerContainer(props) {
+  const className = classNames("infodrawer", props.className);
+  return h(Card, { ...props, className });
+}
+
+export function LocationPanel(props) {
+  const { children, className, loading = false, ...rest } = props;
+  const cls = classNames("location-panel", className, { loading });
+  return h(InfoDrawerContainer, { className: cls }, [
+    h(InfoDrawerHeader, rest),
+    h("div.infodrawer-body", h("div.infodrawer-contents", h(ErrorBoundary, null, children))),
+  ]);
+}

package/src/location-panel/main.module.sass

@@ -0,0 +1,53 @@
+.copy-link-button:global(.bp4-minimal.bp4-button)
+  color: var(--text-subtle-color)
+  svg
+    fill: var(--text-subtle-color)
+
+.location-panel-header
+  padding: 5px
+  display: flex
+  flex-direction: row
+  align-items: center
+  gap: 1em
+  border-bottom: 1px solid var(--panel-rule-color)
+  .spacer
+    flex-grow: 1
+  .left-icon
+    padding: 7px
+
+  .position-controls :global(.bp4-button)
+    font-size: 12px !important
+
+.infodrawer-header-item
+  font-size: 12px
+  :global(.secondary)
+    font-size: 0.9em
+    color: var(--text-subtle-color)
+
+.infodrawer
+  pointer-events: all
+  max-height: 100%
+  max-width: 100%
+  height: fit-content
+  display: flex
+  flex-direction: column
+  overflow: hidden
+  &:global(.bp4-card)
+    padding: 0
+
+  &.loading
+    .infodrawer-body
+      overflow-y: hidden
+      min-height: 70px
+
+.infodrawer-body
+  flex-shrink: 1
+  min-height: 0
+  transition: min-height 0.5s ease
+  overflow-y: scroll
+  position: relative
+
+// TODO: remove this when we have a better way to handle card media queries
+@media screen and (max-width: 768px)
+  .infodrawer
+    border-radius: var(--panel-border-radius, 0px)