@macrostrat/map-interface 1.6.0 → 2.0.1

package/dist/map-view.cjs

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const h$1 = require("@macrostrat/hyper");
+const mapboxReact = require("@macrostrat/mapbox-react");
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+const classNames = require("classnames");
+const mapboxgl = require("mapbox-gl");
+const React = require("react");
+const main_module = require("./main.module.sass.cjs");
+const helpers = require("./helpers.cjs");
+;/* empty css                               */
+const utils = require("./utils.cjs");
+const uiComponents = require("@macrostrat/ui-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const h__default = /* @__PURE__ */ _interopDefault(h$1);
+const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
+const mapboxgl__default = /* @__PURE__ */ _interopDefault(mapboxgl);
+const h = h__default.default.styled(main_module.default);
+function defaultInitializeMap(container, args = {}) {
+  const { mapPosition, ...rest } = args;
+  const map = new mapboxgl__default.default.Map({
+    container,
+    maxZoom: 18,
+    logoPosition: "bottom-left",
+    trackResize: false,
+    antialias: true,
+    // This is a legacy option for Mapbox GL v2
+    // @ts-ignore
+    optimizeForTerrain: true,
+    ...rest
+  });
+  let _mapPosition = mapPosition;
+  if (_mapPosition == null && rest.center == null && rest.bounds == null) {
+    _mapPosition = defaultMapPosition;
+  }
+  if (_mapPosition != null) {
+    mapboxUtils.setMapPosition(map, _mapPosition);
+  }
+  return map;
+}
+const defaultMapPosition = {
+  camera: {
+    lat: 34,
+    lng: -120,
+    altitude: 3e5
+  }
+};
+function MapView(props) {
+  let { terrainSourceID } = props;
+  const {
+    enableTerrain = true,
+    style,
+    mapPosition,
+    initializeMap = defaultInitializeMap,
+    children,
+    mapboxToken,
+    // Deprecated
+    accessToken,
+    infoMarkerPosition,
+    transformRequest,
+    projection,
+    onMapLoaded = null,
+    onStyleLoaded = null,
+    onMapMoved = null,
+    standalone = false,
+    overlayStyles,
+    transformStyle,
+    trackResize = true,
+    loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
+    id = "map",
+    className,
+    ...rest
+  } = props;
+  if (enableTerrain) {
+    terrainSourceID ??= "mapbox-3d-dem";
+  }
+  React.useEffect(() => {
+    if (id != null) {
+      console.warn(
+        "Setting a specific element ID for the map is deprecated. Please use className instead."
+      );
+    }
+  }, [id]);
+  const _mapboxToken = mapboxToken ?? accessToken;
+  if (_mapboxToken != null) {
+    mapboxgl__default.default.accessToken = _mapboxToken;
+  }
+  const dispatch = mapboxReact.useMapDispatch();
+  let mapRef = mapboxReact.useMapRef();
+  const ref = React.useRef();
+  const parentRef = React.useRef();
+  const [baseStyle, setBaseStyle] = React.useState(null);
+  const estMapPosition = mapRef.current == null ? mapPosition : mapboxUtils.getMapPosition(mapRef.current);
+  const { mapUse3D, mapIsRotated } = mapboxUtils.mapViewInfo(estMapPosition);
+  const is3DAvailable = (mapUse3D ?? false) && enableTerrain;
+  React.useEffect(() => {
+    if (baseStyle == null) return;
+    let map = mapRef.current;
+    let newStyle = baseStyle;
+    const overlayStyles2 = props.overlayStyles ?? [];
+    if (overlayStyles2.length > 0) {
+      newStyle = mapboxUtils.mergeStyles(newStyle, ...overlayStyles2);
+    }
+    if (is3DAvailable) {
+      const terrainStyle = mapboxReact.getTerrainLayerForStyle(newStyle, terrainSourceID);
+      newStyle = mapboxUtils.mergeStyles(newStyle, terrainStyle);
+    }
+    if (transformStyle != null) {
+      newStyle = transformStyle(newStyle);
+    }
+    if (map != null) {
+      dispatch({ type: "set-style-loaded", payload: false });
+      map.setStyle(newStyle);
+    } else {
+      const map2 = initializeMap(ref.current, {
+        style: newStyle,
+        projection,
+        mapPosition,
+        transformRequest,
+        ...rest
+      });
+      dispatch({ type: "set-map", payload: map2 });
+      map2.setPadding(utils.getMapPadding(ref, parentRef), { animate: false });
+      onMapLoaded?.(map2);
+    }
+  }, [baseStyle, overlayStyles, transformStyle]);
+  uiComponents.useAsyncEffect(async () => {
+    let newStyle;
+    if (typeof style === "string") {
+      newStyle = await mapboxUtils.getMapboxStyle(style, {
+        access_token: mapboxgl__default.default.accessToken
+      });
+    } else {
+      newStyle = style;
+    }
+    setBaseStyle(newStyle);
+  }, [style]);
+  const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
+  const mapClassName = classNames__default.default(
+    {
+      "is-rotated": mapIsRotated ?? false,
+      "is-3d-available": is3DAvailable
+    },
+    `${_projection}-projection`
+  );
+  const parentClassName = classNames__default.default(
+    {
+      standalone
+    },
+    className
+  );
+  return h(
+    "div.map-view-container.main-view",
+    { ref: parentRef, className: parentClassName },
+    [
+      h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
+      h(helpers.MapLoadingReporter, {
+        ignoredSources: loadingIgnoredSources
+      }),
+      h(StyleLoadedReporter, { onStyleLoaded }),
+      h(helpers.MapMovedReporter, { onMapMoved }),
+      // Subsitute for trackResize: true that allows map resizing to
+      // be tied to a specific ref component
+      h.if(trackResize)(helpers.MapResizeManager, { containerRef: ref }),
+      h(helpers.MapPaddingManager, {
+        containerRef: ref,
+        parentRef,
+        infoMarkerPosition
+      }),
+      h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),
+      children
+    ]
+  );
+}
+function StyleLoadedReporter({ onStyleLoaded = null }) {
+  const isStyleLoaded = mapboxReact.useMapStatus((state) => state.isStyleLoaded);
+  const mapRef = mapboxReact.useMapRef();
+  const dispatch = mapboxReact.useMapDispatch();
+  React.useEffect(() => {
+    if (isStyleLoaded) return;
+    const interval = setInterval(() => {
+      const map = mapRef.current;
+      if (map == null) return;
+      if (map.isStyleLoaded()) {
+        dispatch({ type: "set-style-loaded", payload: true });
+        onStyleLoaded?.(map);
+        clearInterval(interval);
+      }
+    }, 50);
+    return () => clearInterval(interval);
+  }, [isStyleLoaded]);
+  return null;
+}
+function MapTerrainManager({
+  mapUse3D,
+  terrainSourceID,
+  style
+}) {
+  mapboxReact.use3DTerrain(mapUse3D, terrainSourceID);
+  return null;
+}
+exports.MapTerrainManager = MapTerrainManager;
+exports.MapView = MapView;
+//# sourceMappingURL=map-view.cjs.map

