@macrostrat/map-interface 1.1.0 → 1.2.1

package/dist/esm/map-view.a3fe6257.js

@@ -0,0 +1,161 @@
+import $44I7C$mainmodulef70e002bjs from "./main.module.f70e002b.js";
+import "../cjs/main.module.f085a193.css";
+import {enable3DTerrain as $286fbb15f2139dc1$export$b730542ee281c4b1} from "./terrain.f65cf7c5.js";
+import {MapLoadingReporter as $4bc3dd5f0732eed3$export$e57f9eaa51773f82, MapMovedReporter as $4bc3dd5f0732eed3$export$f6eeee399afc4e9a, MapResizeManager as $4bc3dd5f0732eed3$export$31b2e088aff2dc5d, MapPaddingManager as $4bc3dd5f0732eed3$export$2ab96428dea558d6} from "./helpers.fb1d7227.js";
+import {getMapPadding as $82fe09613877ffc2$export$bb78f9f01775eef1} from "./utils.d40349f0.js";
+import $44I7C$macrostrathyper from "@macrostrat/hyper";
+import {useMapDispatch as $44I7C$useMapDispatch, useMapRef as $44I7C$useMapRef, useMapPosition as $44I7C$useMapPosition} from "@macrostrat/mapbox-react";
+import {setMapPosition as $44I7C$setMapPosition, mapViewInfo as $44I7C$mapViewInfo} from "@macrostrat/mapbox-utils";
+import $44I7C$classnames from "classnames";
+import $44I7C$mapboxgl from "mapbox-gl";
+import {useRef as $44I7C$useRef, useEffect as $44I7C$useEffect} from "react";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+
+
+
+const $9e150e311a3261e9$var$h = (0, $44I7C$macrostrathyper).styled((0, ($parcel$interopDefault($44I7C$mainmodulef70e002bjs))));
+function $9e150e311a3261e9$var$defaultInitializeMap(container, args = {}) {
+    const { mapPosition: mapPosition, ...rest } = args;
+    console.log("Initializing map (default)", args);
+    const map = new (0, $44I7C$mapboxgl).Map({
+        container: container,
+        maxZoom: 18,
+        //maxTileCacheSize: 0,
+        logoPosition: "bottom-left",
+        trackResize: true,
+        antialias: true,
+        optimizeForTerrain: true,
+        ...rest
+    });
+    // set initial map position
+    if (mapPosition != null) (0, $44I7C$setMapPosition)(map, mapPosition);
+    //setMapPosition(map, mapPosition);
+    return map;
+}
+const $9e150e311a3261e9$var$defaultMapPosition = {
+    camera: {
+        lat: 34,
+        lng: -120,
+        altitude: 300000
+    }
+};
+function $9e150e311a3261e9$export$ab1e7a67d6ec5ad8(props) {
+    let { terrainSourceID: terrainSourceID } = props;
+    const { enableTerrain: enableTerrain = true, style: style, mapPosition: mapPosition = $9e150e311a3261e9$var$defaultMapPosition, initializeMap: initializeMap = $9e150e311a3261e9$var$defaultInitializeMap, children: children, mapboxToken: mapboxToken, accessToken: // Deprecated
+    accessToken, infoMarkerPosition: infoMarkerPosition, transformRequest: transformRequest, projection: projection, onMapLoaded: onMapLoaded = null, onStyleLoaded: onStyleLoaded = null, onMapMoved: onMapMoved = null, ...rest } = props;
+    if (enableTerrain) terrainSourceID ??= "mapbox-3d-dem";
+    const _mapboxToken = mapboxToken ?? accessToken;
+    if (_mapboxToken != null) (0, $44I7C$mapboxgl).accessToken = _mapboxToken;
+    const dispatch = (0, $44I7C$useMapDispatch)();
+    let mapRef = (0, $44I7C$useMapRef)();
+    const ref = (0, $44I7C$useRef)();
+    const parentRef = (0, $44I7C$useRef)();
+    (0, $44I7C$useEffect)(()=>{
+        if (style == null) return;
+        let map = mapRef.current;
+        if (map != null) {
+            console.log("Setting style", style);
+            map.setStyle(style);
+        } else {
+            console.log("Initializing map", style);
+            const map = initializeMap(ref.current, {
+                style: style,
+                projection: projection,
+                mapPosition: mapPosition,
+                transformRequest: transformRequest,
+                ...rest
+            });
+            dispatch({
+                type: "set-map",
+                payload: map
+            });
+            map.setPadding((0, $82fe09613877ffc2$export$bb78f9f01775eef1)(ref, parentRef), {
+                animate: false
+            });
+            onMapLoaded?.(map);
+        }
+        const loadCallback = ()=>{
+            onStyleLoaded?.(map);
+            dispatch({
+                type: "set-style-loaded",
+                payload: true
+            });
+        };
+        map = mapRef.current;
+        if (map.isStyleLoaded()) // Catch a race condition where the style is loaded before the callback is set
+        loadCallback();
+        map.on("style.load", loadCallback);
+        return ()=>{
+            map.off("style.load", loadCallback);
+        };
+    }, [
+        style
+    ]);
+    const _computedMapPosition = (0, $44I7C$useMapPosition)();
+    const { mapUse3D: mapUse3D, mapIsRotated: mapIsRotated } = (0, $44I7C$mapViewInfo)(_computedMapPosition);
+    // Get map projection
+    const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
+    const className = (0, $44I7C$classnames)({
+        "is-rotated": mapIsRotated ?? false,
+        "is-3d-available": mapUse3D ?? false
+    }, `${_projection}-projection`);
+    return $9e150e311a3261e9$var$h("div.map-view-container.main-view", {
+        ref: parentRef
+    }, [
+        $9e150e311a3261e9$var$h("div.mapbox-map#map", {
+            ref: ref,
+            className: className
+        }),
+        $9e150e311a3261e9$var$h((0, $4bc3dd5f0732eed3$export$e57f9eaa51773f82), {
+            ignoredSources: [
+                "elevationMarker",
+                "crossSectionEndpoints"
+            ]
+        }),
+        $9e150e311a3261e9$var$h((0, $4bc3dd5f0732eed3$export$f6eeee399afc4e9a), {
+            onMapMoved: onMapMoved
+        }),
+        $9e150e311a3261e9$var$h((0, $4bc3dd5f0732eed3$export$31b2e088aff2dc5d), {
+            containerRef: ref
+        }),
+        $9e150e311a3261e9$var$h((0, $4bc3dd5f0732eed3$export$2ab96428dea558d6), {
+            containerRef: ref,
+            parentRef: parentRef,
+            infoMarkerPosition: infoMarkerPosition
+        }),
+        $9e150e311a3261e9$var$h($9e150e311a3261e9$export$cee395a8a2a00b29, {
+            mapUse3D: mapUse3D,
+            terrainSourceID: terrainSourceID
+        }),
+        children
+    ]);
+}
+function $9e150e311a3261e9$export$cee395a8a2a00b29({ mapUse3D: mapUse3D, terrainSourceID: terrainSourceID }) {
+    const mapRef = (0, $44I7C$useMapRef)();
+    (0, $44I7C$useEffect)(()=>{
+        const map = mapRef.current;
+        if (map == null) return;
+        (0, $286fbb15f2139dc1$export$b730542ee281c4b1)(map, mapUse3D, terrainSourceID);
+    }, [
+        mapRef.current,
+        mapUse3D
+    ]);
+    return null;
+}
+
+
+export {$9e150e311a3261e9$export$ab1e7a67d6ec5ad8 as MapView, $9e150e311a3261e9$export$cee395a8a2a00b29 as MapTerrainManager};
+//# sourceMappingURL=map-view.a3fe6257.js.map

