@macrostrat/map-interface 1.2.4 → 1.3.1

package/src/context-panel/index.ts

@@ -1,9 +1,9 @@
-import { useMemo } from "react";
 import { Navbar, Button, Spinner, Card, Text } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
 import { useMapStatus } from "@macrostrat/mapbox-react";
 import { Spacer } from "@macrostrat/ui-components";
+import type { ReactNode } from "react";
 
 const h = hyper.styled(styles);
 
@@ -19,7 +19,7 @@ export function LoadingButton({
 }) {
   return h(Button, {
     className: "loading-button",
-    icon: isLoading ? spinnerElement : icon,
+    icon: (isLoading ? spinnerElement : icon) as any,
     large,
     minimal: true,
     onClick,
@@ -28,12 +28,12 @@ export function LoadingButton({
   });
 }
 
-export function MapLoadingButton(props) {
+export function MapLoadingButton(props: any) {
   const isLoading = useMapStatus((s) => s.isLoading);
   return h(LoadingButton, { ...props, isLoading });
 }
 
-type AnyChildren = React.ReactNode;
+type AnyChildren = ReactNode;
 
 export interface FloatingNavbarProps {
   className?: string;
@@ -58,12 +58,12 @@ export function FloatingNavbar({
   width,
   style = {},
 }: FloatingNavbarProps) {
-  let _rightElement: React.ReactNode | null = null;
+  let _rightElement: ReactNode | null = null;
   if (rightElement != null) {
     _rightElement = h("div.right-element", rightElement);
   }
 
-  let _headerElement: React.ReactNode | null = headerElement;
+  let _headerElement: ReactNode | null = headerElement;
   if (title != null && _headerElement == null) {
     if (typeof title === "string") {
       _headerElement = h(Text, { tagName: "h2", ellipsize: true }, title);
@@ -84,13 +84,13 @@ export function FloatingNavbar({
           className: "searchbar navbar panel",
           style: { height, ...style },
         },
-        [_headerElement, children, _rightElement]
+        [_headerElement, children, _rightElement],
       ),
     ]),
     h.if(statusElement != null)(
       Card,
       { className: "status-tongue" },
-      statusElement
+      statusElement,
     ),
   ]);
 }

package/src/dev/map-page.ts

@@ -7,7 +7,7 @@ import { useCallback, useState, useEffect } from "react";
 import { buildInspectorStyle } from "./xray";
 import { MapAreaContainer, PanelCard } from "../container";
 import { FloatingNavbar, MapLoadingButton } from "../context-panel";
-import { MapMarker } from "../helpers";
+import { MapMarker, useBasicMapStyle } from "../helpers";
 import { LocationPanel } from "../location-panel";
 import { MapView } from "../map-view";
 import styles from "./main.module.sass";
@@ -67,15 +67,7 @@ export function MapInspectorV2({
     mapboxgl.accessToken = mapboxToken;
   }
 
-  if (styleType == "macrostrat") {
-    style ??= isEnabled
-      ? "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true"
-      : "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true";
-  } else {
-    style ??= isEnabled
-      ? "mapbox://styles/mapbox/dark-v10"
-      : "mapbox://styles/mapbox/light-v10";
-  }
+  style ??= useBasicMapStyle({ styleType });
 
   const [isOpen, setOpen] = useState(false);
 
@@ -123,7 +115,7 @@ export function MapInspectorV2({
           },
         }),
         h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),
-      ]
+      ],
     );
   }
 
@@ -183,8 +175,8 @@ export function MapInspectorV2({
         }),
         h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
         children,
-      ]
-    )
+      ],
+    ),
   );
 }
 

package/src/dev/tile-extent.ts

@@ -38,7 +38,7 @@ export function TileExtentLayer({
       style.layers.push(layer);
       map.setStyle(style);
     },
-    [color]
+    [color],
   );
   const map = useMapRef();
   useMapConditionalStyle(map, tile, styleCallback);