package/dist/map-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-view.cjs","sources":["../src/map-view.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  useMapRef,\n  useMapDispatch,\n  use3DTerrain,\n  getTerrainLayerForStyle,\n  useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport React from \"react\";\nimport {\n  mapViewInfo,\n  MapPosition,\n  setMapPosition,\n  getMapPosition,\n  getMapboxStyle,\n  mergeStyles,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useState } from \"react\";\nimport styles from \"./main.module.sass\";\nimport {\n  MapLoadingReporter,\n  MapMovedReporter,\n  MapPaddingManager,\n  MapResizeManager,\n} from \"./helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"./utils\";\nimport { useAsyncEffect } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\ntype MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, \"container\">;\n\nexport interface MapViewProps extends MapboxCoreOptions {\n  showLineSymbols?: boolean;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  // Deprecated\n  accessToken?: string;\n  terrainSourceID?: string;\n  enableTerrain?: boolean;\n  infoMarkerPosition?: mapboxgl.LngLatLike;\n  mapPosition?: MapPosition;\n  initializeMap?: (\n    container: HTMLElement,\n    args: MapboxOptionsExt,\n  ) => mapboxgl.Map;\n  onMapLoaded?: (map: mapboxgl.Map) => void;\n  onStyleLoaded?: (map: mapboxgl.Map) => void;\n  onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;\n  /** This map sets its own viewport, rather than being positioned by a parent.\n   * This is a hack to ensure that the map can overflow its \"safe area\" when false */\n  standalone?: boolean;\n  /** Overlay styles to apply to the map: a list of mapbox style objects or fragments to\n   * overlay on top of the main map style at runtime */\n  overlayStyles?: Partial<mapboxgl.StyleSpecification>[];\n  /** A function to transform the map style before it is loaded */\n  transformStyle?: (\n    style: mapboxgl.StyleSpecification,\n  ) => mapboxgl.StyleSpecification;\n  loadingIgnoredSources?: string[];\n  id?: string;\n  className?: string;\n}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n  mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n  const { mapPosition, ...rest } = args;\n\n  const map = new mapboxgl.Map({\n    container,\n    maxZoom: 18,\n    logoPosition: \"bottom-left\",\n    trackResize: false,\n    antialias: true,\n    // This is a legacy option for Mapbox GL v2\n    // @ts-ignore\n    optimizeForTerrain: true,\n    ...rest,\n  });\n\n  let _mapPosition = mapPosition;\n  if (_mapPosition == null && rest.center == null && rest.bounds == null) {\n    // If no map positioning information is provided, we use the default\n    _mapPosition = defaultMapPosition;\n  }\n\n  // set initial map position\n  if (_mapPosition != null) {\n    setMapPosition(map, _mapPosition);\n  }\n\n  return map;\n}\n\nconst defaultMapPosition: MapPosition = {\n  camera: {\n    lat: 34,\n    lng: -120,\n    altitude: 300000,\n  },\n};\n\nexport function MapView(props: MapViewProps) {\n  let { terrainSourceID } = props;\n  const {\n    enableTerrain = true,\n    style,\n    mapPosition,\n    initializeMap = defaultInitializeMap,\n    children,\n    mapboxToken,\n    // Deprecated\n    accessToken,\n    infoMarkerPosition,\n    transformRequest,\n    projection,\n    onMapLoaded = null,\n    onStyleLoaded = null,\n    onMapMoved = null,\n    standalone = false,\n    overlayStyles,\n    transformStyle,\n    trackResize = true,\n    loadingIgnoredSources = [\"elevationMarker\", \"crossSectionEndpoints\"],\n    id = \"map\",\n    className,\n    ...rest\n  } = props;\n  if (enableTerrain) {\n    terrainSourceID ??= \"mapbox-3d-dem\";\n  }\n\n  useEffect(() => {\n    if (id != null) {\n      console.warn(\n        \"Setting a specific element ID for the map is deprecated. Please use className instead.\",\n      );\n    }\n  }, [id]);\n\n  const _mapboxToken = mapboxToken ?? accessToken;\n\n  if (_mapboxToken != null) {\n    mapboxgl.accessToken = _mapboxToken;\n  }\n\n  const dispatch = useMapDispatch();\n  let mapRef = useMapRef();\n  const ref = useRef<HTMLDivElement>();\n  const parentRef = useRef<HTMLDivElement>();\n\n  const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);\n\n  const estMapPosition: MapPosition | null =\n    mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);\n  const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);\n  const is3DAvailable = (mapUse3D ?? false) && enableTerrain;\n\n  useEffect(() => {\n    /** Manager to update map style */\n    if (baseStyle == null) return;\n    let map = mapRef.current;\n\n    let newStyle: mapboxgl.StyleSpecification = baseStyle;\n\n    const overlayStyles = props.overlayStyles ?? [];\n\n    if (overlayStyles.length > 0) {\n      newStyle = mergeStyles(newStyle, ...overlayStyles);\n    }\n\n    /** If we can, we try to update the map style with terrain information\n     * immediately, before the style is loaded. This allows us to avoid a\n     * flash of the map without terrain.\n     *\n     * To do this, we need to estimate the map position before load, which\n     * doesn't always work.\n     */\n    if (is3DAvailable) {\n      // We can update the style with terrain layers immediately\n      const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);\n      newStyle = mergeStyles(newStyle, terrainStyle);\n    }\n\n    if (transformStyle != null) {\n      newStyle = transformStyle(newStyle);\n    }\n\n    if (map != null) {\n      dispatch({ type: \"set-style-loaded\", payload: false });\n      map.setStyle(newStyle);\n    } else {\n      const map = initializeMap(ref.current, {\n        style: newStyle,\n        projection,\n        mapPosition,\n        transformRequest,\n        ...rest,\n      });\n      dispatch({ type: \"set-map\", payload: map });\n      map.setPadding(getMapPadding(ref, parentRef), { animate: false });\n      onMapLoaded?.(map);\n    }\n  }, [baseStyle, overlayStyles, transformStyle]);\n\n  useAsyncEffect(async () => {\n    /** Manager to update map style */\n    let newStyle: mapboxgl.StyleSpecification;\n    if (typeof style === \"string\") {\n      newStyle = await getMapboxStyle(style, {\n        access_token: mapboxgl.accessToken,\n      });\n    } else {\n      newStyle = style;\n    }\n    setBaseStyle(newStyle);\n  }, [style]);\n\n  // Get map projection\n  const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n  const mapClassName = classNames(\n    {\n      \"is-rotated\": mapIsRotated ?? false,\n      \"is-3d-available\": is3DAvailable,\n    },\n    `${_projection}-projection`,\n  );\n\n  const parentClassName = classNames(\n    {\n      standalone,\n    },\n    className,\n  );\n\n  return h(\n    \"div.map-view-container.main-view\",\n    { ref: parentRef, className: parentClassName },\n    [\n      h(\"div.mapbox-map.map-view\", { ref, className: mapClassName, id }),\n      h(MapLoadingReporter, {\n        ignoredSources: loadingIgnoredSources,\n      }),\n      h(StyleLoadedReporter, { onStyleLoaded }),\n      h(MapMovedReporter, { onMapMoved }),\n      // Subsitute for trackResize: true that allows map resizing to\n      // be tied to a specific ref component\n      h.if(trackResize)(MapResizeManager, { containerRef: ref }),\n      h(MapPaddingManager, {\n        containerRef: ref,\n        parentRef,\n        infoMarkerPosition,\n      }),\n      h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),\n      children,\n    ],\n  );\n}\n\nfunction StyleLoadedReporter({ onStyleLoaded = null }) {\n  /** Check back every 0.1 seconds to see if the map has loaded.\n   * We do it this way because mapboxgl loading events are unreliable */\n  const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);\n  const mapRef = useMapRef();\n  const dispatch = useMapDispatch();\n\n  useEffect(() => {\n    if (isStyleLoaded) return;\n    const interval = setInterval(() => {\n      const map = mapRef.current;\n      if (map == null) return;\n      if (map.isStyleLoaded()) {\n        // Wait a tick before setting the style loaded state\n        dispatch({ type: \"set-style-loaded\", payload: true });\n        onStyleLoaded?.(map);\n        clearInterval(interval);\n      }\n    }, 50);\n    return () => clearInterval(interval);\n  }, [isStyleLoaded]);\n\n  return null;\n}\n\nexport function MapTerrainManager({\n  mapUse3D,\n  terrainSourceID,\n  style,\n}: {\n  mapUse3D?: boolean;\n  terrainSourceID?: string;\n  style?: mapboxgl.StyleSpecification | string;\n}) {\n  use3DTerrain(mapUse3D, terrainSourceID);\n\n  return null;\n}\n"],"names":["hyper","styles","mapboxgl","setMapPosition","useEffect","useMapDispatch","useMapRef","useRef","useState","getMapPosition","mapViewInfo","overlayStyles","mergeStyles","getTerrainLayerForStyle","map","getMapPadding","useAsyncEffect","getMapboxStyle","classNames","MapLoadingReporter","MapMovedReporter","MapResizeManager","MapPaddingManager","useMapStatus","use3DTerrain"],"mappings":"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"}

