@macrostrat/map-interface 2.0.2 → 2.2.0

package/dist/map-view.js.map

@@ -1 +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","styles","overlayStyles","map"],"mappings":"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"}
+{"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  useMapStyleFragments,\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\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  /** Get overlay styles from map context. These are added after the base style is loaded, and can be used\n   * to add layers to the map at runtime, even after initialization. They are merged with any overlay styles\n   * passed in as props.\n   */\n  const _ctxOverlayStyles = useMapStyleFragments() as any[];\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 = overlayStyles ?? [];\n\n    if (_overlayStyles.length > 0 || _ctxOverlayStyles.length > 0) {\n      newStyle = mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);\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, _ctxOverlayStyles, 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}: {\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","map"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "Map interface for Macrostrat",
   "repository": {
     "type": "git",
@@ -48,10 +48,9 @@
   "dependencies": {
     "@blueprintjs/core": "^6.6.1",
     "@macrostrat/color-utils": "^1.2.1",
-    "@macrostrat/data-components": "^1.1.1",
+    "@macrostrat/data-components": "^1.1.3",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "2.0.2",
-    "@macrostrat/mapbox-react": "^3.0.2",
+    "@macrostrat/mapbox-react": "^3.1.0",
     "@macrostrat/mapbox-utils": "^1.7.2",
     "@macrostrat/ui-components": "^5.0.5",
     "@mapbox/tilebelt": "^2.0.0",

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

@@ -6,7 +6,7 @@ import styles from "./main.module.sass";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { JSONView } from "@macrostrat/ui-components";
 import { group } from "d3-array";
-import { ExpansionPanel } from "../expansion-panel";
+import { ExpansionPanel } from "@macrostrat/data-components";
 
 const h = hyper.styled(styles);
 

package/src/index.ts

@@ -6,6 +6,5 @@ export * from "./map-view";
 export * from "./controls";
 export * from "./helpers";
 export * from "./utils";
-export * from "./expansion-panel";
 export * from "./location-details";
 export * from "./hash-string";

package/src/location-details/index.ts

@@ -1,5 +1,4 @@
 export * from "./fossil-collections";
-export * from "./xdd-panel";
 export * from "./reg-strat";
 export * from "./physiography";
 export * from "./macrostrat-linked";

package/src/location-details/macrostrat-linked.ts

@@ -1,17 +1,13 @@
-import hyper from "@macrostrat/hyper";
 import {
   ExpansionPanel,
   ExpandableDetailsPanel,
-  ExpansionBody,
-} from "@macrostrat/map-interface";
-import styles from "./main.module.sass";
+  LithologyList,
+} from "@macrostrat/data-components";
 import { scaleLinear } from "@visx/scale";
 import { AxisBottom } from "@visx/axis";
 import chroma from "chroma-js";
-import { LithologyList } from "@macrostrat/data-components";
-import { AttrChip, AgeChip } from "./info-blocks";
-
-const h = hyper.styled(styles);
+import { AgeChip } from "./info-blocks";
+import h from "./main.module.sass";
 
 export function MacrostratLinkedData(props) {
   const {
@@ -43,7 +39,6 @@ export function MacrostratLinkedData(props) {
         h(FossilOccs, { source }),
         h(LithsAndClasses, { source, lithologyURL }),
         h(Environments, { source, environmentURL }),
-        h(Economy, { source }),
       ]),
     ],
   );
@@ -203,7 +198,7 @@ function MacrostratAgeInfo(props) {
   return h(
     ExpandableDetailsPanel,
     { headerElement: h(MacrostratAgeInfoCore, props) },
-    h(ExpansionBody, { title: "Age refinement" }, h(AgeRefinementPlot, props)),
+    h(AgeRefinementPlot, props),
   );
 }
 
@@ -220,23 +215,20 @@ function MatchBasis(props) {
         h("div.description", "Matched stratigraphic unit"),
       ]),
     },
-    h(ExpansionBody, { title: "All matched names" }, [
-      source.macrostrat.strat_names?.map((name, i) => {
-        let lastElement: boolean =
-          i == source.macrostrat.strat_names.length - 1;
-        return h("span", { key: i }, [
-          h(
-            "a.externalLink",
-            {
-              href: stratNameURL + "/" + name.strat_name_id,
-              key: i,
-            },
-            [name.rank_name],
-          ),
-          h.if(!lastElement)([", "]),
-        ]);
-      }),
-    ]),
+    source.macrostrat.strat_names?.map((name, i) => {
+      let lastElement: boolean = i == source.macrostrat.strat_names.length - 1;
+      return h("span", { key: i }, [
+        h(
+          "a.externalLink",
+          {
+            href: stratNameURL + "/" + name.strat_name_id,
+            key: i,
+          },
+          [name.rank_name],
+        ),
+        h.if(!lastElement)([", "]),
+      ]);
+    }),
   );
 }
 
