@macrostrat/map-interface 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Map interface for Macrostrat",
   "type": "module",
   "source": "src/index.ts",

package/src/dev/index.ts

@@ -1,179 +1,4 @@
-// Import other components
-import { Switch } from "@blueprintjs/core";
-import hyper from "@macrostrat/hyper";
-import { Spacer, useDarkMode, useStoredState } from "@macrostrat/ui-components";
-import mapboxgl from "mapbox-gl";
-import { useCallback, useState, useEffect } from "react";
-import { buildInspectorStyle, buildXRayStyle } from "./xray";
-import { MapAreaContainer, PanelCard } from "../container";
-import { FloatingNavbar, MapLoadingButton } from "../context-panel";
-import { MapMarker } from "../helpers";
-import { LocationPanel } from "../location-panel";
-import { MapView } from "../map-view";
-import styles from "./main.module.sass";
-import { TileExtentLayer } from "./tile-extent";
-import {
-  FeaturePanel,
-  FeatureSelectionHandler,
-  TileInfo,
-} from "./vector-tile-features";
-import { MapPosition } from "@macrostrat/mapbox-utils";
-
-export enum MacrostratVectorTileset {
-  Carto = "carto",
-  CartoSlim = "carto-slim",
-  IGCPOrogens = "igcp-orogens",
-}
-
-export enum MacrostratRasterTileset {
-  Carto = "carto",
-  Emphasized = "emphasized",
-}
-
-export const h = hyper.styled(styles);
-
-export function DevMapPage({
-  title = "Map inspector",
-  headerElement = null,
-  transformRequest = null,
-  mapPosition = null,
-  mapboxToken = null,
-  overlayStyle = null,
-  children,
-  style,
-  focusedSource = null,
-  focusedSourceTitle = null,
-  projection = null,
-}: {
-  headerElement?: React.ReactElement;
-  transformRequest?: mapboxgl.TransformRequestFunction;
-  title?: string;
-  style: mapboxgl.Style | string;
-  children?: React.ReactNode;
-  mapboxToken?: string;
-  overlayStyle?: mapboxgl.Style | string;
-  focusedSource?: string;
-  focusedSourceTitle?: string;
-  projection?: string;
-  mapPosition?: MapPosition;
-}) {
-  /* We apply a custom style to the panel container when we are interacting
-    with the search bar, so that we can block map interactions until search
-    bar focus is lost.
-    We also apply a custom style when the infodrawer is open so we can hide
-    the search bar on mobile platforms
-  */
-
-  const dark = useDarkMode();
-  const isEnabled = dark?.isEnabled;
-
-  if (mapboxToken != null) {
-    mapboxgl.accessToken = mapboxToken;
-  }
-
-  style ??= isEnabled
-    ? "mapbox://styles/mapbox/dark-v10"
-    : "mapbox://styles/mapbox/light-v10";
-
-  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(style);
-
-  useEffect(() => {
-    buildInspectorStyle(style, overlayStyle, {
-      mapboxToken,
-      inDarkMode: isEnabled,
-      xRay,
-    }).then(setActualStyle);
-  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);
-
-  const [inspectPosition, setInspectPosition] =
-    useState<mapboxgl.LngLat | null>(null);
-
-  const [data, setData] = useState(null);
-
-  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
-    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, [
-        headerElement ?? h("h2", title),
-        h(Spacer),
-        h(MapLoadingButton, {
-          active: isOpen,
-          onClick: () => setOpen(!isOpen),
-        }),
-      ]),
-      contextPanel: h(PanelCard, [
-        h(Switch, {
-          checked: xRay,
-          label: "X-ray mode",
-          onChange() {
-            setState({ ...state, xRay: !xRay });
-          },
-        }),
-        children,
-      ]),
-      detailPanel: detailElement,
-      contextPanelOpen: isOpen,
-    },
-    h(
-      MapView,
-      {
-        style: actualStyle,
-        transformRequest,
-        mapPosition,
-        projection: "globe",
-      },
-      [
-        h(FeatureSelectionHandler, {
-          selectedLocation: inspectPosition,
-          setFeatures: setData,
-        }),
-        h(MapMarker, {
-          position: inspectPosition,
-          setPosition: onSelectPosition,
-        }),
-        h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
-      ]
-    )
-  );
-}
+export * from "./map-page";
+export * from "./tile-extent";
+export * from "./vector-tile-features";
+export * from "./xray";

package/src/dev/map-page.ts