package/src/dev/vector-tile-features.ts

@@ -178,7 +178,11 @@ function UnitNumber({ value, unit, precision = 1 }) {
   ]);
 }
 
-export function FeaturePanel({ features, focusedSource = null }) {
+export function FeaturePanel({
+  features,
+  focusedSource = null,
+  focusedSourceTitle = null,
+}) {
   if (features == null) return null;
 
   let focusedSourcePanel = null;
@@ -190,7 +194,7 @@ export function FeaturePanel({ features, focusedSource = null }) {
     focusedSourcePanel = h(
       ExpansionPanel,
       {
-        title: "Macrostrat features",
+        title: focusedSourceTitle ?? "Macrostrat features",
         className: "macrostrat-features",
         expanded: true,
       },
@@ -199,7 +203,7 @@ export function FeaturePanel({ features, focusedSource = null }) {
           features,
           sourceID: focusedSource,
         }),
-      ]
+      ],
     );
     filteredFeatures = features.filter((d) => d.source != focusedSource);
   }
@@ -213,7 +217,7 @@ export function FeaturePanel({ features, focusedSource = null }) {
         h(FeatureGroups, {
           features: filteredFeatures,
         }),
-      ]
+      ],
     ),
   ]);
 }
@@ -222,7 +226,7 @@ function FeatureGroups({ features }) {
   /** Group features by source and sourceLayer */
   if (features == null) return null;
 
-  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);
+  const groups = group(features, (d: any) => `${d.source} - ${d.sourceLayer}`);
 
   return h(
     "div.feature-groups",
@@ -231,13 +235,13 @@ function FeatureGroups({ features }) {
         h(FeatureHeader, { feature: features[0] }),
         h(Features, { features }),
       ]);
-    })
+    }),
   );
 }
 
 export function Features({ features }) {
   return h(
     "div.features",
-    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))
+    features.map((feature, i) => h(FeatureRecord, { key: i, feature })),
   );
 }

package/src/dev/xray.ts

@@ -11,7 +11,7 @@ interface XRayOptions {
 
 export async function buildXRayStyle(
   baseStyle: string | object,
-  params: XRayOptions = null
+  params: XRayOptions = null,
 ) {
   const {
     inDarkMode = false,
@@ -24,7 +24,11 @@ export async function buildXRayStyle(
 
   let layers = [];
   for (let layer of style.layers) {
-    if (!sources.includes(layer.source)) {
+    if (
+      "source" in layer &&
+      typeof layer.source === "string" &&
+      !sources.includes(layer.source)
+    ) {
       layers.push(layer);
       continue;
     }
@@ -90,7 +94,7 @@ type InspectorStyleOptions = XRayOptions & {
 export async function buildInspectorStyle(
   baseStyle: mapboxgl.Style | string,
   overlayStyle: mapboxgl.Style | string | null = null,
-  params: InspectorStyleOptions = {}
+  params: InspectorStyleOptions = {},
 ) {
   const {
     mapboxToken,

package/src/expansion-panel/headers.ts

@@ -11,7 +11,7 @@ export function PanelSubhead(props) {
       {
         className: "title",
       },
-      title
+      title,
     ),
     children,
   ]);

package/src/expansion-panel/index.ts

@@ -20,7 +20,7 @@ function ExpansionPanelSummary(props) {
       title,
       component: titleComponent,
     },
-    [children, h(Icon, { icon, className: "expansion-panel-icon" })]
+    [children, h(Icon, { icon, className: "expansion-panel-icon" })],
   );
 }
 
@@ -63,10 +63,10 @@ function ExpansionPanelBase(props) {
           h("span.expansion-panel-subtext", helpText),
           " ",
           sideComponent,
-        ])
+        ]),
       ),
       h(Collapse, { isOpen }, h("div.expansion-children", null, children)),
-    ]
+    ],
   );
 }
 
