@macrostrat/map-interface 1.6.0 → 2.0.1

package/dist/controls.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.cjs","sources":["../src/controls.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport { GeolocateControl } from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport {\n  CompassControl,\n  GlobeControl,\n  ThreeDControl,\n  MapControlWrapper,\n  useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport { ScaleControl as BaseScaleControl } from \"mapbox-gl\";\nimport { DevToolsButtonSlot } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\nfunction ScaleControl(props) {\n  const optionsRef = useRef({\n    maxWidth: 200,\n    unit: \"metric\",\n  });\n  return h(MapControlWrapper, {\n    className: \"map-scale-control\",\n    control: BaseScaleControl,\n    options: optionsRef.current,\n    ...props,\n  });\n}\n\nfunction GeolocationControl(props) {\n  const optionsRef = useRef({\n    showAccuracyCircle: true,\n    showUserLocation: true,\n    trackUserLocation: true,\n    positionOptions: {\n      enableHighAccuracy: true,\n    },\n  });\n  return h(MapControlWrapper, {\n    control: GeolocateControl,\n    options: optionsRef.current,\n    ...props,\n  });\n}\n\nexport function MapBottomControls({ children }) {\n  const { isInitialized } = useMapStatus();\n\n  if (!isInitialized) {\n    return null;\n  }\n\n  return h(\"div.map-controls\", [\n    h(ScaleControl),\n    h(ThreeDControl, { className: \"map-3d-control\" }),\n    h(CompassControl, { className: \"compass-control\" }),\n    h(GlobeControl, { className: \"globe-control\" }),\n    h(GeolocationControl, { className: \"geolocation-control\" }),\n    // If we have global development tools enabled, show the button\n    h(DevToolsButtonSlot, { className: \"map-control\" }),\n    children,\n  ]);\n}\n"],"names":["hyper","styles","useRef","MapControlWrapper","BaseScaleControl","GeolocateControl","useMapStatus","ThreeDControl","CompassControl","GlobeControl","DevToolsButtonSlot"],"mappings":";;;;;;;;;;AAcA,MAAM,IAAIA,WAAAA,QAAM,OAAOC,mBAAM;AAE7B,SAAS,aAAa,OAAO;AAC3B,QAAM,aAAaC,MAAAA,OAAO;AAAA,IACxB,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACD,SAAO,EAAEC,YAAAA,mBAAmB;AAAA,IAC1B,WAAW;AAAA,IACX,SAASC,SAAAA;AAAAA,IACT,SAAS,WAAW;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AACH;AAEA,SAAS,mBAAmB,OAAO;AACjC,QAAM,aAAaF,MAAAA,OAAO;AAAA,IACxB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,MACf,oBAAoB;AAAA,IAAA;AAAA,EACtB,CACD;AACD,SAAO,EAAEC,YAAAA,mBAAmB;AAAA,IAC1B,SAASE,SAAAA;AAAAA,IACT,SAAS,WAAW;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AACH;AAEO,SAAS,kBAAkB,EAAE,YAAY;AAC9C,QAAM,EAAE,cAAA,IAAkBC,yBAAA;AAE1B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,oBAAoB;AAAA,IAC3B,EAAE,YAAY;AAAA,IACd,EAAEC,YAAAA,eAAe,EAAE,WAAW,kBAAkB;AAAA,IAChD,EAAEC,YAAAA,gBAAgB,EAAE,WAAW,mBAAmB;AAAA,IAClD,EAAEC,YAAAA,cAAc,EAAE,WAAW,iBAAiB;AAAA,IAC9C,EAAE,oBAAoB,EAAE,WAAW,uBAAuB;AAAA;AAAA,IAE1D,EAAEC,aAAAA,oBAAoB,EAAE,WAAW,eAAe;AAAA,IAClD;AAAA,EAAA,CACD;AACH;;"}

package/dist/controls.d.ts