package/dist/map-view.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { MapPosition } from '@macrostrat/mapbox-utils';
+type MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, "container">;
+export interface MapViewProps extends MapboxCoreOptions {
+    showLineSymbols?: boolean;
+    children?: React.ReactNode;
+    mapboxToken?: string;
+    accessToken?: string;
+    terrainSourceID?: string;
+    enableTerrain?: boolean;
+    infoMarkerPosition?: mapboxgl.LngLatLike;
+    mapPosition?: MapPosition;
+    initializeMap?: (container: HTMLElement, args: MapboxOptionsExt) => mapboxgl.Map;
+    onMapLoaded?: (map: mapboxgl.Map) => void;
+    onStyleLoaded?: (map: mapboxgl.Map) => void;
+    onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;
+    /** This map sets its own viewport, rather than being positioned by a parent.
+     * This is a hack to ensure that the map can overflow its "safe area" when false */
+    standalone?: boolean;
+    /** Overlay styles to apply to the map: a list of mapbox style objects or fragments to
+     * overlay on top of the main map style at runtime */
+    overlayStyles?: Partial<mapboxgl.StyleSpecification>[];
+    /** A function to transform the map style before it is loaded */
+    transformStyle?: (style: mapboxgl.StyleSpecification) => mapboxgl.StyleSpecification;
+    loadingIgnoredSources?: string[];
+    id?: string;
+    className?: string;
+}
+export interface MapboxOptionsExt extends MapboxCoreOptions {
+    mapPosition?: MapPosition;
+}
+export declare function MapView(props: MapViewProps): import('react').ReactElement<{
+    ref: React.MutableRefObject<HTMLDivElement>;
+    className: string;
+}, string | import('react').JSXElementConstructor<any>>;
+export declare function MapTerrainManager({ mapUse3D, terrainSourceID, style, }: {
+    mapUse3D?: boolean;
+    terrainSourceID?: string;
+    style?: mapboxgl.StyleSpecification | string;
+}): any;
+export {};