package/dist/esm/map-view.a3fe6257.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/map-interface/src/map-view/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  useMapRef,\n  useMapDispatch,\n  useMapPosition,\n} from \"@macrostrat/mapbox-react\";\nimport {\n  mapViewInfo,\n  MapPosition,\n  setMapPosition,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useCallback } from \"react\";\nimport styles from \"../main.module.sass\";\nimport { enable3DTerrain } from \"./terrain\";\nimport {\n  MapLoadingReporter,\n  MapMovedReporter,\n  MapPaddingManager,\n  MapResizeManager,\n} from \"../helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"../utils\";\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}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n  mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n  const { mapPosition, ...rest } = args;\n  console.log(\"Initializing map (default)\", args);\n\n  const map = new mapboxgl.Map({\n    container,\n    maxZoom: 18,\n    //maxTileCacheSize: 0,\n    logoPosition: \"bottom-left\",\n    trackResize: true,\n    antialias: true,\n    optimizeForTerrain: true,\n    ...rest,\n  });\n\n  // set initial map position\n  if (mapPosition != null) {\n    setMapPosition(map, mapPosition);\n  }\n\n  //setMapPosition(map, mapPosition);\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 = defaultMapPosition,\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    ...rest\n  } = props;\n  if (enableTerrain) {\n    terrainSourceID ??= \"mapbox-3d-dem\";\n  }\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  useEffect(() => {\n    if (style == null) return;\n    let map = mapRef.current;\n    if (map != null) {\n      console.log(\"Setting style\", style);\n      map.setStyle(style);\n    } else {\n      console.log(\"Initializing map\", style);\n      const map = initializeMap(ref.current, {\n        style,\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\n    const loadCallback = () => {\n      onStyleLoaded?.(map);\n      dispatch({ type: \"set-style-loaded\", payload: true });\n    };\n\n    map = mapRef.current;\n    if (map.isStyleLoaded()) {\n      // Catch a race condition where the style is loaded before the callback is set\n      loadCallback();\n    }\n    map.on(\"style.load\", loadCallback);\n    return () => {\n      map.off(\"style.load\", loadCallback);\n    };\n  }, [style]);\n\n  const _computedMapPosition = useMapPosition();\n  const { mapUse3D, mapIsRotated } = mapViewInfo(_computedMapPosition);\n\n  // Get map projection\n  const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n  const className = classNames(\n    {\n      \"is-rotated\": mapIsRotated ?? false,\n      \"is-3d-available\": mapUse3D ?? false,\n    },\n    `${_projection}-projection`\n  );\n\n  return h(\"div.map-view-container.main-view\", { ref: parentRef }, [\n    h(\"div.mapbox-map#map\", { ref, className }),\n    h(MapLoadingReporter, {\n      ignoredSources: [\"elevationMarker\", \"crossSectionEndpoints\"],\n    }),\n    h(MapMovedReporter, { onMapMoved }),\n    h(MapResizeManager, { containerRef: ref }),\n    h(MapPaddingManager, { containerRef: ref, parentRef, infoMarkerPosition }),\n    h(MapTerrainManager, { mapUse3D, terrainSourceID }),\n    children,\n  ]);\n}\n\nexport function MapTerrainManager({\n  mapUse3D,\n  terrainSourceID,\n}: {\n  mapUse3D?: boolean;\n  terrainSourceID?: string;\n}) {\n  const mapRef = useMapRef();\n\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    enable3DTerrain(map, mapUse3D, terrainSourceID);\n  }, [mapRef.current, mapUse3D]);\n  return null;\n}\n"],"names":[],"version":3,"file":"map-view.a3fe6257.js.map"}

