@macrostrat/map-interface 2.0.1 → 2.0.2

package/dist/map-view.js

@@ -4,12 +4,12 @@ import { getMapPosition, mapViewInfo, mergeStyles, getMapboxStyle, setMapPositio
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
 import { useEffect, useRef, useState } from "react";
-import styles from "./main.module.sass.js";
+import h$2 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);
+const h = h$1.styled(h$2);
 function defaultInitializeMap(container, args = {}) {
   const { mapPosition, ...rest } = args;
   const map = new mapboxgl.Map({

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","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} 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":";;;;;;;;;;;AA+BA,MAAM,IAAIA,IAAM,OAAOC,GAAM;AAwC7B,SAAS,qBAAqB,WAAW,OAAyB,IAAI;AACpE,QAAM,EAAE,aAAa,GAAG,KAAA,IAAS;AAEjC,QAAM,MAAM,IAAI,SAAS,IAAI;AAAA,IAC3B;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA;AAAA;AAAA,IAGX,oBAAoB;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,eAAe;AACnB,MAAI,gBAAgB,QAAQ,KAAK,UAAU,QAAQ,KAAK,UAAU,MAAM;AAEtE,mBAAe;AAAA,EACjB;AAGA,MAAI,gBAAgB,MAAM;AACxB,mBAAe,KAAK,YAAY;AAAA,EAClC;AAEA,SAAO;AACT;AAEA,MAAM,qBAAkC;AAAA,EACtC,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,UAAU;AAAA,EAAA;AAEd;AAEO,SAAS,QAAQ,OAAqB;AAC3C,MAAI,EAAE,oBAAoB;AAC1B,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,wBAAwB,CAAC,mBAAmB,uBAAuB;AAAA,IACnE,KAAK;AAAA,IACL;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,MAAI,eAAe;AACjB,wBAAoB;AAAA,EACtB;AAEA,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,eAAe,eAAe;AAEpC,MAAI,gBAAgB,MAAM;AACxB,aAAS,cAAc;AAAA,EACzB;AAEA,QAAM,WAAW,eAAA;AACjB,MAAI,SAAS,UAAA;AACb,QAAM,MAAM,OAAA;AACZ,QAAM,YAAY,OAAA;AAElB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyB,IAAI;AAE/D,QAAM,iBACJ,OAAO,WAAW,OAAO,cAAc,eAAe,OAAO,OAAO;AACtE,QAAM,EAAE,UAAU,iBAAiB,YAAY,cAAc;AAC7D,QAAM,iBAAiB,YAAY,UAAU;AAE7C,YAAU,MAAM;AAEd,QAAI,aAAa,KAAM;AACvB,QAAI,MAAM,OAAO;AAEjB,QAAI,WAAwC;AAE5C,UAAMC,iBAAgB,MAAM,iBAAiB,CAAA;AAE7C,QAAIA,eAAc,SAAS,GAAG;AAC5B,iBAAW,YAAY,UAAU,GAAGA,cAAa;AAAA,IACnD;AASA,QAAI,eAAe;AAEjB,YAAM,eAAe,wBAAwB,UAAU,eAAe;AACtE,iBAAW,YAAY,UAAU,YAAY;AAAA,IAC/C;AAEA,QAAI,kBAAkB,MAAM;AAC1B,iBAAW,eAAe,QAAQ;AAAA,IACpC;AAEA,QAAI,OAAO,MAAM;AACf,eAAS,EAAE,MAAM,oBAAoB,SAAS,OAAO;AACrD,UAAI,SAAS,QAAQ;AAAA,IACvB,OAAO;AACL,YAAMC,OAAM,cAAc,IAAI,SAAS;AAAA,QACrC,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AACD,eAAS,EAAE,MAAM,WAAW,SAASA,MAAK;AAC1CA,WAAI,WAAW,cAAc,KAAK,SAAS,GAAG,EAAE,SAAS,OAAO;AAChE,oBAAcA,IAAG;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,WAAW,eAAe,cAAc,CAAC;AAE7C,iBAAe,YAAY;AAEzB,QAAI;AACJ,QAAI,OAAO,UAAU,UAAU;AAC7B,iBAAW,MAAM,eAAe,OAAO;AAAA,QACrC,cAAc,SAAS;AAAA,MAAA,CACxB;AAAA,IACH,OAAO;AACL,iBAAW;AAAA,IACb;AACA,iBAAa,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,cAAc,OAAO,SAAS,cAAA,GAAiB,QAAQ;AAE7D,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,cAAc,gBAAgB;AAAA,MAC9B,mBAAmB;AAAA,IAAA;AAAA,IAErB,GAAG,WAAW;AAAA,EAAA;AAGhB,QAAM,kBAAkB;AAAA,IACtB;AAAA,MACE;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA,EAAE,KAAK,WAAW,WAAW,gBAAA;AAAA,IAC7B;AAAA,MACE,EAAE,2BAA2B,EAAE,KAAK,WAAW,cAAc,IAAI;AAAA,MACjE,EAAE,oBAAoB;AAAA,QACpB,gBAAgB;AAAA,MAAA,CACjB;AAAA,MACD,EAAE,qBAAqB,EAAE,eAAe;AAAA,MACxC,EAAE,kBAAkB,EAAE,YAAY;AAAA;AAAA;AAAA,MAGlC,EAAE,GAAG,WAAW,EAAE,kBAAkB,EAAE,cAAc,KAAK;AAAA,MACzD,EAAE,mBAAmB;AAAA,QACnB,cAAc;AAAA,QACd;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,EAAE,mBAAmB,EAAE,UAAU,eAAe,iBAAiB,OAAO;AAAA,MACxE;AAAA,IAAA;AAAA,EACF;AAEJ;AAEA,SAAS,oBAAoB,EAAE,gBAAgB,QAAQ;AAGrD,QAAM,gBAAgB,aAAa,CAAC,UAAU,MAAM,aAAa;AACjE,QAAM,SAAS,UAAA;AACf,QAAM,WAAW,eAAA;AAEjB,YAAU,MAAM;AACd,QAAI,cAAe;AACnB,UAAM,WAAW,YAAY,MAAM;AACjC,YAAM,MAAM,OAAO;AACnB,UAAI,OAAO,KAAM;AACjB,UAAI,IAAI,iBAAiB;AAEvB,iBAAS,EAAE,MAAM,oBAAoB,SAAS,MAAM;AACpD,wBAAgB,GAAG;AACnB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IACF,GAAG,EAAE;AACL,WAAO,MAAM,cAAc,QAAQ;AAAA,EACrC,GAAG,CAAC,aAAa,CAAC;AAElB,SAAO;AACT;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,eAAa,UAAU,eAAe;AAEtC,SAAO;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Map interface for Macrostrat",
   "repository": {
     "type": "git",
@@ -48,12 +48,12 @@
   "dependencies": {
     "@blueprintjs/core": "^6.6.1",
     "@macrostrat/color-utils": "^1.2.1",
-    "@macrostrat/data-components": "^1.0.1",
+    "@macrostrat/data-components": "^1.1.1",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "2.0.1",
-    "@macrostrat/mapbox-react": "^3.0.1",
-    "@macrostrat/mapbox-utils": "^1.7.1",
-    "@macrostrat/ui-components": "^5.0.4",
+    "@macrostrat/map-interface": "2.0.2",
+    "@macrostrat/mapbox-react": "^3.0.2",
+    "@macrostrat/mapbox-utils": "^1.7.2",
+    "@macrostrat/ui-components": "^5.0.5",
     "@mapbox/tilebelt": "^2.0.0",
     "@visx/axis": "^3.12.0",
     "@visx/scale": "^3.12.0",
@@ -61,14 +61,14 @@
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.2",
-    "mapbox-gl": "^2.15.0||^3.0.0",
+    "mapbox-gl": "^3.0.0",
     "query-string": "^9.0.0",
     "transition-hook": "^1.5.2",
     "underscore": "^1.13.7",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "@macrostrat/web-components-bundler": "1.0.0"
+    "@macrostrat/web-components-bundler": "1.0.1"
   },
   "publishConfig": {
     "access": "public"

package/src/location-details/location-details.stories.ts

@@ -46,6 +46,10 @@ export function PhysiographyExample() {
 export function MacrostratLinkedDataExample() {
   const mapInfo = fetchMapInfo(lng, lat, zoom);
 
+  if (mapInfo == null) {
+    return null;
+  }
+
   const source =
     mapInfo && mapInfo?.mapData && mapInfo?.mapData.length
       ? mapInfo?.mapData[0]