@@ -0,0 +1,3 @@
+export declare function MapBottomControls({ children }: {
+    children: any;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;

package/dist/controls.js

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+import { ScaleControl as ScaleControl$1, GeolocateControl } from "mapbox-gl";
+import h$1 from "@macrostrat/hyper";
+import styles from "./main.module.sass.js";
+import { useMapStatus, ThreeDControl, CompassControl, GlobeControl, MapControlWrapper } from "@macrostrat/mapbox-react";
+import { DevToolsButtonSlot } from "@macrostrat/ui-components";
+const h = h$1.styled(styles);
+function ScaleControl(props) {
+  const optionsRef = useRef({
+    maxWidth: 200,
+    unit: "metric"
+  });
+  return h(MapControlWrapper, {
+    className: "map-scale-control",
+    control: ScaleControl$1,
+    options: optionsRef.current,
+    ...props
+  });
+}
+function GeolocationControl(props) {
+  const optionsRef = useRef({
+    showAccuracyCircle: true,
+    showUserLocation: true,
+    trackUserLocation: true,
+    positionOptions: {
+      enableHighAccuracy: true
+    }
+  });
+  return h(MapControlWrapper, {
+    control: GeolocateControl,
+    options: optionsRef.current,
+    ...props
+  });
+}
+function MapBottomControls({ children }) {
+  const { isInitialized } = useMapStatus();
+  if (!isInitialized) {
+    return null;
+  }
+  return h("div.map-controls", [
+    h(ScaleControl),
+    h(ThreeDControl, { className: "map-3d-control" }),
+    h(CompassControl, { className: "compass-control" }),
+    h(GlobeControl, { className: "globe-control" }),
+    h(GeolocationControl, { className: "geolocation-control" }),
+    // If we have global development tools enabled, show the button
+    h(DevToolsButtonSlot, { className: "map-control" }),
+    children
+  ]);
+}
+export {
+  MapBottomControls
+};
+//# sourceMappingURL=controls.js.map

package/dist/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sources":["../src/controls.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport { GeolocateControl } from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport {\n  CompassControl,\n  GlobeControl,\n  ThreeDControl,\n  MapControlWrapper,\n  useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport { ScaleControl as BaseScaleControl } from \"mapbox-gl\";\nimport { DevToolsButtonSlot } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\nfunction ScaleControl(props) {\n  const optionsRef = useRef({\n    maxWidth: 200,\n    unit: \"metric\",\n  });\n  return h(MapControlWrapper, {\n    className: \"map-scale-control\",\n    control: BaseScaleControl,\n    options: optionsRef.current,\n    ...props,\n  });\n}\n\nfunction GeolocationControl(props) {\n  const optionsRef = useRef({\n    showAccuracyCircle: true,\n    showUserLocation: true,\n    trackUserLocation: true,\n    positionOptions: {\n      enableHighAccuracy: true,\n    },\n  });\n  return h(MapControlWrapper, {\n    control: GeolocateControl,\n    options: optionsRef.current,\n    ...props,\n  });\n}\n\nexport function MapBottomControls({ children }) {\n  const { isInitialized } = useMapStatus();\n\n  if (!isInitialized) {\n    return null;\n  }\n\n  return h(\"div.map-controls\", [\n    h(ScaleControl),\n    h(ThreeDControl, { className: \"map-3d-control\" }),\n    h(CompassControl, { className: \"compass-control\" }),\n    h(GlobeControl, { className: \"globe-control\" }),\n    h(GeolocationControl, { className: \"geolocation-control\" }),\n    // If we have global development tools enabled, show the button\n    h(DevToolsButtonSlot, { className: \"map-control\" }),\n    children,\n  ]);\n}\n"],"names":["hyper","BaseScaleControl"],"mappings":";;;;;;AAcA,MAAM,IAAIA,IAAM,OAAO,MAAM;AAE7B,SAAS,aAAa,OAAO;AAC3B,QAAM,aAAa,OAAO;AAAA,IACxB,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACD,SAAO,EAAE,mBAAmB;AAAA,IAC1B,WAAW;AAAA,IACX,SAASC;AAAAA,IACT,SAAS,WAAW;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AACH;AAEA,SAAS,mBAAmB,OAAO;AACjC,QAAM,aAAa,OAAO;AAAA,IACxB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,MACf,oBAAoB;AAAA,IAAA;AAAA,EACtB,CACD;AACD,SAAO,EAAE,mBAAmB;AAAA,IAC1B,SAAS;AAAA,IACT,SAAS,WAAW;AAAA,IACpB,GAAG;AAAA,EAAA,CACJ;AACH;AAEO,SAAS,kBAAkB,EAAE,YAAY;AAC9C,QAAM,EAAE,cAAA,IAAkB,aAAA;AAE1B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,oBAAoB;AAAA,IAC3B,EAAE,YAAY;AAAA,IACd,EAAE,eAAe,EAAE,WAAW,kBAAkB;AAAA,IAChD,EAAE,gBAAgB,EAAE,WAAW,mBAAmB;AAAA,IAClD,EAAE,cAAc,EAAE,WAAW,iBAAiB;AAAA,IAC9C,EAAE,oBAAoB,EAAE,WAAW,uBAAuB;AAAA;AAAA,IAE1D,EAAE,oBAAoB,EAAE,WAAW,eAAe;AAAA,IAClD;AAAA,EAAA,CACD;AACH;"}

package/dist/dev/index.d.ts

@@ -0,0 +1,4 @@
+export * from './map-page';
+export * from './tile-extent';
+export * from './vector-tile-features';
+export * from './xray';

package/dist/dev/main.module.sass.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const key = "_key_1jzmh_7";
+const value = "_value_1jzmh_18";
+const controls = "_controls_1jzmh_31";
+const unit = "_unit_1jzmh_71";
+const page = "_page_1jzmh_77";
+const styles = {
+  "feature-panel": "_feature-panel_1jzmh_2",
+  "key-value": "_key-value_1jzmh_7",
+  key,
+  value,
+  "feature-properties": "_feature-properties_1jzmh_22",
+  controls,
+  "feature-header": "_feature-header_1jzmh_41",
+  "feature-group": "_feature-group_1jzmh_46",
+  "tile-info": "_tile-info_1jzmh_54",
+  "opacity-slider": "_opacity-slider_1jzmh_63",
+  "unit-number": "_unit-number_1jzmh_71",
+  unit,
+  page,
+  "dev-index-page": "_dev-index-page_1jzmh_82"
+};
+exports.controls = controls;
+exports.default = styles;
+exports.key = key;
+exports.page = page;
+exports.unit = unit;
+exports.value = value;
+//# sourceMappingURL=main.module.sass.cjs.map

package/dist/dev/main.module.sass.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/dev/main.module.sass.js

@@ -0,0 +1,30 @@
+const key = "_key_1jzmh_7";
+const value = "_value_1jzmh_18";
+const controls = "_controls_1jzmh_31";
+const unit = "_unit_1jzmh_71";
+const page = "_page_1jzmh_77";
+const styles = {
+  "feature-panel": "_feature-panel_1jzmh_2",
+  "key-value": "_key-value_1jzmh_7",
+  key,
+  value,
+  "feature-properties": "_feature-properties_1jzmh_22",
+  controls,
+  "feature-header": "_feature-header_1jzmh_41",
+  "feature-group": "_feature-group_1jzmh_46",
+  "tile-info": "_tile-info_1jzmh_54",
+  "opacity-slider": "_opacity-slider_1jzmh_63",
+  "unit-number": "_unit-number_1jzmh_71",
+  unit,
+  page,
+  "dev-index-page": "_dev-index-page_1jzmh_82"
+};
+export {
+  controls,
+  styles as default,
+  key,
+  page,
+  unit,
+  value
+};
+//# sourceMappingURL=main.module.sass.js.map

package/dist/dev/main.module.sass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/dev/map-page.cjs

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@blueprintjs/core");
+const h$1 = require("@macrostrat/hyper");
+const uiComponents = require("@macrostrat/ui-components");
+const mapboxgl = require("mapbox-gl");
+const React = require("react");
+const xray = require("./xray.cjs");
+const container = require("../container.cjs");
+const index$1 = require("../context-panel/index.cjs");
+const helpers = require("../helpers.cjs");
+const index = require("../location-panel/index.cjs");
+const mapView = require("../map-view.cjs");
+const main_module = require("./main.module.sass.cjs");
+const tileExtent = require("./tile-extent.cjs");
+const vectorTileFeatures = require("./vector-tile-features.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const h__default = /* @__PURE__ */ _interopDefault(h$1);
+const mapboxgl__default = /* @__PURE__ */ _interopDefault(mapboxgl);
+const h = h__default.default.styled(main_module.default);
+function MapInspectorV2({
+  title = "Map inspector",
+  headerElement = null,
+  transformRequest = null,
+  mapPosition = null,
+  mapboxToken = null,
+  overlayStyle = null,
+  controls = null,
+  children = null,
+  style,
+  bounds = null,
+  focusedSource = null,
+  focusedSourceTitle = null,
+  fitViewport = true,
+  styleType = "macrostrat",
+  ...rest
+}) {
+  const dark = uiComponents.useDarkMode();
+  const isEnabled = dark?.isEnabled;
+  if (mapboxToken != null) {
+    mapboxgl__default.default.accessToken = mapboxToken;
+  }
+  const basicStyle = helpers.useBasicMapStyle({ styleType });
+  style ??= basicStyle;
+  const [isOpen, setOpen] = React.useState(false);
+  const [state, setState] = uiComponents.useStoredState("macrostrat:dev-map-page", {
+    showTileExtent: false,
+    xRay: false
+  });
+  const { showTileExtent, xRay } = state;
+  const [actualStyle, setActualStyle] = React.useState(null);
+  React.useEffect(() => {
+    xray.buildInspectorStyle(style, overlayStyle, {
+      mapboxToken,
+      inDarkMode: isEnabled,
+      xRay
+    }).then(setActualStyle);
+  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);
+  const [inspectPosition, setInspectPosition] = React.useState(null);
+  const [data, setData] = React.useState(null);
+  const onSelectPosition = React.useCallback((position) => {
+    setInspectPosition(position);
+  }, []);
+  let detailElement = null;
+  if (inspectPosition != null) {
+    detailElement = h(
+      index.LocationPanel,
+      {
+        onClose() {
+          setInspectPosition(null);
+        },
+        position: inspectPosition
+      },
+      [
+        h(vectorTileFeatures.TileInfo, {
+          feature: data?.[0] ?? null,
+          showExtent: showTileExtent,
+          setShowExtent() {
+            setState({ ...state, showTileExtent: !showTileExtent });
+          }
+        }),
+        h(vectorTileFeatures.FeaturePanel, { features: data, focusedSource, focusedSourceTitle })
+      ]
+    );
+  }
+  let tile = null;
+  if (showTileExtent && data?.[0] != null) {
+    let f = data[0];
+    tile = { x: f._x, y: f._y, z: f._z };
+  }
+  return h(
+    container.MapAreaContainer,
+    {
+      navbar: h(index$1.FloatingNavbar, {
+        rightElement: h(index$1.MapLoadingButton, {
+          large: true,
+          active: isOpen,
+          onClick: () => setOpen(!isOpen),
+          style: {
+            marginRight: "-5px"
+          }
+        }),
+        headerElement,
+        title
+      }),
+      contextPanel: h(container.PanelCard, [
+        controls,
+        h(core.Switch, {
+          checked: xRay,
+          label: "X-ray mode",
+          onChange() {
+            setState({ ...state, xRay: !xRay });
+          }
+        })
+      ]),
+      detailPanel: detailElement,
+      contextPanelOpen: isOpen,
+      fitViewport
+    },
+    h(
+      mapView.MapView,
+      {
+        style: actualStyle,
+        transformRequest,
+        mapPosition,
+        projection: { name: "globe" },
+        mapboxToken,
+        bounds,
+        ...rest
+      },
+      [
+        h(vectorTileFeatures.FeatureSelectionHandler, {
+          selectedLocation: inspectPosition,
+          setFeatures: setData
+        }),
+        h(helpers.MapMarker, {
+          position: inspectPosition,
+          setPosition: onSelectPosition
+        }),
+        h(tileExtent.TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
+        children
+      ]
+    )
+  );
+}
+function MapInspector(props) {
+  const { children, controls, ...rest } = props;
+  console.warn("MapInspector is deprecated. Use MapInspectorV2 instead");
+  return h(MapInspectorV2, {
+    ...rest,
+    controls: [children, controls]
+  });
+}
+const DevMapPage = MapInspector;
+exports.DevMapPage = DevMapPage;
+exports.MapInspectorV2 = MapInspectorV2;
+exports.h = h;
+//# sourceMappingURL=map-page.cjs.map

package/dist/dev/map-page.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-page.cjs","sources":["../../src/dev/map-page.ts"],"sourcesContent":["// Import other components\nimport { Switch } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode, useStoredState } from \"@macrostrat/ui-components\";\nimport mapboxgl from \"mapbox-gl\";\nimport React from \"react\";\nimport { useCallback, useState, useEffect } from \"react\";\nimport { buildInspectorStyle } from \"./xray\";\nimport { MapAreaContainer, PanelCard } from \"../container\";\nimport { FloatingNavbar, MapLoadingButton } from \"../context-panel\";\nimport { MapMarker, useBasicMapStyle } from \"../helpers\";\nimport { LocationPanel } from \"../location-panel\";\nimport { MapView, MapViewProps } from \"../map-view\";\nimport styles from \"./main.module.sass\";\nimport { TileExtentLayer } from \"./tile-extent\";\nimport {\n  FeaturePanel,\n  FeatureSelectionHandler,\n  TileInfo,\n} from \"./vector-tile-features\";\nimport { MapPosition } from \"@macrostrat/mapbox-utils\";\n\nexport const h = hyper.styled(styles);\n\ninterface MapInspectorProps extends MapViewProps {\n  headerElement?: React.ReactNode;\n  transformRequest?: mapboxgl.RequestTransformFunction;\n  title?: string;\n  style?: mapboxgl.StyleSpecification | string;\n  controls?: React.ReactNode;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  overlayStyle?: mapboxgl.StyleSpecification | string;\n  focusedSource?: string;\n  focusedSourceTitle?: string;\n  projection?: string;\n  mapPosition?: MapPosition;\n  bounds?: [number, number, number, number];\n  fitViewport?: boolean;\n  styleType?: \"standard\" | \"macrostrat\";\n  enableTerrain?: boolean;\n}\n\nexport function MapInspectorV2({\n  title = \"Map inspector\",\n  headerElement = null,\n  transformRequest = null,\n  mapPosition = null,\n  mapboxToken = null,\n  overlayStyle = null,\n  controls = null,\n  children = null,\n  style,\n  bounds = null,\n  focusedSource = null,\n  focusedSourceTitle = null,\n  fitViewport = true,\n  styleType = \"macrostrat\",\n  ...rest\n}: MapInspectorProps) {\n  /* We apply a custom style to the panel container when we are interacting\n    with the search bar, so that we can block map interactions until search\n    bar focus is lost.\n    We also apply a custom style when the infodrawer is open so we can hide\n    the search bar on mobile platforms\n  */\n\n  const dark = useDarkMode();\n  const isEnabled = dark?.isEnabled;\n\n  if (mapboxToken != null) {\n    mapboxgl.accessToken = mapboxToken;\n  }\n\n  const basicStyle = useBasicMapStyle({ styleType });\n  style ??= basicStyle;\n\n  const [isOpen, setOpen] = useState(false);\n\n  const [state, setState] = useStoredState(\"macrostrat:dev-map-page\", {\n    showTileExtent: false,\n    xRay: false,\n  });\n  const { showTileExtent, xRay } = state;\n\n  const [actualStyle, setActualStyle] = useState(null);\n\n  useEffect(() => {\n    buildInspectorStyle(style, overlayStyle, {\n      mapboxToken,\n      inDarkMode: isEnabled,\n      xRay,\n    }).then(setActualStyle);\n  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);\n\n  const [inspectPosition, setInspectPosition] =\n    useState<mapboxgl.LngLat | null>(null);\n\n  const [data, setData] = useState(null);\n\n  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {\n    setInspectPosition(position);\n  }, []);\n\n  let detailElement = null;\n  if (inspectPosition != null) {\n    detailElement = h(\n      LocationPanel,\n      {\n        onClose() {\n          setInspectPosition(null);\n        },\n        position: inspectPosition,\n      },\n      [\n        h(TileInfo, {\n          feature: data?.[0] ?? null,\n          showExtent: showTileExtent,\n          setShowExtent() {\n            setState({ ...state, showTileExtent: !showTileExtent });\n          },\n        }),\n        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),\n      ],\n    );\n  }\n\n  let tile = null;\n  if (showTileExtent && data?.[0] != null) {\n    let f = data[0];\n    tile = { x: f._x, y: f._y, z: f._z };\n  }\n\n  return h(\n    MapAreaContainer,\n    {\n      navbar: h(FloatingNavbar, {\n        rightElement: h(MapLoadingButton, {\n          large: true,\n          active: isOpen,\n          onClick: () => setOpen(!isOpen),\n          style: {\n            marginRight: \"-5px\",\n          },\n        }),\n        headerElement,\n        title,\n      }),\n      contextPanel: h(PanelCard, [\n        controls,\n        h(Switch, {\n          checked: xRay,\n          label: \"X-ray mode\",\n          onChange() {\n            setState({ ...state, xRay: !xRay });\n          },\n        }),\n      ]),\n      detailPanel: detailElement,\n      contextPanelOpen: isOpen,\n      fitViewport,\n    },\n    h(\n      MapView,\n      {\n        style: actualStyle,\n        transformRequest,\n        mapPosition,\n        projection: { name: \"globe\" },\n        mapboxToken,\n        bounds,\n        ...rest,\n      },\n      [\n        h(FeatureSelectionHandler, {\n          selectedLocation: inspectPosition,\n          setFeatures: setData,\n        }),\n        h(MapMarker, {\n          position: inspectPosition,\n          setPosition: onSelectPosition,\n        }),\n        h(TileExtentLayer, { tile, color: isEnabled ? \"white\" : \"black\" }),\n        children,\n      ],\n    ),\n  );\n}\n\nfunction MapInspector(props) {\n  const { children, controls, ...rest } = props;\n  /** Compatibility wrapper for MapInspectorV2 */\n  // React warning about this legacy usage\n  console.warn(\"MapInspector is deprecated. Use MapInspectorV2 instead\");\n\n  return h(MapInspectorV2, {\n    ...rest,\n    controls: [children, controls],\n  });\n}\n\n// Legacy export\nexport const DevMapPage = MapInspector;\n"],"names":["hyper","styles","useDarkMode","mapboxgl","useBasicMapStyle","useState","useStoredState","useEffect","buildInspectorStyle","useCallback","LocationPanel","TileInfo","FeaturePanel","MapAreaContainer","FloatingNavbar","MapLoadingButton","PanelCard","Switch","MapView","FeatureSelectionHandler","MapMarker","TileExtentLayer"],"mappings":"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"}

package/dist/dev/map-page.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { MapViewProps } from '../map-view';
+import { MapPosition } from '@macrostrat/mapbox-utils';
+export declare const h: import('@macrostrat/hyper').Hyper;
+interface MapInspectorProps extends MapViewProps {
+    headerElement?: React.ReactNode;
+    transformRequest?: mapboxgl.RequestTransformFunction;
+    title?: string;
+    style?: mapboxgl.StyleSpecification | string;
+    controls?: React.ReactNode;
+    children?: React.ReactNode;
+    mapboxToken?: string;
+    overlayStyle?: mapboxgl.StyleSpecification | string;
+    focusedSource?: string;
+    focusedSourceTitle?: string;
+    projection?: string;
+    mapPosition?: MapPosition;
+    bounds?: [number, number, number, number];
+    fitViewport?: boolean;
+    styleType?: "standard" | "macrostrat";
+    enableTerrain?: boolean;
+}
+export declare function MapInspectorV2({ title, headerElement, transformRequest, mapPosition, mapboxToken, overlayStyle, controls, children, style, bounds, focusedSource, focusedSourceTitle, fitViewport, styleType, ...rest }: MapInspectorProps): import('react').FunctionComponentElement<any>;
+declare function MapInspector(props: any): import('react').FunctionComponentElement<MapInspectorProps>;
+export declare const DevMapPage: typeof MapInspector;
+export {};

package/dist/dev/map-page.js

@@ -0,0 +1,155 @@
+import { Switch } from "@blueprintjs/core";
+import h$1 from "@macrostrat/hyper";
+import { useDarkMode, useStoredState } from "@macrostrat/ui-components";
+import mapboxgl from "mapbox-gl";
+import { useState, useEffect, useCallback } from "react";
+import { buildInspectorStyle } from "./xray.js";
+import { MapAreaContainer, PanelCard } from "../container.js";
+import { FloatingNavbar, MapLoadingButton } from "../context-panel/index.js";
+import { useBasicMapStyle, MapMarker } from "../helpers.js";
+import { LocationPanel } from "../location-panel/index.js";
+import { MapView } from "../map-view.js";
+import styles from "./main.module.sass.js";
+import { TileExtentLayer } from "./tile-extent.js";
+import { TileInfo, FeaturePanel, FeatureSelectionHandler } from "./vector-tile-features.js";
+const h = h$1.styled(styles);
+function MapInspectorV2({
+  title = "Map inspector",
+  headerElement = null,
+  transformRequest = null,
+  mapPosition = null,
+  mapboxToken = null,
+  overlayStyle = null,
+  controls = null,
+  children = null,
+  style,
+  bounds = null,
+  focusedSource = null,
+  focusedSourceTitle = null,
+  fitViewport = true,
+  styleType = "macrostrat",
+  ...rest
+}) {
+  const dark = useDarkMode();
+  const isEnabled = dark?.isEnabled;
+  if (mapboxToken != null) {
+    mapboxgl.accessToken = mapboxToken;
+  }
+  const basicStyle = useBasicMapStyle({ styleType });
+  style ??= basicStyle;
+  const [isOpen, setOpen] = useState(false);
+  const [state, setState] = useStoredState("macrostrat:dev-map-page", {
+    showTileExtent: false,
+    xRay: false
+  });
+  const { showTileExtent, xRay } = state;
+  const [actualStyle, setActualStyle] = useState(null);
+  useEffect(() => {
+    buildInspectorStyle(style, overlayStyle, {
+      mapboxToken,
+      inDarkMode: isEnabled,
+      xRay
+    }).then(setActualStyle);
+  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);
+  const [inspectPosition, setInspectPosition] = useState(null);
+  const [data, setData] = useState(null);
+  const onSelectPosition = useCallback((position) => {
+    setInspectPosition(position);
+  }, []);
+  let detailElement = null;
+  if (inspectPosition != null) {
+    detailElement = h(
+      LocationPanel,
+      {
+        onClose() {
+          setInspectPosition(null);
+        },
+        position: inspectPosition
+      },
+      [
+        h(TileInfo, {
+          feature: data?.[0] ?? null,
+          showExtent: showTileExtent,
+          setShowExtent() {
+            setState({ ...state, showTileExtent: !showTileExtent });
+          }
+        }),
+        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle })
+      ]
+    );
+  }
+  let tile = null;
+  if (showTileExtent && data?.[0] != null) {
+    let f = data[0];
+    tile = { x: f._x, y: f._y, z: f._z };
+  }
+  return h(
+    MapAreaContainer,
+    {
+      navbar: h(FloatingNavbar, {
+        rightElement: h(MapLoadingButton, {
+          large: true,
+          active: isOpen,
+          onClick: () => setOpen(!isOpen),
+          style: {
+            marginRight: "-5px"
+          }
+        }),
+        headerElement,
+        title
+      }),
+      contextPanel: h(PanelCard, [
+        controls,
+        h(Switch, {
+          checked: xRay,
+          label: "X-ray mode",
+          onChange() {
+            setState({ ...state, xRay: !xRay });
+          }
+        })
+      ]),
+      detailPanel: detailElement,
+      contextPanelOpen: isOpen,
+      fitViewport
+    },
+    h(
+      MapView,
+      {
+        style: actualStyle,
+        transformRequest,
+        mapPosition,
+        projection: { name: "globe" },
+        mapboxToken,
+        bounds,
+        ...rest
+      },
+      [
+        h(FeatureSelectionHandler, {
+          selectedLocation: inspectPosition,
+          setFeatures: setData
+        }),
+        h(MapMarker, {
+          position: inspectPosition,
+          setPosition: onSelectPosition
+        }),
+        h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
+        children
+      ]
+    )
+  );
+}
+function MapInspector(props) {
+  const { children, controls, ...rest } = props;
+  console.warn("MapInspector is deprecated. Use MapInspectorV2 instead");
+  return h(MapInspectorV2, {
+    ...rest,
+    controls: [children, controls]
+  });
+}
+const DevMapPage = MapInspector;
+export {
+  DevMapPage,
+  MapInspectorV2,
+  h
+};
+//# sourceMappingURL=map-page.js.map

package/dist/dev/map-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-page.js","sources":["../../src/dev/map-page.ts"],"sourcesContent":["// Import other components\nimport { Switch } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode, useStoredState } from \"@macrostrat/ui-components\";\nimport mapboxgl from \"mapbox-gl\";\nimport React from \"react\";\nimport { useCallback, useState, useEffect } from \"react\";\nimport { buildInspectorStyle } from \"./xray\";\nimport { MapAreaContainer, PanelCard } from \"../container\";\nimport { FloatingNavbar, MapLoadingButton } from \"../context-panel\";\nimport { MapMarker, useBasicMapStyle } from \"../helpers\";\nimport { LocationPanel } from \"../location-panel\";\nimport { MapView, MapViewProps } from \"../map-view\";\nimport styles from \"./main.module.sass\";\nimport { TileExtentLayer } from \"./tile-extent\";\nimport {\n  FeaturePanel,\n  FeatureSelectionHandler,\n  TileInfo,\n} from \"./vector-tile-features\";\nimport { MapPosition } from \"@macrostrat/mapbox-utils\";\n\nexport const h = hyper.styled(styles);\n\ninterface MapInspectorProps extends MapViewProps {\n  headerElement?: React.ReactNode;\n  transformRequest?: mapboxgl.RequestTransformFunction;\n  title?: string;\n  style?: mapboxgl.StyleSpecification | string;\n  controls?: React.ReactNode;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  overlayStyle?: mapboxgl.StyleSpecification | string;\n  focusedSource?: string;\n  focusedSourceTitle?: string;\n  projection?: string;\n  mapPosition?: MapPosition;\n  bounds?: [number, number, number, number];\n  fitViewport?: boolean;\n  styleType?: \"standard\" | \"macrostrat\";\n  enableTerrain?: boolean;\n}\n\nexport function MapInspectorV2({\n  title = \"Map inspector\",\n  headerElement = null,\n  transformRequest = null,\n  mapPosition = null,\n  mapboxToken = null,\n  overlayStyle = null,\n  controls = null,\n  children = null,\n  style,\n  bounds = null,\n  focusedSource = null,\n  focusedSourceTitle = null,\n  fitViewport = true,\n  styleType = \"macrostrat\",\n  ...rest\n}: MapInspectorProps) {\n  /* We apply a custom style to the panel container when we are interacting\n    with the search bar, so that we can block map interactions until search\n    bar focus is lost.\n    We also apply a custom style when the infodrawer is open so we can hide\n    the search bar on mobile platforms\n  */\n\n  const dark = useDarkMode();\n  const isEnabled = dark?.isEnabled;\n\n  if (mapboxToken != null) {\n    mapboxgl.accessToken = mapboxToken;\n  }\n\n  const basicStyle = useBasicMapStyle({ styleType });\n  style ??= basicStyle;\n\n  const [isOpen, setOpen] = useState(false);\n\n  const [state, setState] = useStoredState(\"macrostrat:dev-map-page\", {\n    showTileExtent: false,\n    xRay: false,\n  });\n  const { showTileExtent, xRay } = state;\n\n  const [actualStyle, setActualStyle] = useState(null);\n\n  useEffect(() => {\n    buildInspectorStyle(style, overlayStyle, {\n      mapboxToken,\n      inDarkMode: isEnabled,\n      xRay,\n    }).then(setActualStyle);\n  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);\n\n  const [inspectPosition, setInspectPosition] =\n    useState<mapboxgl.LngLat | null>(null);\n\n  const [data, setData] = useState(null);\n\n  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {\n    setInspectPosition(position);\n  }, []);\n\n  let detailElement = null;\n  if (inspectPosition != null) {\n    detailElement = h(\n      LocationPanel,\n      {\n        onClose() {\n          setInspectPosition(null);\n        },\n        position: inspectPosition,\n      },\n      [\n        h(TileInfo, {\n          feature: data?.[0] ?? null,\n          showExtent: showTileExtent,\n          setShowExtent() {\n            setState({ ...state, showTileExtent: !showTileExtent });\n          },\n        }),\n        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),\n      ],\n    );\n  }\n\n  let tile = null;\n  if (showTileExtent && data?.[0] != null) {\n    let f = data[0];\n    tile = { x: f._x, y: f._y, z: f._z };\n  }\n\n  return h(\n    MapAreaContainer,\n    {\n      navbar: h(FloatingNavbar, {\n        rightElement: h(MapLoadingButton, {\n          large: true,\n          active: isOpen,\n          onClick: () => setOpen(!isOpen),\n          style: {\n            marginRight: \"-5px\",\n          },\n        }),\n        headerElement,\n        title,\n      }),\n      contextPanel: h(PanelCard, [\n        controls,\n        h(Switch, {\n          checked: xRay,\n          label: \"X-ray mode\",\n          onChange() {\n            setState({ ...state, xRay: !xRay });\n          },\n        }),\n      ]),\n      detailPanel: detailElement,\n      contextPanelOpen: isOpen,\n      fitViewport,\n    },\n    h(\n      MapView,\n      {\n        style: actualStyle,\n        transformRequest,\n        mapPosition,\n        projection: { name: \"globe\" },\n        mapboxToken,\n        bounds,\n        ...rest,\n      },\n      [\n        h(FeatureSelectionHandler, {\n          selectedLocation: inspectPosition,\n          setFeatures: setData,\n        }),\n        h(MapMarker, {\n          position: inspectPosition,\n          setPosition: onSelectPosition,\n        }),\n        h(TileExtentLayer, { tile, color: isEnabled ? \"white\" : \"black\" }),\n        children,\n      ],\n    ),\n  );\n}\n\nfunction MapInspector(props) {\n  const { children, controls, ...rest } = props;\n  /** Compatibility wrapper for MapInspectorV2 */\n  // React warning about this legacy usage\n  console.warn(\"MapInspector is deprecated. Use MapInspectorV2 instead\");\n\n  return h(MapInspectorV2, {\n    ...rest,\n    controls: [children, controls],\n  });\n}\n\n// Legacy export\nexport const DevMapPage = MapInspector;\n"],"names":["hyper"],"mappings":"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"}

package/dist/dev/tile-extent.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const mapboxReact = require("@macrostrat/mapbox-react");
+const tilebelt = require("@mapbox/tilebelt");
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+function TileExtentLayer({
+  tile,
+  color = "red"
+}) {
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      const style = map.getStyle();
+      if (style.layers == null) return;
+      style.layers = style.layers.filter((l) => l.id != "tile-extent");
+      if (tile == null) {
+        return map.setStyle(style);
+      }
+      const { x, y, z } = tile;
+      const extent = tilebelt.tileToGeoJSON([x, y, z]);
+      mapboxUtils.setGeoJSON(map, "tile-extent", extent);
+      if (map.getLayer("tile-extent") != null) {
+        map.removeLayer("tile-extent");
+      }
+      map.addLayer({
+        id: "tile-extent",
+        type: "line",
+        source: "tile-extent",
+        paint: {
+          "line-color": color,
+          "line-width": 2
+        }
+      });
+    },
+    [color, tile]
+  );
+  return null;
+}
+exports.TileExtentLayer = TileExtentLayer;
+//# sourceMappingURL=tile-extent.cjs.map

package/dist/dev/tile-extent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-extent.cjs","sources":["../../src/dev/tile-extent.ts"],"sourcesContent":["import { useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { tileToGeoJSON } from \"@mapbox/tilebelt\";\nimport { setGeoJSON } from \"@macrostrat/mapbox-utils\";\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  useMapStyleOperator(\n    (map) => {\n      const style = map.getStyle();\n      if (style.layers == null) return;\n      style.layers = style.layers.filter((l) => l.id != \"tile-extent\");\n      if (tile == null) {\n        return map.setStyle(style);\n      }\n      const { x, y, z } = tile;\n      const extent = tileToGeoJSON([x, y, z]);\n\n      setGeoJSON(map, \"tile-extent\", extent as any);\n\n      if (map.getLayer(\"tile-extent\") != null) {\n        // If the layer already exists, we can just update it\n        map.removeLayer(\"tile-extent\");\n      }\n\n      map.addLayer({\n        id: \"tile-extent\",\n        type: \"line\",\n        source: \"tile-extent\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 2,\n        },\n      });\n    },\n    [color, tile],\n  );\n  return null;\n}\n"],"names":["useMapStyleOperator","tileToGeoJSON","setGeoJSON"],"mappings":";;;;;AAMO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,QAAQ;AACV,GAGG;AACDA,cAAAA;AAAAA,IACE,CAAC,QAAQ;AACP,YAAM,QAAQ,IAAI,SAAA;AAClB,UAAI,MAAM,UAAU,KAAM;AAC1B,YAAM,SAAS,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,MAAM,aAAa;AAC/D,UAAI,QAAQ,MAAM;AAChB,eAAO,IAAI,SAAS,KAAK;AAAA,MAC3B;AACA,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM;AACpB,YAAM,SAASC,SAAAA,cAAc,CAAC,GAAG,GAAG,CAAC,CAAC;AAEtCC,6BAAW,KAAK,eAAe,MAAa;AAE5C,UAAI,IAAI,SAAS,aAAa,KAAK,MAAM;AAEvC,YAAI,YAAY,aAAa;AAAA,MAC/B;AAEA,UAAI,SAAS;AAAA,QACX,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB,CACD;AAAA,IACH;AAAA,IACA,CAAC,OAAO,IAAI;AAAA,EAAA;AAEd,SAAO;AACT;;"}