package/dist/esm/terrain.f65cf7c5.js

@@ -0,0 +1,54 @@
+// We should merge this with code in @macrostrat/mapbox-react/src/terrain.ts:
+function $286fbb15f2139dc1$export$b730542ee281c4b1(map, shouldEnable, sourceID = null) {
+    if (!map.style?._loaded) {
+        map.once("style.load", ()=>{
+            $286fbb15f2139dc1$export$b730542ee281c4b1(map, shouldEnable, sourceID);
+        });
+        return;
+    }
+    const currentTerrainSource = $286fbb15f2139dc1$var$getTerrainSourceID(map);
+    let demSourceID = sourceID ?? currentTerrainSource ?? "mapbox-dem";
+    console.log("Enabling 3D terrain with source", demSourceID);
+    // Enable or disable terrain depending on our current desires...
+    const currentTerrain = map.getTerrain();
+    if (!shouldEnable) {
+        if (currentTerrain != null) map.setTerrain(null);
+        return;
+    }
+    if (currentTerrain != null) return;
+    // Add a DEM source if one is not found already.
+    if (map.getSource(demSourceID) == null) map.addSource(demSourceID, {
+        type: "raster-dem",
+        url: "mapbox://mapbox.mapbox-terrain-dem-v1",
+        tileSize: 512,
+        maxzoom: 14
+    });
+    // add a sky layer that will show when the map is highly pitched
+    if (map.getLayer("sky") == null) map.addLayer({
+        id: "sky",
+        type: "sky",
+        paint: {
+            "sky-type": "atmosphere",
+            "sky-atmosphere-sun": [
+                0.0,
+                0.0
+            ],
+            "sky-atmosphere-sun-intensity": 15
+        }
+    });
+    map.setTerrain({
+        source: demSourceID,
+        exaggeration: 1
+    });
+    console.log(map.getTerrain());
+}
+function $286fbb15f2139dc1$var$getTerrainSourceID(map) {
+    for (const [key, source] of Object.entries(map.getStyle().sources)){
+        if (source.type == "raster-dem") return key;
+    }
+    return null;
+}
+
+
+export {$286fbb15f2139dc1$export$b730542ee281c4b1 as enable3DTerrain};
+//# sourceMappingURL=terrain.f65cf7c5.js.map

