@macrostrat/map-interface 2.0.0 → 2.0.1

package/dist/location-panel/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/location-panel/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { InfoDrawerHeader, InfoDrawerHeaderProps } from \"./header\";\nimport classNames from \"classnames\";\nimport styles from \"./main.module.sass\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { PanelCard } from \"../container\";\nimport { ComponentType } from \"react\";\n\nconst h = hyper.styled(styles);\n\nexport function InfoDrawerContainer(props) {\n  const className = classNames(\"infodrawer\", props.className);\n  return h(PanelCard, { ...props, className });\n}\n\ntype Component = string | ComponentType<any>;\n\ninterface BaseInfoDrawerProps extends InfoDrawerHeaderProps {\n  className?: string;\n  title?: string;\n  headerElement?: JSX.Element;\n  children?: React.ReactNode;\n  contentContainer?: Component;\n}\n\nexport function BaseInfoDrawer(props: BaseInfoDrawerProps) {\n  const {\n    className,\n    headerElement = null,\n    title,\n    onClose,\n    children,\n    contentContainer = \"div.infodrawer-contents\",\n    ...rest\n  } = props;\n  const header =\n    headerElement ??\n    h(InfoDrawerHeader, { onClose, ...rest }, [\n      title == null ? null : h(\"h3\", [title]),\n    ]);\n  return h(InfoDrawerContainer, { className }, [\n    header,\n    h(\"div.infodrawer-body\", h(ErrorBoundary, h(contentContainer, children))),\n  ]);\n}\n\nexport const DetailsPanel = BaseInfoDrawer;\n\nexport function LocationPanel(props) {\n  const { children, className, loading = false, ...rest } = props;\n  const cls = classNames(\"location-panel\", className, { loading });\n  return h(BaseInfoDrawer, { className: cls, ...rest }, children);\n}\n"],"names":["hyper","styles","PanelCard","header","InfoDrawerHeader","ErrorBoundary"],"mappings":";;;;;;;;AAQA,MAAM,IAAIA,IAAM,OAAOC,mBAAM;AAEtB,SAAS,oBAAoB,OAAO;AACzC,QAAM,YAAY,WAAW,cAAc,MAAM,SAAS;AAC1D,SAAO,EAAEC,UAAAA,WAAW,EAAE,GAAG,OAAO,WAAW;AAC7C;AAYO,SAAS,eAAe,OAA4B;AACzD,QAAM;AAAA,IACJ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD;AACJ,QAAMC,WACJ,iBACA,EAAEC,OAAAA,kBAAkB,EAAE,SAAS,GAAG,QAAQ;AAAA,IACxC,SAAS,OAAO,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC;AAAA,EAAA,CACvC;AACH,SAAO,EAAE,qBAAqB,EAAE,aAAa;AAAA,IAC3CD;AAAAA,IACA,EAAE,uBAAuB,EAAEE,aAAAA,eAAe,EAAE,kBAAkB,QAAQ,CAAC,CAAC;AAAA,EAAA,CACzE;AACH;AAEO,MAAM,eAAe;AAErB,SAAS,cAAc,OAAO;AACnC,QAAM,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,SAAS;AAC1D,QAAM,MAAM,WAAW,kBAAkB,WAAW,EAAE,SAAS;AAC/D,SAAO,EAAE,gBAAgB,EAAE,WAAW,KAAK,GAAG,KAAA,GAAQ,QAAQ;AAChE;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/location-panel/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { InfoDrawerHeader, InfoDrawerHeaderProps } from \"./header\";\nimport classNames from \"classnames\";\nimport styles from \"./main.module.sass\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { PanelCard } from \"../container\";\nimport { ComponentType } from \"react\";\n\nconst h = hyper.styled(styles);\n\nexport function InfoDrawerContainer(props) {\n  const className = classNames(\"infodrawer\", props.className);\n  return h(PanelCard, { ...props, className });\n}\n\ntype Component = string | ComponentType<any>;\n\ninterface BaseInfoDrawerProps extends InfoDrawerHeaderProps {\n  className?: string;\n  title?: string;\n  headerElement?: JSX.Element;\n  children?: React.ReactNode;\n  contentContainer?: Component;\n}\n\nexport function BaseInfoDrawer(props: BaseInfoDrawerProps) {\n  const {\n    className,\n    headerElement = null,\n    title,\n    onClose,\n    children,\n    contentContainer = \"div.infodrawer-contents\",\n    ...rest\n  } = props;\n  const header =\n    headerElement ??\n    h(InfoDrawerHeader, { onClose, ...rest }, [\n      title == null ? null : h(\"h3\", [title]),\n    ]);\n  return h(InfoDrawerContainer, { className }, [\n    header,\n    h(\"div.infodrawer-body\", h(ErrorBoundary, h(contentContainer, children))),\n  ]);\n}\n\nexport const DetailsPanel = BaseInfoDrawer;\n\nexport function LocationPanel(props) {\n  const { children, className, loading = false, ...rest } = props;\n  const cls = classNames(\"location-panel\", className, { loading });\n  return h(BaseInfoDrawer, { className: cls, ...rest }, children);\n}\n"],"names":["hyper","styles","classNames","PanelCard","header","InfoDrawerHeader","ErrorBoundary"],"mappings":";;;;;;;;;;;AAQA,MAAM,IAAIA,WAAAA,QAAM,OAAOC,mBAAM;AAEtB,SAAS,oBAAoB,OAAO;AACzC,QAAM,YAAYC,oBAAAA,QAAW,cAAc,MAAM,SAAS;AAC1D,SAAO,EAAEC,UAAAA,WAAW,EAAE,GAAG,OAAO,WAAW;AAC7C;AAYO,SAAS,eAAe,OAA4B;AACzD,QAAM;AAAA,IACJ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD;AACJ,QAAMC,WACJ,iBACA,EAAEC,OAAAA,kBAAkB,EAAE,SAAS,GAAG,QAAQ;AAAA,IACxC,SAAS,OAAO,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC;AAAA,EAAA,CACvC;AACH,SAAO,EAAE,qBAAqB,EAAE,aAAa;AAAA,IAC3CD;AAAAA,IACA,EAAE,uBAAuB,EAAEE,aAAAA,eAAe,EAAE,kBAAkB,QAAQ,CAAC,CAAC;AAAA,EAAA,CACzE;AACH;AAEO,MAAM,eAAe;AAErB,SAAS,cAAc,OAAO;AACnC,QAAM,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,SAAS;AAC1D,QAAM,MAAMJ,oBAAAA,QAAW,kBAAkB,WAAW,EAAE,SAAS;AAC/D,SAAO,EAAE,gBAAgB,EAAE,WAAW,KAAK,GAAG,KAAA,GAAQ,QAAQ;AAChE;;;;;"}