package/dist/map-view.js

@@ -0,0 +1,200 @@
+import h$1 from "@macrostrat/hyper";
+import { use3DTerrain, useMapDispatch, useMapRef, getTerrainLayerForStyle, useMapStatus } from "@macrostrat/mapbox-react";
+import { getMapPosition, mapViewInfo, mergeStyles, getMapboxStyle, setMapPosition } from "@macrostrat/mapbox-utils";
+import classNames from "classnames";
+import mapboxgl from "mapbox-gl";
+import { useEffect, useRef, useState } from "react";
+import styles from "./main.module.sass.js";
+import { MapLoadingReporter, MapMovedReporter, MapResizeManager, MapPaddingManager } from "./helpers.js";
+/* empty css                             */
+import { getMapPadding } from "./utils.js";
+import { useAsyncEffect } from "@macrostrat/ui-components";
+const h = h$1.styled(styles);
+function defaultInitializeMap(container, args = {}) {
+  const { mapPosition, ...rest } = args;
+  const map = new mapboxgl.Map({
+    container,
+    maxZoom: 18,
+    logoPosition: "bottom-left",
+    trackResize: false,
+    antialias: true,
+    // This is a legacy option for Mapbox GL v2
+    // @ts-ignore
+    optimizeForTerrain: true,
+    ...rest
+  });
+  let _mapPosition = mapPosition;
+  if (_mapPosition == null && rest.center == null && rest.bounds == null) {
+    _mapPosition = defaultMapPosition;
+  }
+  if (_mapPosition != null) {
+    setMapPosition(map, _mapPosition);
+  }
+  return map;
+}
+const defaultMapPosition = {
+  camera: {
+    lat: 34,
+    lng: -120,
+    altitude: 3e5
+  }
+};
+function MapView(props) {
+  let { terrainSourceID } = props;
+  const {
+    enableTerrain = true,
+    style,
+    mapPosition,
+    initializeMap = defaultInitializeMap,
+    children,
+    mapboxToken,
+    // Deprecated
+    accessToken,
+    infoMarkerPosition,
+    transformRequest,
+    projection,
+    onMapLoaded = null,
+    onStyleLoaded = null,
+    onMapMoved = null,
+    standalone = false,
+    overlayStyles,
+    transformStyle,
+    trackResize = true,
+    loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
+    id = "map",
+    className,
+    ...rest
+  } = props;
+  if (enableTerrain) {
+    terrainSourceID ??= "mapbox-3d-dem";
+  }
+  useEffect(() => {
+    if (id != null) {
+      console.warn(
+        "Setting a specific element ID for the map is deprecated. Please use className instead."
+      );
+    }
+  }, [id]);
+  const _mapboxToken = mapboxToken ?? accessToken;
+  if (_mapboxToken != null) {
+    mapboxgl.accessToken = _mapboxToken;
+  }
+  const dispatch = useMapDispatch();
+  let mapRef = useMapRef();
+  const ref = useRef();
+  const parentRef = useRef();
+  const [baseStyle, setBaseStyle] = useState(null);
+  const estMapPosition = mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);
+  const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);
+  const is3DAvailable = (mapUse3D ?? false) && enableTerrain;
+  useEffect(() => {
+    if (baseStyle == null) return;
+    let map = mapRef.current;
+    let newStyle = baseStyle;
+    const overlayStyles2 = props.overlayStyles ?? [];
+    if (overlayStyles2.length > 0) {
+      newStyle = mergeStyles(newStyle, ...overlayStyles2);
+    }
+    if (is3DAvailable) {
+      const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);
+      newStyle = mergeStyles(newStyle, terrainStyle);
+    }
+    if (transformStyle != null) {
+      newStyle = transformStyle(newStyle);
+    }
+    if (map != null) {
+      dispatch({ type: "set-style-loaded", payload: false });
+      map.setStyle(newStyle);
+    } else {
+      const map2 = initializeMap(ref.current, {
+        style: newStyle,
+        projection,
+        mapPosition,
+        transformRequest,
+        ...rest
+      });
+      dispatch({ type: "set-map", payload: map2 });
+      map2.setPadding(getMapPadding(ref, parentRef), { animate: false });
+      onMapLoaded?.(map2);
+    }
+  }, [baseStyle, overlayStyles, transformStyle]);
+  useAsyncEffect(async () => {
+    let newStyle;
+    if (typeof style === "string") {
+      newStyle = await getMapboxStyle(style, {
+        access_token: mapboxgl.accessToken
+      });
+    } else {
+      newStyle = style;
+    }
+    setBaseStyle(newStyle);
+  }, [style]);
+  const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
+  const mapClassName = classNames(
+    {
+      "is-rotated": mapIsRotated ?? false,
+      "is-3d-available": is3DAvailable
+    },
+    `${_projection}-projection`
+  );
+  const parentClassName = classNames(
+    {
+      standalone
+    },
+    className
+  );
+  return h(
+    "div.map-view-container.main-view",
+    { ref: parentRef, className: parentClassName },
+    [
+      h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
+      h(MapLoadingReporter, {
+        ignoredSources: loadingIgnoredSources
+      }),
+      h(StyleLoadedReporter, { onStyleLoaded }),
+      h(MapMovedReporter, { onMapMoved }),
+      // Subsitute for trackResize: true that allows map resizing to
+      // be tied to a specific ref component
+      h.if(trackResize)(MapResizeManager, { containerRef: ref }),
+      h(MapPaddingManager, {
+        containerRef: ref,
+        parentRef,
+        infoMarkerPosition
+      }),
+      h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),
+      children
+    ]
+  );
+}
+function StyleLoadedReporter({ onStyleLoaded = null }) {
+  const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);
+  const mapRef = useMapRef();
+  const dispatch = useMapDispatch();
+  useEffect(() => {
+    if (isStyleLoaded) return;
+    const interval = setInterval(() => {
+      const map = mapRef.current;
+      if (map == null) return;
+      if (map.isStyleLoaded()) {
+        dispatch({ type: "set-style-loaded", payload: true });
+        onStyleLoaded?.(map);
+        clearInterval(interval);
+      }
+    }, 50);
+    return () => clearInterval(interval);
+  }, [isStyleLoaded]);
+  return null;
+}
+function MapTerrainManager({
+  mapUse3D,
+  terrainSourceID,
+  style
+}) {
+  use3DTerrain(mapUse3D, terrainSourceID);
+  return null;
+}
+export {
+  MapTerrainManager,
+  MapView
+};
+//# sourceMappingURL=map-view.js.map