package/dist/esm/terrain.f65cf7c5.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,6EAA6E;AAEtE,SAAS,0CACd,GAAG,EACH,YAAqB,EACrB,WAA0B,IAAI;IAE9B,IAAI,CAAC,IAAI,KAAK,EAAE,SAAS;QACvB,IAAI,IAAI,CAAC,cAAc;YACrB,0CAAgB,KAAK,cAAc;QACrC;QACA;IACF;IAEA,MAAM,uBAAuB,yCAAmB;IAChD,IAAI,cAAc,YAAY,wBAAwB;IAEtD,QAAQ,GAAG,CAAC,mCAAmC;IAE/C,gEAAgE;IAChE,MAAM,iBAAiB,IAAI,UAAU;IAErC,IAAI,CAAC,cAAc;QACjB,IAAI,kBAAkB,MAAM,IAAI,UAAU,CAAC;QAC3C;IACF;IACA,IAAI,kBAAkB,MAAM;IAE5B,gDAAgD;IAChD,IAAI,IAAI,SAAS,CAAC,gBAAgB,MAChC,IAAI,SAAS,CAAC,aAAa;QACzB,MAAM;QACN,KAAK;QACL,UAAU;QACV,SAAS;IACX;IAGF,gEAAgE;IAChE,IAAI,IAAI,QAAQ,CAAC,UAAU,MACzB,IAAI,QAAQ,CAAC;QACX,IAAI;QACJ,MAAM;QACN,OAAO;YACL,YAAY;YACZ,sBAAsB;gBAAC;gBAAK;aAAI;YAChC,gCAAgC;QAClC;IACF;IAGF,IAAI,UAAU,CAAC;QAAE,QAAQ;QAAa,cAAc;IAAE;IACtD,QAAQ,GAAG,CAAC,IAAI,UAAU;AAC5B;AAEA,SAAS,yCAAmB,GAAG;IAC7B,KAAK,MAAM,CAAC,KAAK,OAAO,IAAI,OAAO,OAAO,CAAC,IAAI,QAAQ,GAAG,OAAO,EAAG;QAClE,IAAI,OAAO,IAAI,IAAI,cACjB,OAAO;IAEX;IACA,OAAO;AACT","sources":["packages/map-interface/src/map-view/terrain.ts"],"sourcesContent":["// We should merge this with code in @macrostrat/mapbox-react/src/terrain.ts:\n\nexport function enable3DTerrain(\n  map,\n  shouldEnable: boolean,\n  sourceID: string | null = null\n) {\n  if (!map.style?._loaded) {\n    map.once(\"style.load\", () => {\n      enable3DTerrain(map, shouldEnable, sourceID);\n    });\n    return;\n  }\n\n  const currentTerrainSource = getTerrainSourceID(map);\n  let demSourceID = sourceID ?? currentTerrainSource ?? \"mapbox-dem\";\n\n  console.log(\"Enabling 3D terrain with source\", demSourceID);\n\n  // Enable or disable terrain depending on our current desires...\n  const currentTerrain = map.getTerrain();\n\n  if (!shouldEnable) {\n    if (currentTerrain != null) map.setTerrain(null);\n    return;\n  }\n  if (currentTerrain != null) return;\n\n  // Add a DEM source if one is not found already.\n  if (map.getSource(demSourceID) == null) {\n    map.addSource(demSourceID, {\n      type: \"raster-dem\",\n      url: \"mapbox://mapbox.mapbox-terrain-dem-v1\",\n      tileSize: 512,\n      maxzoom: 14,\n    });\n  }\n\n  // add a sky layer that will show when the map is highly pitched\n  if (map.getLayer(\"sky\") == null) {\n    map.addLayer({\n      id: \"sky\",\n      type: \"sky\",\n      paint: {\n        \"sky-type\": \"atmosphere\",\n        \"sky-atmosphere-sun\": [0.0, 0.0],\n        \"sky-atmosphere-sun-intensity\": 15,\n      },\n    });\n  }\n\n  map.setTerrain({ source: demSourceID, exaggeration: 1 });\n  console.log(map.getTerrain());\n}\n\nfunction getTerrainSourceID(map) {\n  for (const [key, source] of Object.entries(map.getStyle().sources)) {\n    if (source.type == \"raster-dem\") {\n      return key;\n    }\n  }\n  return null;\n}\n"],"names":[],"version":3,"file":"terrain.f65cf7c5.js.map"}

package/dist/esm/tile-extent.ca526996.js

@@ -0,0 +1,46 @@
+import {useMapRef as $edFMK$useMapRef, useMapConditionalStyle as $edFMK$useMapConditionalStyle} from "@macrostrat/mapbox-react";
+import {tileToGeoJSON as $edFMK$tileToGeoJSON} from "@mapbox/tilebelt";
+import {useCallback as $edFMK$useCallback} from "react";
+
+
+
+
+function $1d4d29ef2725aa16$export$86c09739b12f23cd({ tile: tile, color: color = "red" }) {
+    const styleCallback = (0, $edFMK$useCallback)((map, val)=>{
+        const style = map.getStyle();
+        if (style.layers == null) return;
+        style.layers = style.layers.filter((l)=>l.id != "tile-extent");
+        if (val == null) return map.setStyle(style);
+        const { x: x, y: y, z: z } = val;
+        const extent = (0, $edFMK$tileToGeoJSON)([
+            x,
+            y,
+            z
+        ]);
+        const source = {
+            type: "geojson",
+            data: extent
+        };
+        const layer = {
+            id: "tile-extent",
+            type: "line",
+            source: "tile-extent",
+            paint: {
+                "line-color": color,
+                "line-width": 2
+            }
+        };
+        style.sources["tile-extent"] = source;
+        style.layers.push(layer);
+        map.setStyle(style);
+    }, [
+        color
+    ]);
+    const map = (0, $edFMK$useMapRef)();
+    (0, $edFMK$useMapConditionalStyle)(map, tile, styleCallback);
+    return null;
+}
+
+
+export {$1d4d29ef2725aa16$export$86c09739b12f23cd as TileExtentLayer};
+//# sourceMappingURL=tile-extent.ca526996.js.map