@@ -318,14 +310,13 @@ function LithsAndClasses(props) {
       title: "Lithology",
       value: h(LithTypes, { lith_types }),
     },
-    h(ExpansionBody, { title: "Matched lithologies" }, [
-      h(LithologyList, {
-        lithologies,
-        onClickItem: (e, lith) => {
-          window.open(lithologyURL + "/" + lith.lith_id, "_self");
-        },
-      }),
-    ]),
+    h(LithologyList, {
+      label: "Matched lithologies",
+      lithologies,
+      onClickItem: (e, lith) => {
+        window.open(lithologyURL + "/" + lith.lith_id, "_self");
+      },
+    }),
   );
 }
 
@@ -357,52 +348,9 @@ function Environments(props) {
       title: "Environment",
       value: h(EnvironTypes, { environ_types }),
     },
-    h(ExpansionBody, { title: "Matched environments" }, [
-      h(LithologyList, {
-        lithologies,
-        onClickItem: (e, environ) => {
-          console.log("environ", environmentURL);
-          window.open(environmentURL + "/" + environ.environ_id, "_self");
-        },
-      }),
-    ]),
-  );
-}
-
-function EconType(props) {
-  const { econ_types } = props;
-
-  return h.if(econ_types && econ_types.length > 0)("div", [
-    econ_types?.map((econClass, i) => {
-      return h(AttrChip, {
-        key: i,
-        name: econClass.name,
-        color: econClass.color,
-      });
+    h(LithologyList, {
+      label: "Matched environments",
+      lithologies,
     }),
-  ]);
-}
-
-function Economy(props) {
-  const { source } = props;
-  const { macrostrat } = source;
-  const { econs = null, econ_types = null } = macrostrat;
-  if (!econs) return h("div");
-
-  return h.if(econs && econs.length > 0)(
-    ExpandableDetailsPanel,
-    {
-      title: "Economy ",
-      value: h(EconType, { econ_types }),
-    },
-    h(ExpansionBody, { title: "Matched economic attributes" }, [
-      econs?.map((econ, i) => {
-        return h(AttrChip, {
-          key: i,
-          name: econ.econ,
-          color: econ.color,
-        });
-      }),
-    ]),
   );
 }

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

@@ -22,7 +22,6 @@
 
   .expansion-summary-title
     margin-right: 0.8em
-
     &:after
       content: ":"
 

package/src/location-details/physiography.ts

@@ -1,5 +1,5 @@
 import h from "@macrostrat/hyper";
-import { ExpansionPanel } from "@macrostrat/map-interface";
+import { ExpansionPanel } from "@macrostrat/data-components";
 
 export function Physiography(props) {
   const { mapInfo, expanded = true } = props;

package/src/location-details/reg-strat.ts

@@ -1,5 +1,5 @@
 import h from "@macrostrat/hyper";
-import { ExpansionPanel } from "@macrostrat/map-interface";
+import { ExpansionPanel } from "@macrostrat/data-components";
 import { addCommas } from "./utils";
 
 export function RegionalStratigraphy({

package/src/map-view.ts

@@ -5,6 +5,7 @@ import {
   use3DTerrain,
   getTerrainLayerForStyle,
   useMapStatus,
+  useMapStyleFragments,
 } from "@macrostrat/mapbox-react";
 import React from "react";
 import {
@@ -132,9 +133,6 @@ export function MapView(props: MapViewProps) {
     className,
     ...rest
   } = props;
-  if (enableTerrain) {
-    terrainSourceID ??= "mapbox-3d-dem";
-  }
 
   useEffect(() => {
     if (id != null) {
@@ -157,6 +155,12 @@ export function MapView(props: MapViewProps) {
 
   const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);
 
+  /** Get overlay styles from map context. These are added after the base style is loaded, and can be used
+   * to add layers to the map at runtime, even after initialization. They are merged with any overlay styles
+   * passed in as props.
+   */
+  const _ctxOverlayStyles = useMapStyleFragments() as any[];
+
   const estMapPosition: MapPosition | null =
     mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);
   const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);
@@ -169,10 +173,10 @@ export function MapView(props: MapViewProps) {
 
     let newStyle: mapboxgl.StyleSpecification = baseStyle;
 
-    const overlayStyles = props.overlayStyles ?? [];
+    const _overlayStyles = overlayStyles ?? [];
 
-    if (overlayStyles.length > 0) {
-      newStyle = mergeStyles(newStyle, ...overlayStyles);
+    if (_overlayStyles.length > 0 || _ctxOverlayStyles.length > 0) {
+      newStyle = mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);
     }
 
     /** If we can, we try to update the map style with terrain information
@@ -207,7 +211,7 @@ export function MapView(props: MapViewProps) {
       map.setPadding(getMapPadding(ref, parentRef), { animate: false });
       onMapLoaded?.(map);
     }
-  }, [baseStyle, overlayStyles, transformStyle]);
+  }, [baseStyle, overlayStyles, _ctxOverlayStyles, transformStyle]);
 
   useAsyncEffect(async () => {
     /** Manager to update map style */
@@ -292,7 +296,6 @@ function StyleLoadedReporter({ onStyleLoaded = null }) {
 export function MapTerrainManager({
   mapUse3D,
   terrainSourceID,
-  style,
 }: {
   mapUse3D?: boolean;
   terrainSourceID?: string;

package/dist/expansion-panel/headers.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const h$1 = require("@macrostrat/hyper");
-const main_module = require("./main.module.sass.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
-const h = h__default.default.styled(main_module.default);
-function PanelSubhead(props) {
-  const { title, component = "h3", children, ...rest } = props;
-  return h("div.panel-subhead", rest, [
-    h(
-      component,
-      {
-        className: "title"
-      },
-      title
-    ),
-    children
-  ]);
-}
-exports.PanelSubhead = PanelSubhead;
-//# sourceMappingURL=headers.cjs.map

package/dist/expansion-panel/headers.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"headers.cjs","sources":["../../src/expansion-panel/headers.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport function PanelSubhead(props) {\n  const { title, component = \"h3\", children, ...rest } = props;\n  return h(\"div.panel-subhead\", rest, [\n    h(\n      component,\n      {\n        className: \"title\",\n      },\n      title,\n    ),\n    children,\n  ]);\n}\n"],"names":["hyper","styles"],"mappings":";;;;;;AAGA,MAAM,IAAIA,WAAAA,QAAM,OAAOC,mBAAM;AAEtB,SAAS,aAAa,OAAO;AAClC,QAAM,EAAE,OAAO,YAAY,MAAM,UAAU,GAAG,SAAS;AACvD,SAAO,EAAE,qBAAqB,MAAM;AAAA,IAClC;AAAA,MACE;AAAA,MACA;AAAA,QACE,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA,CACD;AACH;;"}

package/dist/expansion-panel/headers.d.ts

@@ -1 +0,0 @@
-export declare function PanelSubhead(props: any): import('react').DOMElement<any, Element>;

package/dist/expansion-panel/headers.js

@@ -1,20 +0,0 @@
-import h$1 from "@macrostrat/hyper";
-import h$2 from "./main.module.sass.js";
-const h = h$1.styled(h$2);
-function PanelSubhead(props) {
-  const { title, component = "h3", children, ...rest } = props;
-  return h("div.panel-subhead", rest, [
-    h(
-      component,
-      {
-        className: "title"
-      },
-      title
-    ),
-    children
-  ]);
-}
-export {
-  PanelSubhead
-};
-//# sourceMappingURL=headers.js.map

package/dist/expansion-panel/headers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"headers.js","sources":["../../src/expansion-panel/headers.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport function PanelSubhead(props) {\n  const { title, component = \"h3\", children, ...rest } = props;\n  return h(\"div.panel-subhead\", rest, [\n    h(\n      component,\n      {\n        className: \"title\",\n      },\n      title,\n    ),\n    children,\n  ]);\n}\n"],"names":["hyper","styles"],"mappings":";;AAGA,MAAM,IAAIA,IAAM,OAAOC,GAAM;AAEtB,SAAS,aAAa,OAAO;AAClC,QAAM,EAAE,OAAO,YAAY,MAAM,UAAU,GAAG,SAAS;AACvD,SAAO,EAAE,qBAAqB,MAAM;AAAA,IAClC;AAAA,MACE;AAAA,MACA;AAAA,QACE,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA,CACD;AACH;"}

package/dist/expansion-panel/index.cjs

@@ -1,128 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const core = require("@blueprintjs/core");
-const h$1 = require("@macrostrat/hyper");
-const main_module = require("./main.module.sass.cjs");
-const classNames = require("classnames");
-const headers = require("./headers.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
-const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
-const h = h__default.default.styled(main_module.default);
-function ExpansionPanelSummary(props) {
-  const { expanded, children, onChange, className, title, titleComponent } = props;
-  const icon = expanded ? "chevron-up" : "chevron-down";
-  return h(
-    headers.PanelSubhead,
-    {
-      className: classNames__default.default("expansion-panel-header", className),
-      onClick: onChange,
-      title,
-      component: titleComponent
-    },
-    [children, h(core.Icon, { icon, className: "expansion-panel-icon" })]
-  );
-}
-function ExpansionPanelBase(props) {
-  let {
-    title,
-    titleComponent = "h3",
-    children,
-    expanded,
-    helpText,
-    onChange = () => {
-    },
-    sideComponent = null,
-    className
-  } = props;
-  const [isOpen, setOpen] = React.useState(expanded || false);
-  const onChange_ = () => {
-    onChange();
-    setOpen(!isOpen);
-  };
-  return h(
-    "div.expansion-panel-base",
-    {
-      className: classNames__default.default(className, {
-        expanded: isOpen,
-        collapsed: !isOpen
-      })
-    },
-    [
-      h(
-        ExpansionPanelSummary,
-        {
-          onChange: onChange_,
-          expanded: isOpen,
-          title,
-          titleComponent
-        },
-        h("div.expansion-summary-title-help", [
-          h("span.expansion-panel-subtext", helpText),
-          " ",
-          sideComponent
-        ])
-      ),
-      h(core.Collapse, { isOpen }, h("div.expansion-children", null, children))
-    ]
-  );
-}
-function InfoPanelSection(props) {
-  let { title, children, className, headerElement = null } = props;
-  return h("div.info-panel-section", { className }, [
-    h("div.panel-subhead", null, headerElement ?? h("h3", title)),
-    h("div.panel-content", null, children)
-  ]);
-}
-function ExpansionPanel(props) {
-  return h(ExpansionPanelBase, {
-    ...props,
-    className: "expansion-panel"
-  });
-}
-function SubExpansionPanel(props) {
-  return h(ExpansionPanelBase, {
-    ...props,
-    className: "expansion-panel sub-expansion-panel",
-    titleComponent: "h4"
-  });
-}
-function ExpandableDetailsPanel(props) {
-  let { title, children, value, headerElement, className } = props;
-  const [isOpen, setIsOpen] = React.useState(false);
-  headerElement ??= h([h("div.title", title), value]);
-  return h("div.expandable-details", { className }, [
-    h("div.expandable-details-main", [
-      h("div.expandable-details-header", headerElement),
-      h("div.expandable-details-toggle", [
-        h(core.Button, {
-          small: true,
-          minimal: true,
-          active: isOpen,
-          onClick: () => setIsOpen(!isOpen),
-          icon: "more"
-        })
-      ])
-    ]),
-    h(
-      core.Collapse,
-      { isOpen },
-      h("div.expandable-details-children", null, children)
-    )
-  ]);
-}
-function ExpansionBody({ title, className, children }) {
-  return h("div.expansion-body", { className }, [
-    h("div.expansion-panel-detail-header", title),
-    h("div.expansion-panel-detail-body", null, children)
-  ]);
-}
-exports.PanelSubhead = headers.PanelSubhead;
-exports.ExpandableDetailsPanel = ExpandableDetailsPanel;
-exports.ExpansionBody = ExpansionBody;
-exports.ExpansionPanel = ExpansionPanel;
-exports.ExpansionPanelSummary = ExpansionPanelSummary;
-exports.InfoPanelSection = InfoPanelSection;
-exports.SubExpansionPanel = SubExpansionPanel;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../src/expansion-panel/index.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Collapse, Icon } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Button } from \"@blueprintjs/core\";\nimport { PanelSubhead } from \"./headers\";\n\nconst h = hyper.styled(styles);\n\nfunction ExpansionPanelSummary(props) {\n  const { expanded, children, onChange, className, title, titleComponent } =\n    props;\n  const icon = expanded ? \"chevron-up\" : \"chevron-down\";\n  return h(\n    PanelSubhead,\n    {\n      className: classNames(\"expansion-panel-header\", className),\n      onClick: onChange,\n      title,\n      component: titleComponent,\n    },\n    [children, h(Icon, { icon, className: \"expansion-panel-icon\" })],\n  );\n}\n\nfunction ExpansionPanelBase(props) {\n  let {\n    title,\n    titleComponent = \"h3\",\n    children,\n    expanded,\n    helpText,\n    onChange = () => {},\n    sideComponent = null,\n    className,\n  } = props;\n  const [isOpen, setOpen] = useState(expanded || false);\n\n  const onChange_ = () => {\n    onChange();\n    setOpen(!isOpen);\n  };\n\n  return h(\n    \"div.expansion-panel-base\",\n    {\n      className: classNames(className, {\n        expanded: isOpen,\n        collapsed: !isOpen,\n      }),\n    },\n    [\n      h(\n        ExpansionPanelSummary,\n        {\n          onChange: onChange_,\n          expanded: isOpen,\n          title,\n          titleComponent,\n        },\n        h(\"div.expansion-summary-title-help\", [\n          h(\"span.expansion-panel-subtext\", helpText),\n          \" \",\n          sideComponent,\n        ]),\n      ),\n      h(Collapse, { isOpen }, h(\"div.expansion-children\", null, children)),\n    ],\n  );\n}\n\nexport function InfoPanelSection(props) {\n  let { title, children, className, headerElement = null } = props;\n  return h(\"div.info-panel-section\", { className }, [\n    h(\"div.panel-subhead\", null, headerElement ?? h(\"h3\", title)),\n    h(\"div.panel-content\", null, children),\n  ]);\n}\n\nfunction ExpansionPanel(props) {\n  return h(ExpansionPanelBase, {\n    ...props,\n    className: \"expansion-panel\",\n  });\n}\n\nfunction SubExpansionPanel(props) {\n  return h(ExpansionPanelBase, {\n    ...props,\n    className: \"expansion-panel sub-expansion-panel\",\n    titleComponent: \"h4\",\n  });\n}\n\nfunction ExpandableDetailsPanel(props) {\n  let { title, children, value, headerElement, className } = props;\n  const [isOpen, setIsOpen] = useState(false);\n  headerElement ??= h([h(\"div.title\", title), value]);\n  return h(\"div.expandable-details\", { className }, [\n    h(\"div.expandable-details-main\", [\n      h(\"div.expandable-details-header\", headerElement),\n      h(\"div.expandable-details-toggle\", [\n        h(Button, {\n          small: true,\n          minimal: true,\n          active: isOpen,\n          onClick: () => setIsOpen(!isOpen),\n          icon: \"more\",\n        }),\n      ]),\n    ]),\n    h(\n      Collapse,\n      { isOpen },\n      h(\"div.expandable-details-children\", null, children),\n    ),\n  ]);\n}\n\nfunction ExpansionBody({ title, className, children }) {\n  return h(\"div.expansion-body\", { className }, [\n    h(\"div.expansion-panel-detail-header\", title),\n    h(\"div.expansion-panel-detail-body\", null, children),\n  ]);\n}\n\nexport {\n  ExpansionPanel,\n  ExpansionPanelSummary,\n  ExpandableDetailsPanel,\n  SubExpansionPanel,\n  ExpansionBody,\n  PanelSubhead,\n};\n"],"names":["hyper","styles","PanelSubhead","classNames","Icon","useState","Collapse","Button"],"mappings":"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"}

package/dist/expansion-panel/index.d.ts

@@ -1,18 +0,0 @@
-import { PanelSubhead } from './headers';
-declare function ExpansionPanelSummary(props: any): import('react').FunctionComponentElement<any>;
-export declare function InfoPanelSection(props: any): import('react').ReactElement<{
-    className: any;
-}, string | import('react').JSXElementConstructor<any>>;
-declare function ExpansionPanel(props: any): import('react').FunctionComponentElement<any>;
-declare function SubExpansionPanel(props: any): import('react').FunctionComponentElement<any>;
-declare function ExpandableDetailsPanel(props: any): import('react').ReactElement<{
-    className: any;
-}, string | import('react').JSXElementConstructor<any>>;
-declare function ExpansionBody({ title, className, children }: {
-    title: any;
-    className: any;
-    children: any;
-}): import('react').ReactElement<{
-    className: any;
-}, string | import('react').JSXElementConstructor<any>>;
-export { ExpansionPanel, ExpansionPanelSummary, ExpandableDetailsPanel, SubExpansionPanel, ExpansionBody, PanelSubhead, };