@@ -0,0 +1,181 @@
+// Import other components
+import { Switch } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import { Spacer, useDarkMode, useStoredState } from "@macrostrat/ui-components";
+import mapboxgl from "mapbox-gl";
+import { useCallback, useState, useEffect } from "react";
+import { buildInspectorStyle, buildXRayStyle } from "./xray";
+import { MapAreaContainer, PanelCard } from "../container";
+import { FloatingNavbar, MapLoadingButton } from "../context-panel";
+import { MapMarker } from "../helpers";
+import { LocationPanel } from "../location-panel";
+import { MapView } from "../map-view";
+import styles from "./main.module.sass";
+import { TileExtentLayer } from "./tile-extent";
+import {
+  FeaturePanel,
+  FeatureSelectionHandler,
+  TileInfo,
+} from "./vector-tile-features";
+import { MapPosition } from "@macrostrat/mapbox-utils";
+
+export enum MacrostratVectorTileset {
+  Carto = "carto",
+  CartoSlim = "carto-slim",
+  IGCPOrogens = "igcp-orogens",
+}
+
+export enum MacrostratRasterTileset {
+  Carto = "carto",
+  Emphasized = "emphasized",
+}
+
+export const h = hyper.styled(styles);
+
+export function DevMapPage({
+  title = "Map inspector",
+  headerElement = null,
+  transformRequest = null,
+  mapPosition = null,
+  mapboxToken = null,
+  overlayStyle = null,
+  children,
+  style,
+  focusedSource = null,
+  focusedSourceTitle = null,
+  projection = null,
+}: {
+  headerElement?: React.ReactElement;
+  transformRequest?: mapboxgl.TransformRequestFunction;
+  title?: string;
+  style: mapboxgl.Style | string;
+  children?: React.ReactNode;
+  mapboxToken?: string;
+  overlayStyle?: mapboxgl.Style | string;
+  focusedSource?: string;
+  focusedSourceTitle?: string;
+  projection?: string;
+  mapPosition?: MapPosition;
+}) {
+  /* We apply a custom style to the panel container when we are interacting
+    with the search bar, so that we can block map interactions until search
+    bar focus is lost.
+    We also apply a custom style when the infodrawer is open so we can hide
+    the search bar on mobile platforms
+  */
+
+  const dark = useDarkMode();
+  const isEnabled = dark?.isEnabled;
+
+  if (mapboxToken != null) {
+    mapboxgl.accessToken = mapboxToken;
+  }
+
+  style ??= isEnabled
+    ? "mapbox://styles/mapbox/dark-v10"
+    : "mapbox://styles/mapbox/light-v10";
+
+  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(style);
+
+  useEffect(() => {
+    buildInspectorStyle(style, overlayStyle, {
+      mapboxToken,
+      inDarkMode: isEnabled,
+      xRay,
+    }).then(setActualStyle);
+  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);
+
+  const [inspectPosition, setInspectPosition] =
+    useState<mapboxgl.LngLat | null>(null);
+
+  const [data, setData] = useState(null);
+
+  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
+    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 };
+  }
+
+  console.log("Style", actualStyle);
+
+  return h(
+    MapAreaContainer,
+    {
+      navbar: h(FloatingNavbar, [
+        headerElement ?? h("h2", title),
+        h(Spacer),
+        h(MapLoadingButton, {
+          active: isOpen,
+          onClick: () => setOpen(!isOpen),
+        }),
+      ]),
+      contextPanel: h(PanelCard, [
+        h(Switch, {
+          checked: xRay,
+          label: "X-ray mode",
+          onChange() {
+            setState({ ...state, xRay: !xRay });
+          },
+        }),
+        children,
+      ]),
+      detailPanel: detailElement,
+      contextPanelOpen: isOpen,
+    },
+    h(
+      MapView,
+      {
+        style: actualStyle,
+        transformRequest,
+        mapPosition,
+        projection: "globe",
+      },
+      [
+        h(FeatureSelectionHandler, {
+          selectedLocation: inspectPosition,
+          setFeatures: setData,
+        }),
+        h(MapMarker, {
+          position: inspectPosition,
+          setPosition: onSelectPosition,
+        }),
+        h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
+      ]
+    )
+  );
+}

package/src/index.ts

@@ -3,3 +3,8 @@ export * from "./location-panel";
 export * from "./dev";
 export * from "./container";
 export * from "./map-view";
+export * from "./controls";
+export * from "./helpers";
+export * from "./utils";
+export * from "./location-info";
+export * from "./expansion-panel";