package/dist/esm/tile-extent.ca526996.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAMO,SAAS,0CAAgB,QAC9B,IAAI,SACJ,QAAQ,OAIT;IACC,MAAM,gBAAgB,CAAA,GAAA,kBAAU,EAC9B,CAAC,KAAK;QACJ,MAAM,QAAQ,IAAI,QAAQ;QAC1B,IAAI,MAAM,MAAM,IAAI,MAAM;QAC1B,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,IAAM,EAAE,EAAE,IAAI;QAClD,IAAI,OAAO,MACT,OAAO,IAAI,QAAQ,CAAC;QAEtB,MAAM,KAAE,CAAC,KAAE,CAAC,KAAE,CAAC,EAAE,GAAG;QACpB,MAAM,SAAS,CAAA,GAAA,oBAAY,EAAE;YAAC;YAAG;YAAG;SAAE;QACtC,MAAM,SAAS;YACb,MAAM;YACN,MAAM;QACR;QACA,MAAM,QAAQ;YACZ,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,OAAO;gBACL,cAAc;gBACd,cAAc;YAChB;QACF;QACA,MAAM,OAAO,CAAC,cAAc,GAAG;QAC/B,MAAM,MAAM,CAAC,IAAI,CAAC;QAClB,IAAI,QAAQ,CAAC;IACf,GACA;QAAC;KAAM;IAET,MAAM,MAAM,CAAA,GAAA,gBAAQ;IACpB,CAAA,GAAA,6BAAqB,EAAE,KAAK,MAAM;IAClC,OAAO;AACT","sources":["packages/map-interface/src/dev/tile-extent.ts"],"sourcesContent":["import { useMapConditionalStyle, useMapRef } from \"@macrostrat/mapbox-react\";\nimport { tileToGeoJSON } from \"@mapbox/tilebelt\";\nimport { useCallback } from \"react\";\n\ntype TileIndex = { x: number; y: number; z: number };\n\nexport function TileExtentLayer({\n  tile,\n  color = \"red\",\n}: {\n  tile: TileIndex | null;\n  color?: string;\n}) {\n  const styleCallback = useCallback(\n    (map, val: TileIndex) => {\n      const style = map.getStyle();\n      if (style.layers == null) return;\n      style.layers = style.layers.filter((l) => l.id != \"tile-extent\");\n      if (val == null) {\n        return map.setStyle(style);\n      }\n      const { x, y, z } = val;\n      const extent = tileToGeoJSON([x, y, z]);\n      const source = {\n        type: \"geojson\",\n        data: extent,\n      };\n      const layer = {\n        id: \"tile-extent\",\n        type: \"line\",\n        source: \"tile-extent\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 2,\n        },\n      };\n      style.sources[\"tile-extent\"] = source;\n      style.layers.push(layer);\n      map.setStyle(style);\n    },\n    [color]\n  );\n  const map = useMapRef();\n  useMapConditionalStyle(map, tile, styleCallback);\n  return null;\n}\n"],"names":[],"version":3,"file":"tile-extent.ca526996.js.map"}

package/dist/esm/utils.122d1f2d.js

@@ -0,0 +1,28 @@
+import {format as $9NqSy$format} from "d3-format";
+
+
+const $3e1bd09be8f70c4c$export$97c1b10e131a836d = (0, $9NqSy$format)(".4~f");
+const $3e1bd09be8f70c4c$export$b1cb0f7fb990b3ea = (0, $9NqSy$format)(".3~f");
+const $3e1bd09be8f70c4c$export$4c173b1b2f78faf7 = (0, $9NqSy$format)(".2~f");
+const $3e1bd09be8f70c4c$export$e54bbd2c33d17485 = (0, $9NqSy$format)(".1~f");
+const $3e1bd09be8f70c4c$export$bc135f63e2f56fd4 = (0, $9NqSy$format)(".0f");
+function $3e1bd09be8f70c4c$export$7c4d25c0c3217d8c(val, precision = 0) {
+    switch(precision){
+        case 4:
+            return $3e1bd09be8f70c4c$export$97c1b10e131a836d(val);
+        case 3:
+            return $3e1bd09be8f70c4c$export$b1cb0f7fb990b3ea(val);
+        case 2:
+            return $3e1bd09be8f70c4c$export$4c173b1b2f78faf7(val);
+        case 1:
+            return $3e1bd09be8f70c4c$export$e54bbd2c33d17485(val);
+        case 0:
+            return $3e1bd09be8f70c4c$export$bc135f63e2f56fd4(val);
+        default:
+            return $3e1bd09be8f70c4c$export$97c1b10e131a836d(val);
+    }
+}
+
+
+export {$3e1bd09be8f70c4c$export$97c1b10e131a836d as fmt4, $3e1bd09be8f70c4c$export$b1cb0f7fb990b3ea as fmt3, $3e1bd09be8f70c4c$export$4c173b1b2f78faf7 as fmt2, $3e1bd09be8f70c4c$export$e54bbd2c33d17485 as fmt1, $3e1bd09be8f70c4c$export$bc135f63e2f56fd4 as fmtInt, $3e1bd09be8f70c4c$export$7c4d25c0c3217d8c as formatValue};
+//# sourceMappingURL=utils.122d1f2d.js.map

package/dist/esm/utils.122d1f2d.js.map

@@ -0,0 +1 @@
+{"mappings":";;;AAEO,MAAM,4CAAO,CAAA,GAAA,aAAK,EAAE;AACpB,MAAM,4CAAO,CAAA,GAAA,aAAK,EAAE;AACpB,MAAM,4CAAO,CAAA,GAAA,aAAK,EAAE;AACpB,MAAM,4CAAO,CAAA,GAAA,aAAK,EAAE;AACpB,MAAM,4CAAS,CAAA,GAAA,aAAK,EAAE;AAEtB,SAAS,0CAAY,GAAW,EAAE,YAAoB,CAAC;IAC5D,OAAQ;QACN,KAAK;YACH,OAAO,0CAAK;QACd,KAAK;YACH,OAAO,0CAAK;QACd,KAAK;YACH,OAAO,0CAAK;QACd,KAAK;YACH,OAAO,0CAAK;QACd,KAAK;YACH,OAAO,0CAAO;QAChB;YACE,OAAO,0CAAK;IAChB;AACF","sources":["packages/map-interface/src/location-info/utils.ts"],"sourcesContent":["import { format } from \"d3-format\";\n\nexport const fmt4 = format(\".4~f\");\nexport const fmt3 = format(\".3~f\");\nexport const fmt2 = format(\".2~f\");\nexport const fmt1 = format(\".1~f\");\nexport const fmtInt = format(\".0f\");\n\nexport function formatValue(val: number, precision: number = 0): string {\n  switch (precision) {\n    case 4:\n      return fmt4(val);\n    case 3:\n      return fmt3(val);\n    case 2:\n      return fmt2(val);\n    case 1:\n      return fmt1(val);\n    case 0:\n      return fmtInt(val);\n    default:\n      return fmt4(val);\n  }\n}\n"],"names":[],"version":3,"file":"utils.122d1f2d.js.map"}