package/dist/map-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-view.js","sources":["../src/map-view.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  useMapRef,\n  useMapDispatch,\n  use3DTerrain,\n  getTerrainLayerForStyle,\n  useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport React from \"react\";\nimport {\n  mapViewInfo,\n  MapPosition,\n  setMapPosition,\n  getMapPosition,\n  getMapboxStyle,\n  mergeStyles,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useState } from \"react\";\nimport styles from \"./main.module.sass\";\nimport {\n  MapLoadingReporter,\n  MapMovedReporter,\n  MapPaddingManager,\n  MapResizeManager,\n} from \"./helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"./utils\";\nimport { useAsyncEffect } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\ntype MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, \"container\">;\n\nexport interface MapViewProps extends MapboxCoreOptions {\n  showLineSymbols?: boolean;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  // Deprecated\n  accessToken?: string;\n  terrainSourceID?: string;\n  enableTerrain?: boolean;\n  infoMarkerPosition?: mapboxgl.LngLatLike;\n  mapPosition?: MapPosition;\n  initializeMap?: (\n    container: HTMLElement,\n    args: MapboxOptionsExt,\n  ) => mapboxgl.Map;\n  onMapLoaded?: (map: mapboxgl.Map) => void;\n  onStyleLoaded?: (map: mapboxgl.Map) => void;\n  onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;\n  /** This map sets its own viewport, rather than being positioned by a parent.\n   * This is a hack to ensure that the map can overflow its \"safe area\" when false */\n  standalone?: boolean;\n  /** Overlay styles to apply to the map: a list of mapbox style objects or fragments to\n   * overlay on top of the main map style at runtime */\n  overlayStyles?: Partial<mapboxgl.StyleSpecification>[];\n  /** A function to transform the map style before it is loaded */\n  transformStyle?: (\n    style: mapboxgl.StyleSpecification,\n  ) => mapboxgl.StyleSpecification;\n  loadingIgnoredSources?: string[];\n  id?: string;\n  className?: string;\n}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n  mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n  const { mapPosition, ...rest } = args;\n\n  const map = new mapboxgl.Map({\n    container,\n    maxZoom: 18,\n    logoPosition: \"bottom-left\",\n    trackResize: false,\n    antialias: true,\n    // This is a legacy option for Mapbox GL v2\n    // @ts-ignore\n    optimizeForTerrain: true,\n    ...rest,\n  });\n\n  let _mapPosition = mapPosition;\n  if (_mapPosition == null && rest.center == null && rest.bounds == null) {\n    // If no map positioning information is provided, we use the default\n    _mapPosition = defaultMapPosition;\n  }\n\n  // set initial map position\n  if (_mapPosition != null) {\n    setMapPosition(map, _mapPosition);\n  }\n\n  return map;\n}\n\nconst defaultMapPosition: MapPosition = {\n  camera: {\n    lat: 34,\n    lng: -120,\n    altitude: 300000,\n  },\n};\n\nexport function MapView(props: MapViewProps) {\n  let { terrainSourceID } = props;\n  const {\n    enableTerrain = true,\n    style,\n    mapPosition,\n    initializeMap = defaultInitializeMap,\n    children,\n    mapboxToken,\n    // Deprecated\n    accessToken,\n    infoMarkerPosition,\n    transformRequest,\n    projection,\n    onMapLoaded = null,\n    onStyleLoaded = null,\n    onMapMoved = null,\n    standalone = false,\n    overlayStyles,\n    transformStyle,\n    trackResize = true,\n    loadingIgnoredSources = [\"elevationMarker\", \"crossSectionEndpoints\"],\n    id = \"map\",\n    className,\n    ...rest\n  } = props;\n  if (enableTerrain) {\n    terrainSourceID ??= \"mapbox-3d-dem\";\n  }\n\n  useEffect(() => {\n    if (id != null) {\n      console.warn(\n        \"Setting a specific element ID for the map is deprecated. Please use className instead.\",\n      );\n    }\n  }, [id]);\n\n  const _mapboxToken = mapboxToken ?? accessToken;\n\n  if (_mapboxToken != null) {\n    mapboxgl.accessToken = _mapboxToken;\n  }\n\n  const dispatch = useMapDispatch();\n  let mapRef = useMapRef();\n  const ref = useRef<HTMLDivElement>();\n  const parentRef = useRef<HTMLDivElement>();\n\n  const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);\n\n  const estMapPosition: MapPosition | null =\n    mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);\n  const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);\n  const is3DAvailable = (mapUse3D ?? false) && enableTerrain;\n\n  useEffect(() => {\n    /** Manager to update map style */\n    if (baseStyle == null) return;\n    let map = mapRef.current;\n\n    let newStyle: mapboxgl.StyleSpecification = baseStyle;\n\n    const overlayStyles = props.overlayStyles ?? [];\n\n    if (overlayStyles.length > 0) {\n      newStyle = mergeStyles(newStyle, ...overlayStyles);\n    }\n\n    /** If we can, we try to update the map style with terrain information\n     * immediately, before the style is loaded. This allows us to avoid a\n     * flash of the map without terrain.\n     *\n     * To do this, we need to estimate the map position before load, which\n     * doesn't always work.\n     */\n    if (is3DAvailable) {\n      // We can update the style with terrain layers immediately\n      const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);\n      newStyle = mergeStyles(newStyle, terrainStyle);\n    }\n\n    if (transformStyle != null) {\n      newStyle = transformStyle(newStyle);\n    }\n\n    if (map != null) {\n      dispatch({ type: \"set-style-loaded\", payload: false });\n      map.setStyle(newStyle);\n    } else {\n      const map = initializeMap(ref.current, {\n        style: newStyle,\n        projection,\n        mapPosition,\n        transformRequest,\n        ...rest,\n      });\n      dispatch({ type: \"set-map\", payload: map });\n      map.setPadding(getMapPadding(ref, parentRef), { animate: false });\n      onMapLoaded?.(map);\n    }\n  }, [baseStyle, overlayStyles, transformStyle]);\n\n  useAsyncEffect(async () => {\n    /** Manager to update map style */\n    let newStyle: mapboxgl.StyleSpecification;\n    if (typeof style === \"string\") {\n      newStyle = await getMapboxStyle(style, {\n        access_token: mapboxgl.accessToken,\n      });\n    } else {\n      newStyle = style;\n    }\n    setBaseStyle(newStyle);\n  }, [style]);\n\n  // Get map projection\n  const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n  const mapClassName = classNames(\n    {\n      \"is-rotated\": mapIsRotated ?? false,\n      \"is-3d-available\": is3DAvailable,\n    },\n    `${_projection}-projection`,\n  );\n\n  const parentClassName = classNames(\n    {\n      standalone,\n    },\n    className,\n  );\n\n  return h(\n    \"div.map-view-container.main-view\",\n    { ref: parentRef, className: parentClassName },\n    [\n      h(\"div.mapbox-map.map-view\", { ref, className: mapClassName, id }),\n      h(MapLoadingReporter, {\n        ignoredSources: loadingIgnoredSources,\n      }),\n      h(StyleLoadedReporter, { onStyleLoaded }),\n      h(MapMovedReporter, { onMapMoved }),\n      // Subsitute for trackResize: true that allows map resizing to\n      // be tied to a specific ref component\n      h.if(trackResize)(MapResizeManager, { containerRef: ref }),\n      h(MapPaddingManager, {\n        containerRef: ref,\n        parentRef,\n        infoMarkerPosition,\n      }),\n      h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),\n      children,\n    ],\n  );\n}\n\nfunction StyleLoadedReporter({ onStyleLoaded = null }) {\n  /** Check back every 0.1 seconds to see if the map has loaded.\n   * We do it this way because mapboxgl loading events are unreliable */\n  const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);\n  const mapRef = useMapRef();\n  const dispatch = useMapDispatch();\n\n  useEffect(() => {\n    if (isStyleLoaded) return;\n    const interval = setInterval(() => {\n      const map = mapRef.current;\n      if (map == null) return;\n      if (map.isStyleLoaded()) {\n        // Wait a tick before setting the style loaded state\n        dispatch({ type: \"set-style-loaded\", payload: true });\n        onStyleLoaded?.(map);\n        clearInterval(interval);\n      }\n    }, 50);\n    return () => clearInterval(interval);\n  }, [isStyleLoaded]);\n\n  return null;\n}\n\nexport function MapTerrainManager({\n  mapUse3D,\n  terrainSourceID,\n  style,\n}: {\n  mapUse3D?: boolean;\n  terrainSourceID?: string;\n  style?: mapboxgl.StyleSpecification | string;\n}) {\n  use3DTerrain(mapUse3D, terrainSourceID);\n\n  return null;\n}\n"],"names":["hyper","overlayStyles","map"],"mappings":"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"}

