Outcrops -> Field Locations

packages/data-components/src/outcrops/base.ts → packages/data-components/src/field-locations/base.ts

@@ -1,9 +1,21 @@
 import hyper from "@macrostrat/hyper";
 import { Icon } from "@blueprintjs/core";
 import styles from "./base.module.sass";
+import type { AnyMapPosition } from "@macrostrat/mapbox-utils";
 
 const h = hyper.styled(styles);
 
+interface LocationBasicInfoProps {
+  title: string | null;
+  year: string;
+  description?: string;
+  imageURL?: string;
+  link: string;
+  rating?: number;
+  className?: string;
+  location: AnyMapPosition;
+}
+
 export function LocationBasicInfo({
   title,
   year,
@@ -12,15 +24,8 @@ export function LocationBasicInfo({
   link,
   rating,
   className,
-}: {
-  title: string | null;
-  year: string;
-  description?: string;
-  imageURL?: string;
-  link: string;
-  rating?: number;
-  className?: string;
-}) {
+  location,
+}: LocationBasicInfoProps) {
   let _title = title ?? "";
   let headerClassName = null;
   if (title == "") {
@@ -30,6 +35,7 @@ export function LocationBasicInfo({
 
   return h("div.location-basic-info", { className }, [
     h("div.location-header", { className: headerClassName }, [
+      h.if(location != null)(LocationButton, { location }),
       h("h3.title", [title]),
       h("h4.year", [year]),
       h(LocationLink, { href: link }),
@@ -70,3 +76,15 @@ export function LocationLink({
     [h(Icon, { icon: "link", size: 14 }), children]
   );
 }
+
+function LocationButton({
+  location,
+  onClick,
+}: {
+  location: AnyMapPosition;
+  onClick?: () => void;
+}) {
+  return h("button.location-button", { onClick }, [
+    h(Icon, { icon: "map-marker" }),
+  ]);
+}

packages/data-components/src/outcrops/checkins.stories.ts → packages/data-components/src/field-locations/checkins.stories.ts

@@ -32,7 +32,7 @@ const checkinExamples = {
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<CheckinListingProps> = {
-  title: "Outcrops/Checkin listing",
+  title: "Field locations/Checkin listing",
   component: CheckinListing,
   argTypes: {
     checkin: {

packages/data-components/src/outcrops/spots.stories.ts → packages/data-components/src/field-locations/spots.stories.ts

@@ -136,7 +136,7 @@ const spotExamples = {
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<SpotListingProps> = {
-  title: "Outcrops/StraboSpot featured spots",
+  title: "Field locations/StraboSpot featured spots",
   component: SpotListing,
   argTypes: {
     spot: {

packages/data-components/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./components";
 export * from "./dz-spectrum";
+export * from "./field-locations";

packages/mapbox-utils/src/position.ts

@@ -39,7 +39,7 @@ export function getMapPosition(map: Map): MapPosition {
   };
 }
 
-export function setMapPosition(map: Map, pos: MapPosition) {
+function _setMapPosition(map: Map, pos: MapPosition) {
   const { pitch = 0, bearing = 0, altitude } = pos.camera;
   const zoom = pos.target?.zoom;
   if (zoom != null && altitude == null && pitch == 0 && bearing == 0) {
@@ -57,3 +57,28 @@ export function setMapPosition(map: Map, pos: MapPosition) {
     map.setFreeCameraOptions(cameraOptions);
   }
 }
+
+/* A set of position-setting functions that are hopefully more ergonomic than
+  a fully resolved map target and camera position. */
+export type AnyMapPosition =
+  | MapPosition
+  | TargetPosition
+  | CameraPosition
+  | LatLng
+  | [number, number];
+
+export function setMapPosition(map: Map, pos: AnyMapPosition) {
+  if (Array.isArray(pos)) {
+    map.setCenter(pos);
+  } else if ("lng" in pos) {
+    const { lng, lat } = pos;
+    if ("zoom" in pos) {
+      map.setZoom(pos.zoom);
+    }
+    map.setCenter([lng, lat]);
+  } else if ("altitude" in pos) {
+    _setMapPosition(map, { camera: pos });
+  } else if ("camera" in pos) {
+    _setMapPosition(map, pos);
+  }
+}