package/dist/esm/utils.d40349f0.js

@@ -0,0 +1,40 @@
+import {useEffect as $38k5Q$useEffect} from "react";
+import {Marker as $38k5Q$Marker} from "mapbox-gl";
+
+
+
+function $82fe09613877ffc2$var$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 $82fe09613877ffc2$export$bb78f9f01775eef1(ref, parentRef) {
+    const rect = parentRef.current?.getBoundingClientRect();
+    const childRect = ref.current?.getBoundingClientRect();
+    if (rect == null || childRect == null) return;
+    return $82fe09613877ffc2$var$calcMapPadding(rect, childRect);
+}
+function $82fe09613877ffc2$export$278090850f6b3a9f(mapRef, markerRef, markerPosition) {
+    (0, $38k5Q$useEffect)(()=>{
+        const map = mapRef.current;
+        if (map == null) return;
+        if (markerPosition == null) {
+            markerRef.current?.remove();
+            return;
+        }
+        const marker = markerRef.current ?? new (0, $38k5Q$Marker)();
+        marker.setLngLat(markerPosition).addTo(map);
+        markerRef.current = marker;
+        return ()=>marker.remove();
+    }, [
+        mapRef.current,
+        markerPosition
+    ]);
+}
+
+
+export {$82fe09613877ffc2$export$bb78f9f01775eef1 as getMapPadding, $82fe09613877ffc2$export$278090850f6b3a9f as useMapMarker};
+//# sourceMappingURL=utils.d40349f0.js.map

package/dist/esm/utils.d40349f0.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAGA,SAAS,qCAAe,IAAI,EAAE,SAAS;IACrC,OAAO;QACL,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI,GAAG,UAAU,IAAI,EAAE;QAC3C,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,GAAG,UAAU,GAAG,EAAE;QACxC,OAAO,KAAK,GAAG,CAAC,UAAU,KAAK,GAAG,KAAK,KAAK,EAAE;QAC9C,QAAQ,KAAK,GAAG,CAAC,UAAU,MAAM,GAAG,KAAK,MAAM,EAAE;IACnD;AACF;AAEO,SAAS,0CAAc,GAAG,EAAE,SAAS;IAC1C,MAAM,OAAO,UAAU,OAAO,EAAE;IAChC,MAAM,YAAY,IAAI,OAAO,EAAE;IAC/B,IAAI,QAAQ,QAAQ,aAAa,MAAM;IACvC,OAAO,qCAAe,MAAM;AAC9B;AAEO,SAAS,0CAAa,MAAM,EAAE,SAAS,EAAE,cAAc;IAC5D,CAAA,GAAA,gBAAQ,EAAE;QACR,MAAM,MAAM,OAAO,OAAO;QAC1B,IAAI,OAAO,MAAM;QACjB,IAAI,kBAAkB,MAAM;YAC1B,UAAU,OAAO,EAAE;YACnB;QACF;QACA,MAAM,SAAS,UAAU,OAAO,IAAI,IAAI,CAAA,GAAA,aAAK;QAC7C,OAAO,SAAS,CAAC,gBAAgB,KAAK,CAAC;QACvC,UAAU,OAAO,GAAG;QACpB,OAAO,IAAM,OAAO,MAAM;IAC5B,GAAG;QAAC,OAAO,OAAO;QAAE;KAAe;AACrC","sources":["packages/map-interface/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":[],"version":3,"file":"utils.d40349f0.js.map"}

package/dist/esm/vector-tile-features.e1a24df0.js