package/dist/utils.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const mapboxgl = require("mapbox-gl");
+function calcMapPadding(rect, childRect) {
+  return {
+    left: Math.max(rect.left - childRect.left, 0),
+    top: Math.max(rect.top - childRect.top, 0),
+    right: Math.max(childRect.right - rect.right, 0),
+    bottom: Math.max(childRect.bottom - rect.bottom, 0)
+  };
+}
+function getMapPadding(ref, parentRef) {
+  const rect = parentRef.current?.getBoundingClientRect();
+  const childRect = ref.current?.getBoundingClientRect();
+  if (rect == null || childRect == null) return;
+  return calcMapPadding(rect, childRect);
+}
+function useMapMarker(mapRef, markerRef, markerPosition) {
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (map == null) return;
+    if (markerPosition == null) {
+      markerRef.current?.remove();
+      return;
+    }
+    const marker = markerRef.current ?? new mapboxgl.Marker();
+    marker.setLngLat(markerPosition).addTo(map);
+    markerRef.current = marker;
+    return () => marker.remove();
+  }, [mapRef.current, markerPosition]);
+}
+exports.getMapPadding = getMapPadding;
+exports.useMapMarker = useMapMarker;
+//# sourceMappingURL=utils.cjs.map

package/dist/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../src/utils.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Marker } from \"mapbox-gl\";\n\nfunction calcMapPadding(rect, childRect) {\n  return {\n    left: Math.max(rect.left - childRect.left, 0),\n    top: Math.max(rect.top - childRect.top, 0),\n    right: Math.max(childRect.right - rect.right, 0),\n    bottom: Math.max(childRect.bottom - rect.bottom, 0),\n  };\n}\n\nexport function getMapPadding(ref, parentRef) {\n  const rect = parentRef.current?.getBoundingClientRect();\n  const childRect = ref.current?.getBoundingClientRect();\n  if (rect == null || childRect == null) return;\n  return calcMapPadding(rect, childRect);\n}\n\nexport function useMapMarker(mapRef, markerRef, markerPosition) {\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    if (markerPosition == null) {\n      markerRef.current?.remove();\n      return;\n    }\n    const marker = markerRef.current ?? new Marker();\n    marker.setLngLat(markerPosition).addTo(map);\n    markerRef.current = marker;\n    return () => marker.remove();\n  }, [mapRef.current, markerPosition]);\n}\n"],"names":["useEffect","Marker"],"mappings":";;;;AAGA,SAAS,eAAe,MAAM,WAAW;AACvC,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,KAAK,OAAO,UAAU,MAAM,CAAC;AAAA,IAC5C,KAAK,KAAK,IAAI,KAAK,MAAM,UAAU,KAAK,CAAC;AAAA,IACzC,OAAO,KAAK,IAAI,UAAU,QAAQ,KAAK,OAAO,CAAC;AAAA,IAC/C,QAAQ,KAAK,IAAI,UAAU,SAAS,KAAK,QAAQ,CAAC;AAAA,EAAA;AAEtD;AAEO,SAAS,cAAc,KAAK,WAAW;AAC5C,QAAM,OAAO,UAAU,SAAS,sBAAA;AAChC,QAAM,YAAY,IAAI,SAAS,sBAAA;AAC/B,MAAI,QAAQ,QAAQ,aAAa,KAAM;AACvC,SAAO,eAAe,MAAM,SAAS;AACvC;AAEO,SAAS,aAAa,QAAQ,WAAW,gBAAgB;AAC9DA,QAAAA,UAAU,MAAM;AACd,UAAM,MAAM,OAAO;AACnB,QAAI,OAAO,KAAM;AACjB,QAAI,kBAAkB,MAAM;AAC1B,gBAAU,SAAS,OAAA;AACnB;AAAA,IACF;AACA,UAAM,SAAS,UAAU,WAAW,IAAIC,SAAAA,OAAA;AACxC,WAAO,UAAU,cAAc,EAAE,MAAM,GAAG;AAC1C,cAAU,UAAU;AACpB,WAAO,MAAM,OAAO,OAAA;AAAA,EACtB,GAAG,CAAC,OAAO,SAAS,cAAc,CAAC;AACrC;;;"}