@@ -113,7 +113,7 @@ function ExpandableDetailsPanel(props) {
     h(
       Collapse,
       { isOpen },
-      h("div.expandable-details-children", null, children)
+      h("div.expandable-details-children", null, children),
     ),
   ]);
 }

package/src/helpers.ts

@@ -21,7 +21,7 @@ export function MapResizeManager({ containerRef }) {
   const debouncedResize = useRef(
     debounce(() => {
       mapRef.current?.resize();
-    }, 100)
+    }, 100),
   );
 
   useResizeObserver({
@@ -48,7 +48,7 @@ export function MapPaddingManager({
   const mapRef = useMapRef();
 
   const [padding, setPadding] = useState(
-    getMapPadding(containerRef, parentRef)
+    getMapPadding(containerRef, parentRef),
   );
 
   const _updateMapPadding = useCallback(() => {
@@ -58,7 +58,7 @@ export function MapPaddingManager({
 
   const updateMapPadding = useMemo(
     () => debounce(_updateMapPadding, debounceTime),
-    [_updateMapPadding, debounceTime]
+    [_updateMapPadding, debounceTime],
   );
 
   useEffect(() => {
@@ -113,12 +113,19 @@ export function MapMovedReporter({ onMapMoved = null }) {
   return null;
 }
 
+interface MapLoadingReporterProps {
+  ignoredSources?: string[];
+  onMapLoading?: (evt: mapboxgl.MapEvent) => void;
+  onMapIdle?: (evt: mapboxgl.MapEvent) => void;
+  mapIsLoading?: boolean;
+}
+
 export function MapLoadingReporter({
   ignoredSources,
   onMapLoading = null,
   onMapIdle = null,
   mapIsLoading,
-}) {
+}: MapLoadingReporterProps) {
   const mapRef = useMapRef();
   const loadingRef = useRef(false);
   const dispatch = useMapDispatch();
@@ -184,9 +191,36 @@ export function MapMarker({ position, setPosition, centerMarker = true }) {
   return null;
 }
 
-export function useBasicStylePair() {
+export function useBasicMapStyle(
+  opts: {
+    styleType?: "macrostrat" | "standard";
+  } = {},
+) {
+  const { styleType } = opts;
   const inDarkMode = useInDarkMode();
-  return inDarkMode
-    ? "mapbox://styles/mapbox/dark-v10"
-    : "mapbox://styles/mapbox/light-v10";
+
+  const props = useMemo(() => {
+    return { styleType, inDarkMode };
+  }, [styleType, inDarkMode]);
+
+  return getBasicMapStyle(props);
 }
+
+export function getBasicMapStyle(opts: {
+  styleType?: "macrostrat" | "standard";
+  inDarkMode?: boolean;
+}) {
+  const { styleType = "macrostrat", inDarkMode = false } = opts ?? {};
+
+  if (styleType == "macrostrat") {
+    return inDarkMode
+      ? "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true"
+      : "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true";
+  } else {
+    return inDarkMode
+      ? "mapbox://styles/mapbox/dark-v10"
+      : "mapbox://styles/mapbox/light-v10";
+  }
+}
+
+export const useBasicStylePair = useBasicMapStyle;

package/src/location-info/hash-string.ts

@@ -16,7 +16,7 @@ interface LocationHashParams {
 
 export function applyMapPositionToHash(
   args: LocationHashParams,
-  mapPosition: MapPosition | null
+  mapPosition: MapPosition | null,
 ) {
   const pos = mapPosition?.camera;
   if (pos == null) return;
@@ -53,7 +53,7 @@ function _fmt(x: string | number | string[]) {
 
 export function getMapPositionForHash(
   hashData: ParsedQuery<string>,
-  centerPosition: LatLng | null
+  centerPosition: LatLng | null,
 ): MapPosition {
   const {
     x = centerPosition?.lng ?? 0,

package/src/location-info/index.ts

@@ -5,6 +5,7 @@ import {
   normalizeLng,
 } from "@macrostrat/mapbox-utils";
 import { formatValue } from "./utils";
+import { LngLat } from "mapbox-gl";
 
 export * from "./hash-string";
 
@@ -29,12 +30,12 @@ export function DegreeCoord(props) {
 
 export interface LngLatProps {
   /** Map position */
-  position: [number, number] | { lat: number; lng: number };
+  position: mapboxgl.LngLatLike | null;
   className?: string;
   /** Zoom level (used to infer coordinate rounding if provided) */
-  zoom?: number | null;
+  zoom?: number;
   /** Number of decimal places to round coordinates to */
-  precision: number | null;
+  precision?: number;
   /** Function to format coordinates */
   format?: (val: number, precision: number) => string;
 }
@@ -46,11 +47,19 @@ export function LngLatCoords(props: LngLatProps) {
   if (position == null) {
     return null;
   }
-  let lat, lng;
+
+  let lat: number;
+  let lng: number;
   if (Array.isArray(position)) {
     [lng, lat] = position;
-  } else {
-    ({ lat, lng } = position);
+  } else if (position instanceof LngLat) {
+    [lng, lat] = position.toArray();
+  } else if ("lng" in position) {
+    lat = position.lat;
+    lng = position.lng;
+  } else if ("lon" in position) {
+    lat = position.lat;
+    lng = position.lon;
   }
 
   if (zoom != null && format == null && precision == null) {

package/src/location-panel/header.ts

@@ -9,6 +9,8 @@ import {
   isCentered,
 } from "@macrostrat/mapbox-react";
 import classNames from "classnames";
+import type { ReactNode } from "react";
+import type { LngLatBounds, LngLatLike } from "mapbox-gl";
 
 const h = hyper.styled(styles);
 
@@ -59,24 +61,24 @@ function CopyLinkButton({ itemName, children, onClick, ...rest }) {
               icon: "error",
               timeout: 1000,
             });
-          }
+          },
         );
       },
       ...rest,
     },
-    children ?? "Copy link"
+    children ?? "Copy link",
   );
 }
 
 export interface InfoDrawerHeaderProps {
   onClose?: () => void;
-  position?: mapboxgl.LngLat;
+  position?: LngLatLike;
   zoom?: number;
   elevation?: number;
   showCopyPositionButton?: boolean;
-  bounds?: mapboxgl.LngLatBounds;
+  bounds?: LngLatBounds;
   fixedHeight?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   className?: string;
 }
 
@@ -125,6 +127,6 @@ export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
         icon: "cross",
         onClick: onClose,
       }),
-    ]
+    ],
   );
 }

package/src/main.module.sass

@@ -61,6 +61,7 @@
   & > *
     flex: 1
 
+
 .map-control-stack
   display: flex
   flex-direction: column
@@ -89,6 +90,9 @@
   flex-grow: 1
   position: relative
   overflow: hidden
+  &.standalone
+    height: 100%
+    width: 100%
 
 .mapbox-map
   position: absolute
@@ -102,6 +106,13 @@
     position: absolute
 
 
+  /** These styles seem to help with weird map zooming behavior */
+  :global(.mapboxgl-canvas), :global(.mapboxgl-canvas-container)
+    position: relative
+    left: 0
+    top: 0
+
+
 .context-panel-holder > :global(.bp5-card)
   padding: 10px
   background-color: var(--panel-background-color)
@@ -376,7 +387,8 @@
   /* Make map fill page rather than containing div,
    by unsetting map position */
   // We should move this to another file.
-  .map-view-container
+
+  .map-view-container:not(.standalone)
     position: unset
 
 
@@ -440,11 +452,6 @@
     .context-stack .spacer
       min-height: 1em
 
-  /* Make map fill page rather than containing div,
-   by unsetting map position */
-  .map-view-container
-    position: unset
-
 /** CSS Transitions **/
 
 .map-container