@@ -0,0 +1,258 @@
+import $ddM1H$mainmodule5eb366dejs from "./main.module.5eb366de.js";
+import "../cjs/main.module.becc2fe7.css";
+import {ExpansionPanel as $d570ac304373e71c$export$40e646e38e6ed100} from "./expansion-panel.feff0e62.js";
+import {Button as $ddM1H$Button, Intent as $ddM1H$Intent, Spinner as $ddM1H$Spinner, Switch as $ddM1H$Switch} from "@blueprintjs/core";
+import {useMapRef as $ddM1H$useMapRef, useMapStatus as $ddM1H$useMapStatus} from "@macrostrat/mapbox-react";
+import $ddM1H$macrostrathyper from "@macrostrat/hyper";
+import {useState as $ddM1H$useState, useCallback as $ddM1H$useCallback, useRef as $ddM1H$useRef, useEffect as $ddM1H$useEffect} from "react";
+import {JSONView as $ddM1H$JSONView} from "@macrostrat/ui-components";
+import {group as $ddM1H$group} from "d3-array";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+const $b8c84b63e75fe4f2$var$h = (0, $ddM1H$macrostrathyper).styled((0, ($parcel$interopDefault($ddM1H$mainmodule5eb366dejs))));
+function $b8c84b63e75fe4f2$export$2906e7f4b228efe9({ data: data, ...rest }) {
+    // Instead of managing hover state with CSS, we use a state variable,
+    // so that the button re-renders when the state changes
+    const [showControls, setShowControls] = (0, $ddM1H$useState)(false);
+    const onMouseEnter = (0, $ddM1H$useCallback)(()=>setShowControls(true), []);
+    const onMouseLeave = (0, $ddM1H$useCallback)(()=>setShowControls(false), []);
+    return $b8c84b63e75fe4f2$var$h("div.feature-properties", {
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }, [
+        $b8c84b63e75fe4f2$var$h.if(showControls)("div.controls", $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$CopyJSONButton, {
+            data: data
+        })),
+        $b8c84b63e75fe4f2$var$h((0, $ddM1H$JSONView), {
+            data: data,
+            hideRoot: true,
+            ...rest
+        })
+    ]);
+}
+function $b8c84b63e75fe4f2$export$dc87b4d46cea200d({ feature: feature }) {
+    const props = feature.properties;
+    return $b8c84b63e75fe4f2$var$h("div.feature-record", [
+        $b8c84b63e75fe4f2$var$h.if(Object.keys(props).length > 0)($b8c84b63e75fe4f2$export$2906e7f4b228efe9, {
+            data: props
+        })
+    ]);
+}
+function $b8c84b63e75fe4f2$var$CopyJSONButton({ data: data }) {
+    const [copied, setCopied] = (0, $ddM1H$useState)(false);
+    return $b8c84b63e75fe4f2$var$h((0, $ddM1H$Button), {
+        icon: copied ? "tick" : "clipboard",
+        intent: copied ? (0, $ddM1H$Intent).SUCCESS : (0, $ddM1H$Intent).NONE,
+        minimal: true,
+        small: true,
+        onClick () {
+            navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+            setCopied(true);
+        }
+    });
+}
+function $b8c84b63e75fe4f2$export$214daccdda0f4ac6({ selectedLocation: selectedLocation, setFeatures: setFeatures, radius: radius = 2 }) {
+    const mapRef = (0, $ddM1H$useMapRef)();
+    const isLoading = (0, $ddM1H$useMapStatus)((s)=>s.isLoading);
+    const isInitialized = (0, $ddM1H$useMapStatus)((s)=>s.isInitialized);
+    const prevLocation = (0, $ddM1H$useRef)(null);
+    const prevFeatures = (0, $ddM1H$useRef)([]);
+    (0, $ddM1H$useEffect)(()=>{
+        const map = mapRef?.current;
+        if (map == null) return;
+        if (selectedLocation == null) {
+            setFeatures(null);
+            return;
+        }
+        if (!isInitialized) return;
+        const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;
+        const locationMemo = JSON.stringify(selectedLocation);
+        if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures) return;
+        prevLocation.current = locationMemo;
+        // Don't update if the location hasn't changed
+        //if (selectedLocation == prevLocation) return;
+        const r = radius;
+        const pt = map.project(selectedLocation);
+        const bbox = [
+            [
+                pt.x - r,
+                pt.y - r
+            ],
+            [
+                pt.x + r,
+                pt.y + r
+            ]
+        ];
+        const features = map.queryRenderedFeatures(bbox);
+        prevFeatures.current = features ?? [];
+        setFeatures(features);
+    }, [
+        isInitialized,
+        selectedLocation,
+        isLoading
+    ]);
+    return null;
+}
+function $b8c84b63e75fe4f2$var$FeatureHeader({ feature: feature }) {
+    return $b8c84b63e75fe4f2$var$h("div.feature-header", [
+        $b8c84b63e75fe4f2$var$h("h3", [
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$KeyValue, {
+                label: "Source",
+                value: feature.source
+            }),
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$KeyValue, {
+                label: "Source layer",
+                value: feature.sourceLayer
+            })
+        ])
+    ]);
+}
+function $b8c84b63e75fe4f2$var$KeyValue({ label: label, value: value }) {
+    return $b8c84b63e75fe4f2$var$h("span.key-value", [
+        $b8c84b63e75fe4f2$var$h("span.key", label),
+        $b8c84b63e75fe4f2$var$h("code.value", value)
+    ]);
+}
+function $b8c84b63e75fe4f2$var$LoadingAwareFeatureSet({ features: features, sourceID: sourceID }) {
+    const map = (0, $ddM1H$useMapRef)();
+    if (map?.current == null) return null;
+    const [isLoaded, setIsLoaded] = (0, $ddM1H$useState)(false);
+    const sourceFeatures = features.filter((d)=>d.source == "burwell");
+    (0, $ddM1H$useEffect)(()=>{
+        if (sourceFeatures.length > 0) {
+            setIsLoaded(true);
+            return;
+        }
+        const isLoaded = map.current.isSourceLoaded(sourceID);
+        setIsLoaded(isLoaded);
+        if (!isLoaded) map.current.once("sourcedata", (e)=>{
+            if (e.sourceId == sourceID) setIsLoaded(true);
+        });
+    }, [
+        map.current,
+        sourceID,
+        sourceFeatures.length
+    ]);
+    if (!isLoaded) return $b8c84b63e75fe4f2$var$h((0, $ddM1H$Spinner));
+    return $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$export$617d79dae526d2cf, {
+        features: sourceFeatures
+    });
+}
+function $b8c84b63e75fe4f2$export$43c75dec9d0b96c({ feature: feature, showExtent: showExtent, setShowExtent: setShowExtent }) {
+    if (feature == null) return null;
+    const size = feature._vectorTileFeature._pbf.length;
+    return $b8c84b63e75fe4f2$var$h("div.tile-info", [
+        $b8c84b63e75fe4f2$var$h("h3", "Tile"),
+        $b8c84b63e75fe4f2$var$h("div.tile-index", [
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$KeyValue, {
+                label: "x",
+                value: feature._x
+            }),
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$KeyValue, {
+                label: "y",
+                value: feature._y
+            }),
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$KeyValue, {
+                label: "z",
+                value: feature._z
+            })
+        ]),
+        $b8c84b63e75fe4f2$var$h("div.spacer"),
+        $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$KeyValue, {
+            label: "Size",
+            value: $b8c84b63e75fe4f2$var$formatSize(size)
+        }),
+        $b8c84b63e75fe4f2$var$h((0, $ddM1H$Switch), {
+            label: "Show extent",
+            alignIndicator: "right",
+            checked: showExtent,
+            onChange () {
+                setShowExtent(!showExtent);
+            }
+        })
+    ]);
+}
+function $b8c84b63e75fe4f2$var$formatSize(size) {
+    if (size > 1000000) return $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$UnitNumber, {
+        value: size / 1000000,
+        unit: "Mb"
+    });
+    if (size > 1000) return $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$UnitNumber, {
+        value: size / 1000,
+        unit: "Kb"
+    });
+    return `${size} bytes`;
+}
+function $b8c84b63e75fe4f2$var$UnitNumber({ value: value, unit: unit, precision: precision = 1 }) {
+    return $b8c84b63e75fe4f2$var$h("span.unit-number", [
+        $b8c84b63e75fe4f2$var$h("span.number", value.toFixed(precision)),
+        $b8c84b63e75fe4f2$var$h("span.unit", unit)
+    ]);
+}
+function $b8c84b63e75fe4f2$export$43277c51a01761c1({ features: features, focusedSource: focusedSource = null }) {
+    if (features == null) return null;
+    let focusedSourcePanel = null;
+    let filteredFeatures = features;
+    let title = "Features";
+    if (focusedSource != null) {
+        title = "Basemap features";
+        focusedSourcePanel = $b8c84b63e75fe4f2$var$h((0, $d570ac304373e71c$export$40e646e38e6ed100), {
+            title: "Macrostrat features",
+            className: "macrostrat-features",
+            expanded: true
+        }, [
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$LoadingAwareFeatureSet, {
+                features: features,
+                sourceID: focusedSource
+            })
+        ]);
+        filteredFeatures = features.filter((d)=>d.source != focusedSource);
+    }
+    return $b8c84b63e75fe4f2$var$h("div.feature-panel", [
+        focusedSourcePanel,
+        $b8c84b63e75fe4f2$var$h((0, $d570ac304373e71c$export$40e646e38e6ed100), {
+            title: title,
+            className: "basemap-features",
+            expanded: focusedSource == null
+        }, [
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$FeatureGroups, {
+                features: filteredFeatures
+            })
+        ])
+    ]);
+}
+function $b8c84b63e75fe4f2$var$FeatureGroups({ features: features }) {
+    /** Group features by source and sourceLayer */ if (features == null) return null;
+    const groups = (0, $ddM1H$group)(features, (d)=>`${d.source} - ${d.sourceLayer}`);
+    return $b8c84b63e75fe4f2$var$h("div.feature-groups", Array.from(groups).map(([key, features])=>{
+        return $b8c84b63e75fe4f2$var$h("div.feature-group", [
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$var$FeatureHeader, {
+                feature: features[0]
+            }),
+            $b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$export$617d79dae526d2cf, {
+                features: features
+            })
+        ]);
+    }));
+}
+function $b8c84b63e75fe4f2$export$617d79dae526d2cf({ features: features }) {
+    return $b8c84b63e75fe4f2$var$h("div.features", features.map((feature, i)=>$b8c84b63e75fe4f2$var$h($b8c84b63e75fe4f2$export$dc87b4d46cea200d, {
+            key: i,
+            feature: feature
+        })));
+}
+
+
+export {$b8c84b63e75fe4f2$export$2906e7f4b228efe9 as FeatureProperties, $b8c84b63e75fe4f2$export$dc87b4d46cea200d as FeatureRecord, $b8c84b63e75fe4f2$export$214daccdda0f4ac6 as FeatureSelectionHandler, $b8c84b63e75fe4f2$export$617d79dae526d2cf as Features, $b8c84b63e75fe4f2$export$43c75dec9d0b96c as TileInfo, $b8c84b63e75fe4f2$export$43277c51a01761c1 as FeaturePanel};
+//# sourceMappingURL=vector-tile-features.e1a24df0.js.map