package/dist/dev/tile-extent.d.ts

@@ -0,0 +1,10 @@
+type TileIndex = {
+    x: number;
+    y: number;
+    z: number;
+};
+export declare function TileExtentLayer({ tile, color, }: {
+    tile: TileIndex | null;
+    color?: string;
+}): any;
+export {};

package/dist/dev/tile-extent.js

@@ -0,0 +1,39 @@
+import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { tileToGeoJSON } from "@mapbox/tilebelt";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
+function TileExtentLayer({
+  tile,
+  color = "red"
+}) {
+  useMapStyleOperator(
+    (map) => {
+      const style = map.getStyle();
+      if (style.layers == null) return;
+      style.layers = style.layers.filter((l) => l.id != "tile-extent");
+      if (tile == null) {
+        return map.setStyle(style);
+      }
+      const { x, y, z } = tile;
+      const extent = tileToGeoJSON([x, y, z]);
+      setGeoJSON(map, "tile-extent", extent);
+      if (map.getLayer("tile-extent") != null) {
+        map.removeLayer("tile-extent");
+      }
+      map.addLayer({
+        id: "tile-extent",
+        type: "line",
+        source: "tile-extent",
+        paint: {
+          "line-color": color,
+          "line-width": 2
+        }
+      });
+    },
+    [color, tile]
+  );
+  return null;
+}
+export {
+  TileExtentLayer
+};
+//# sourceMappingURL=tile-extent.js.map