package/dist/map-view.cjs

@@ -11,10 +11,14 @@ const helpers = require("./helpers.cjs");
 ;/* empty css                               */
 const utils = require("./utils.cjs");
 const uiComponents = require("@macrostrat/ui-components");
-const h = h$1.styled(main_module.default);
+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.Map({
+  const map = new mapboxgl__default.default.Map({
     container,
     maxZoom: 18,
     logoPosition: "bottom-left",
@@ -79,7 +83,7 @@ function MapView(props) {
   }, [id]);
   const _mapboxToken = mapboxToken ?? accessToken;
   if (_mapboxToken != null) {
-    mapboxgl.accessToken = _mapboxToken;
+    mapboxgl__default.default.accessToken = _mapboxToken;
   }
   const dispatch = mapboxReact.useMapDispatch();
   let mapRef = mapboxReact.useMapRef();
@@ -124,7 +128,7 @@ function MapView(props) {
     let newStyle;
     if (typeof style === "string") {
       newStyle = await mapboxUtils.getMapboxStyle(style, {
-        access_token: mapboxgl.accessToken
+        access_token: mapboxgl__default.default.accessToken
       });
     } else {
       newStyle = style;
@@ -132,14 +136,14 @@ function MapView(props) {
     setBaseStyle(newStyle);
   }, [style]);
   const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
-  const mapClassName = classNames(
+  const mapClassName = classNames__default.default(
     {
       "is-rotated": mapIsRotated ?? false,
       "is-3d-available": is3DAvailable
     },
     `${_projection}-projection`
   );
-  const parentClassName = classNames(
+  const parentClassName = classNames__default.default(
     {
       standalone
     },

package/dist/map-view.cjs.map

@@ -1 +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","setMapPosition","useEffect","useMapDispatch","useMapRef","useRef","useState","getMapPosition","mapViewInfo","overlayStyles","mergeStyles","getTerrainLayerForStyle","map","getMapPadding","useAsyncEffect","getMapboxStyle","MapLoadingReporter","MapMovedReporter","MapResizeManager","MapPaddingManager","useMapStatus","use3DTerrain"],"mappings":"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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Map interface for Macrostrat",
   "repository": {
     "type": "git",
@@ -8,9 +8,9 @@
     "directory": "packages/map-interface"
   },
   "license": "MIT",
-  "type": "module",
   "source": "src/index.ts",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "node": "dist/index.cjs",
   "types": "dist/index.d.ts",
   "style": "dist/map-interface.css",
@@ -24,9 +24,14 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
       "style": "./dist/map-interface.css"
     },
     "./package.json": "./package.json",
@@ -42,13 +47,13 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^6.6.1",
-    "@macrostrat/color-utils": "^1.2.0",
-    "@macrostrat/data-components": "^1.0.0",
+    "@macrostrat/color-utils": "^1.2.1",
+    "@macrostrat/data-components": "^1.0.1",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "2.0.0",
-    "@macrostrat/mapbox-react": "^3.0.0",
-    "@macrostrat/mapbox-utils": "^1.7.0",
-    "@macrostrat/ui-components": "^5.0.0",
+    "@macrostrat/map-interface": "2.0.1",
+    "@macrostrat/mapbox-react": "^3.0.1",
+    "@macrostrat/mapbox-utils": "^1.7.1",
+    "@macrostrat/ui-components": "^5.0.4",
     "@mapbox/tilebelt": "^2.0.0",
     "@visx/axis": "^3.12.0",
     "@visx/scale": "^3.12.0",
@@ -63,8 +68,7 @@
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "@macrostrat/web-components-bundler": "1.0.0",
-    "ui-box": "^5.4.1"
+    "@macrostrat/web-components-bundler": "1.0.0"
   },
   "publishConfig": {
     "access": "public"