package/dist/utils.d.ts

@@ -0,0 +1,7 @@
+export declare function getMapPadding(ref: any, parentRef: any): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export declare function useMapMarker(mapRef: any, markerRef: any, markerPosition: any): void;

package/dist/utils.js

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { Marker } from "mapbox-gl";
+function calcMapPadding(rect, childRect) {
+  return {
+    left: Math.max(rect.left - childRect.left, 0),
+    top: Math.max(rect.top - childRect.top, 0),
+    right: Math.max(childRect.right - rect.right, 0),
+    bottom: Math.max(childRect.bottom - rect.bottom, 0)
+  };
+}
+function getMapPadding(ref, parentRef) {
+  const rect = parentRef.current?.getBoundingClientRect();
+  const childRect = ref.current?.getBoundingClientRect();
+  if (rect == null || childRect == null) return;
+  return calcMapPadding(rect, childRect);
+}
+function useMapMarker(mapRef, markerRef, markerPosition) {
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map == null) return;
+    if (markerPosition == null) {
+      markerRef.current?.remove();
+      return;
+    }
+    const marker = markerRef.current ?? new Marker();
+    marker.setLngLat(markerPosition).addTo(map);
+    markerRef.current = marker;
+    return () => marker.remove();
+  }, [mapRef.current, markerPosition]);
+}
+export {
+  getMapPadding,
+  useMapMarker
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Marker } from \"mapbox-gl\";\n\nfunction calcMapPadding(rect, childRect) {\n  return {\n    left: Math.max(rect.left - childRect.left, 0),\n    top: Math.max(rect.top - childRect.top, 0),\n    right: Math.max(childRect.right - rect.right, 0),\n    bottom: Math.max(childRect.bottom - rect.bottom, 0),\n  };\n}\n\nexport function getMapPadding(ref, parentRef) {\n  const rect = parentRef.current?.getBoundingClientRect();\n  const childRect = ref.current?.getBoundingClientRect();\n  if (rect == null || childRect == null) return;\n  return calcMapPadding(rect, childRect);\n}\n\nexport function useMapMarker(mapRef, markerRef, markerPosition) {\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    if (markerPosition == null) {\n      markerRef.current?.remove();\n      return;\n    }\n    const marker = markerRef.current ?? new Marker();\n    marker.setLngLat(markerPosition).addTo(map);\n    markerRef.current = marker;\n    return () => marker.remove();\n  }, [mapRef.current, markerPosition]);\n}\n"],"names":[],"mappings":";;AAGA,SAAS,eAAe,MAAM,WAAW;AACvC,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,KAAK,OAAO,UAAU,MAAM,CAAC;AAAA,IAC5C,KAAK,KAAK,IAAI,KAAK,MAAM,UAAU,KAAK,CAAC;AAAA,IACzC,OAAO,KAAK,IAAI,UAAU,QAAQ,KAAK,OAAO,CAAC;AAAA,IAC/C,QAAQ,KAAK,IAAI,UAAU,SAAS,KAAK,QAAQ,CAAC;AAAA,EAAA;AAEtD;AAEO,SAAS,cAAc,KAAK,WAAW;AAC5C,QAAM,OAAO,UAAU,SAAS,sBAAA;AAChC,QAAM,YAAY,IAAI,SAAS,sBAAA;AAC/B,MAAI,QAAQ,QAAQ,aAAa,KAAM;AACvC,SAAO,eAAe,MAAM,SAAS;AACvC;AAEO,SAAS,aAAa,QAAQ,WAAW,gBAAgB;AAC9D,YAAU,MAAM;AACd,UAAM,MAAM,OAAO;AACnB,QAAI,OAAO,KAAM;AACjB,QAAI,kBAAkB,MAAM;AAC1B,gBAAU,SAAS,OAAA;AACnB;AAAA,IACF;AACA,UAAM,SAAS,UAAU,WAAW,IAAI,OAAA;AACxC,WAAO,UAAU,cAAc,EAAE,MAAM,GAAG;AAC1C,cAAU,UAAU;AACpB,WAAO,MAAM,OAAO,OAAA;AAAA,EACtB,GAAG,CAAC,OAAO,SAAS,cAAc,CAAC;AACrC;"}