package/dist/dev/tile-extent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-extent.js","sources":["../../src/dev/tile-extent.ts"],"sourcesContent":["import { useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { tileToGeoJSON } from \"@mapbox/tilebelt\";\nimport { setGeoJSON } from \"@macrostrat/mapbox-utils\";\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  useMapStyleOperator(\n    (map) => {\n      const style = map.getStyle();\n      if (style.layers == null) return;\n      style.layers = style.layers.filter((l) => l.id != \"tile-extent\");\n      if (tile == null) {\n        return map.setStyle(style);\n      }\n      const { x, y, z } = tile;\n      const extent = tileToGeoJSON([x, y, z]);\n\n      setGeoJSON(map, \"tile-extent\", extent as any);\n\n      if (map.getLayer(\"tile-extent\") != null) {\n        // If the layer already exists, we can just update it\n        map.removeLayer(\"tile-extent\");\n      }\n\n      map.addLayer({\n        id: \"tile-extent\",\n        type: \"line\",\n        source: \"tile-extent\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 2,\n        },\n      });\n    },\n    [color, tile],\n  );\n  return null;\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,QAAQ;AACV,GAGG;AACD;AAAA,IACE,CAAC,QAAQ;AACP,YAAM,QAAQ,IAAI,SAAA;AAClB,UAAI,MAAM,UAAU,KAAM;AAC1B,YAAM,SAAS,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,MAAM,aAAa;AAC/D,UAAI,QAAQ,MAAM;AAChB,eAAO,IAAI,SAAS,KAAK;AAAA,MAC3B;AACA,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM;AACpB,YAAM,SAAS,cAAc,CAAC,GAAG,GAAG,CAAC,CAAC;AAEtC,iBAAW,KAAK,eAAe,MAAa;AAE5C,UAAI,IAAI,SAAS,aAAa,KAAK,MAAM;AAEvC,YAAI,YAAY,aAAa;AAAA,MAC/B;AAEA,UAAI,SAAS;AAAA,QACX,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB,CACD;AAAA,IACH;AAAA,IACA,CAAC,OAAO,IAAI;AAAA,EAAA;AAEd,SAAO;AACT;"}