@macrostrat/map-interface 0.0.12 → 0.2.0

package/src/main.module.sass

@@ -4,6 +4,7 @@
   position: relative
   width: 100%
   height: 100%
+  overflow: hidden
   &.fit-viewport
     height: 100vh
     width: 100vw
@@ -43,6 +44,7 @@
 .panel-card
   padding: 10px
   background-color: var(--panel-background-color)
+  overflow: hidden
 
   & >:last-child
     margin-bottom: 0
@@ -148,66 +150,60 @@
   & hr
     width: 100%
 
-:global #map
-  position: absolute
-  top: 0
-  bottom: 0
-  left: 0
-  right: 0
+:global
+  .mapbox-map
+    .mapbox-compass, .mapbox-3d
+      display: none
 
-:global #map .mapbox-compass,
-:global #map .mapbox-3d
-  display: none
-
-:global .mapboxgl-ctrl.mapbox-3d.mapbox-control
-  width: unset
+  .mapboxgl-ctrl.mapbox-3d.mapbox-control
+    width: unset
 
-:global .mapboxgl-ctrl.mapbox-3d.mapbox-control button
-  width: unset
-  padding-inline: 4px
+  .mapboxgl-ctrl.mapbox-3d.mapbox-control button
+    width: unset
+    padding-inline: 4px
 
-:global .mapboxgl-canvas-container
-  width: 100%
-  height: 100%
+  .mapboxgl-canvas-container
+    width: 100%
+    height: 100%
 
-:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib
-  background-color: var(--translucent-panel-background-color) !important
+  .mapboxgl-ctrl.mapboxgl-ctrl-attrib
+    background-color: var(--translucent-panel-background-color) !important
 
-:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib a
-  color: var(--text-color)
+  .mapboxgl-ctrl.mapboxgl-ctrl-attrib a
+    color: var(--text-color)
 
-:global .mapboxgl-marker svg path
-  fill: var(--panel-background-color) !important
+  .mapboxgl-marker svg path
+    fill: var(--panel-background-color) !important
 
-:global .mapboxgl-marker svg circle
-  fill: var(--secondary-color) !important
+  .mapboxgl-marker svg circle
+    fill: var(--secondary-color) !important
 
-:global .mapbox-control.mapbox-zoom
-  background: var(--translucent-panel-background-inner)
+  .mapbox-control.mapbox-zoom
+    background: var(--translucent-panel-background-inner)
 
-:global .mapbox-control.mapbox-zoom svg
-  fill: var(--text-color) !important
+  .mapbox-control.mapbox-zoom svg
+    fill: var(--text-color) !important
 
-:global .mapboxgl-ctrl-logo
-  transform: scale(0.9) translate(-8px, 2px)
+  .mapboxgl-ctrl-logo
+    transform: scale(0.9) translate(-8px, 2px)
 
-:global .bp4-dark .mapboxgl-ctrl-logo
-  filter: invert(100%)
+  .bp4-dark .mapboxgl-ctrl-logo
+    filter: invert(100%)
 
-:global .mapboxgl-ctrl-group button + button
-  border-top: 1px solid var(--panel-rule-color) !important
+  .mapboxgl-ctrl-group button + button
+    border-top: 1px solid var(--panel-rule-color) !important
 
-:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
-  filter: invert(40%)
+  .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
+    filter: invert(40%)
 
-:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
-  filter: invert(50%)
+  .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
+    filter: invert(50%)
 
-:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
-  filter: invert(40%)
+  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
+    filter: invert(40%)
 
-:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover
-  filter: invert(50%)
+  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover
+    filter: invert(50%)
 
 .detail-stack
   position: relative
@@ -284,9 +280,8 @@
 
   .infodrawer-stack
     max-height: 70%
-
-  :global(.exit-active)
-    max-height: 0
+    &:global(.exit-active)
+      max-height: 0
 
   :global(.mapbox-control.mapbox-zoom)
     display: none
@@ -311,27 +306,27 @@
       &>*:last-child
         margin-right: 0
 
-    &.searching .context-stack
-      width: 24em
-
   .context-stack
     max-width: 34em
     min-width: 14em
-    width: 16em
     transition: width 300ms ease
     padding-bottom: 0.5em
+    width: var(--map-context-stack-width, 16em)
+    margin-right: 0.5em
+    display: flex
+    flex-direction: column
 
-    &.panel-open
-      width: 34em
-      margin-right: 0.5em
+    &>.spacer
+      flex-grow: 0
 
-  .context-stack.layers,
-  .context-stack.settings
-    width: 18em
-    margin-right: 0.5em
+  .context-panel-holder
+    min-height: 0
+    position: relative
+    &>div
+      max-height: 100%
 
   .main-ui.detail-panel-open .detail-stack
-    width: 30em
+    width: var(--map-detail-stack-width, 30em)
 
   .detail-stack
     width: 30em
@@ -339,24 +334,25 @@
     display: flex
     flex-direction: column
 
-  .context-stack,
-  .detail-stack
+  .context-stack, .detail-stack
     pointer-events: none
     z-index: 100
 
-  .context-stack>div,
-  .detail-stack>div
-    pointer-events: all
-    margin-bottom: 0.5em
+    &>div
+      pointer-events: all
+      margin-bottom: 0.5em
 
-  .context-stack>div:last-child,
-  .detail-stack>div:last-child
-    margin-bottom: 0
+      &:last-child
+        margin-bottom: 0
 
-  .context-stack>div.spacer,
-  .detail-stack>div.spacer
-    pointer-events: none
+      &.spacer
+        pointer-events: none
 
+    .context-stack .spacer
+      min-height: 1em
+
+  /* Make map fill page rather than containing div,
+   by unsetting map position */
   .map-view-container
     position: unset
 
@@ -372,17 +368,26 @@
 .main-ui.detail-panel-leave .detail-panel
   opacity: 0
 
-.main-ui .context-panel
-  transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
+.main-ui .context-panel-holder
+  pointer-events: none
+  flex: 1
+  &>div
+    pointer-events: all
+    transition: opacity 0.8s ease //, height 0.8s ease, max-height 0.8s ease, padding 0.8s ease
 
-.main-ui.context-panel-from .context-panel
+.main-ui.context-panel-from .context-panel-holder>div
   opacity: 0
 
-.main-ui.context-panel-enter .context-panel
+.main-ui.context-panel-enter .context-panel-holder>div
   opacity: 1
 
-.main-ui.context-panel-leave .context-panel
+.main-ui.context-panel-leave .context-panel-holder>div
   opacity: 0
+  // The max-height transition is a bit jerky because of panel padding.
+  // We could probably fix this by pulling the panel container itself into
+  // the class.
+  //max-height: 0
+  //padding: 0
 
 @media only screen and (max-width: 768px)
   .main-ui .detail-stack
@@ -396,16 +401,16 @@
     max-height: 0
     max-height: 0
 
-  .main-ui .context-panel
-    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
-
   .main-ui.context-panel-from .context-panel
     max-height: 0
     height: 0
 
-  .main-ui.context-panel-leave .context-panel
-    max-height: 0
-    max-height: 0
+  .main-ui.context-panel-leave
+    .context-stack
+      .context-panel-holder
+        flex: 0
+      .spacer
+        flex: 1
 
 // Shift UI around to center elements if we're in the global view 
 @media only screen and (min-width: 768px)

package/src/map-view/index.ts

@@ -1,8 +1,8 @@
 import hyper from "@macrostrat/hyper";
 import {
   useMapRef,
-  useMapStatus,
   useMapDispatch,
+  useMapPosition,
 } from "@macrostrat/mapbox-react";
 import {
   mapViewInfo,
@@ -11,7 +11,7 @@ import {
 } from "@macrostrat/mapbox-utils";
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import styles from "./main.module.sass";
 import rootStyles from "../main.module.sass";
 import { enable3DTerrain } from "./terrain";
@@ -21,6 +21,7 @@ import {
   MapPaddingManager,
   MapResizeManager,
 } from "../helpers";
+import "mapbox-gl/dist/mapbox-gl.css";
 
 const h = hyper.styled({ ...styles, ...rootStyles });
 
@@ -36,9 +37,16 @@ export interface MapViewProps extends MapboxCoreOptions {
   //style: mapboxgl.Style | string;
   //transformRequest?: mapboxgl.TransformRequestFunction;
   mapPosition?: MapPosition;
+  onMapLoad?: (map: mapboxgl.Map) => void;
 }
 
-function initializeMap(container, args: MapboxCoreOptions = {}) {
+export interface MapboxOptionsExt extends MapboxCoreOptions {
+  mapPosition?: MapPosition;
+}
+
+function defaultInitializeMap(container, args: MapboxOptionsExt = {}) {
+  const { mapPosition, ...rest } = args;
+
   const map = new mapboxgl.Map({
     container,
     maxZoom: 18,
@@ -47,9 +55,14 @@ function initializeMap(container, args: MapboxCoreOptions = {}) {
     trackResize: true,
     antialias: true,
     optimizeForTerrain: true,
-    ...args,
+    ...rest,
   });
 
+  // set initial map position
+  if (mapPosition != null) {
+    setMapPosition(map, mapPosition);
+  }
+
   //setMapPosition(map, mapPosition);
   return map;
 }
@@ -67,12 +80,16 @@ export function MapView(props: MapViewProps) {
   const {
     enableTerrain = true,
     style,
-    transformRequest,
     mapPosition = defaultMapPosition,
+    initializeMap = defaultInitializeMap,
     children,
     accessToken,
     infoMarkerPosition,
+    transformRequest,
     projection,
+    onMapLoaded = null,
+    onStyleLoaded = null,
+    ...rest
   } = props;
   if (enableTerrain) {
     terrainSourceID ??= "mapbox-3d-dem";
@@ -90,35 +107,40 @@ export function MapView(props: MapViewProps) {
   // Keep track of map position for reloads
 
   useEffect(() => {
-    if (style == null || ref.current == null || dispatch == null) return;
-    if (mapRef?.current != null) return;
-    console.log("Initializing map");
+    if (style == null) return;
+    if (mapRef.current != null) {
+      console.log("Setting style", style);
+      mapRef.current.setStyle(style);
+      return;
+    }
     const map = initializeMap(ref.current, {
       style,
-      transformRequest,
       projection,
+      mapPosition,
+      ...rest,
+    });
+    map.on("style.load", () => {
+      onStyleLoaded?.(map);
+      dispatch({ type: "set-style-loaded", payload: true });
     });
+    onMapLoaded?.(map);
     dispatch({ type: "set-map", payload: map });
-    console.log("Map initialized");
-    return () => {
-      map.remove();
-      dispatch({ type: "set-map", payload: null });
-    };
-  }, [transformRequest, dispatch, style]);
+  }, [style]);
 
   // Map style updating
-  useEffect(() => {
-    if (mapRef?.current == null || style == null) return;
-    mapRef?.current?.setStyle(style);
-  }, [mapRef.current, style]);
-
-  useEffect(() => {
-    const map = mapRef.current;
-    if (map == null || mapPosition == null) return;
-    setMapPosition(map, mapPosition);
-  }, [mapRef.current]);
-
-  const { mapPosition: _computedMapPosition } = useMapStatus();
+  // useEffect(() => {
+  //   if (mapRef?.current == null || style == null) return;
+  //   mapRef?.current?.setStyle(style);
+  // }, [mapRef.current, style]);
+
+  // Set map position if it changes
+  // useEffect(() => {
+  //   const map = mapRef.current;
+  //   if (map == null || mapPosition == null) return;
+  //   setMapPosition(map, mapPosition);
+  // }, [mapPosition]);
+
+  const _computedMapPosition = useMapPosition();
   const { mapUse3D, mapIsRotated } = mapViewInfo(_computedMapPosition);
 
   // Get map projection

package/src/map-view/main.module.sass

@@ -3,6 +3,13 @@
   position: relative
   overflow: hidden
 
+.mapbox-map
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+
 /* Desktop styling is necessarily much more complicated than mobile
  to handle a two-column layout. */
 @media screen and (min-width: 768px)

package/dist/module.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA;;;;;;;AAKE;;;;;AAGA;;;;;;;;;;AAQE;;;;;AAGA;;;;AAEE;;;;AAGN;;;;;;AAOA;EACE;;;;;;;AChCF;;;;AAEE;;;;AAGF;;;;;;;;;AAOE;;;;AAEA;;;;AAGA;;;;AAGF;;;;AAEE;;;;;AAIF;;;;;;;;;;AAQE;;;;AAIE;;;;;AAIJ;;;;;;;;AAQA;EACE;;;;;ACnDF;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;ACbE;;;;AAGF;;;;;;AAIE;;;;;;AAIA;;;;ACTF;;;;;;;;;;AASE;;;;;;AAIE;;;;;;AASF;;;;AAIF;;;;AAGA;;;;;AAIA;;;;;;;;;AAQA;;;;AAGA;;;;;;AAKE;;;;AAGE;;;;;AAIJ;;;;;;AAIE;;;;AAGF;;;;;;;AAMA;;;;;;;AAQE;;;;AAGF;;;;AAGA;;;;;;;;ACtFA;;;;;;;;;;AASA;;;;AAGA;;;;;;;;;AAOE;;;;;;;;AAOE;;;;;AAGA;;;;;AC7BJ;;;;;;;;AAME;;;;;;AAOA;;;;AAGE;;;;AAGF;;;;AAEA;;;;AAEA;;;;AAKE;;;;AAEF;;;;A;;;;;;;;;;A;;;;;AAcA;;;;AAGE;;;;AAEJ;;;;;;AAIE;;;;A;;;;A;;;;A;;;;;A;;;;AAeA;;;;AAGA;;;;;AAGF;;;;;;AAIE;;;;A;;;;AAKA;;;;;;;A;;;;;;;AASF;;;;AAIE;;;;;;AAIA;;;;;AAIA;;;;A;;;;;;;AASA;;;;;;AAIF;;;;;AAGA;;;;AAIE;;;;;;AAIA;;;;A;;;;AAKA;;;;;A;;;;AAQA;;;;AAGA;;;;;AAIE;;;;;AAGF;;;;AAGA;;;;A;;;;AAKA;;;;AAEF;;;;A;;;;AAKE;;;;AAEF;;;;A;;;;AAKE;;;;AAEF;;;;A;;;;A;;;;AAOE;;;;AAEF;;;;;AAGA;;;;;;;;A;;;;A;;;;;;;AAYA;;;;A;;;;;;;;AASA;;;;;;;;;AAQE;;;;AAIA;;;;;;A;;;;;;AAUA;EACA;;;;;;E;;;;;;EASA;;;;EAGA;;;;E;;;;EAGF;;;;;;EAOE;;;;;AAGF;EAGE;;;;;;EAIA;;;;EAGA;;;;EAGE;;;;EAEJ;;;;;;;;E;;;;;EAWI;;;;;EAKF;;;;EAGA;;;;;;;EAME;;;;;E;;;;;EASA;;;;EAGA;;;;EAGI;;;;;A;;;;AAOJ;;;;AAGA;;;;AAGE;;;;AAGJ;;;;AAGE;;;;AAGA;;;;AAGA;;;;AAGA;E;;;;EAIA;;;;;EAGF;;;;;EAKA;;;;E;;;;;E;;;;;;AAWF;EACE;;;;EAEF;;;;E;;;;;AC7WA;;;;;;AAOA;EAIE;;;;;ACXF;;;;;A;;;;;A;;;;;A;;;;A;;;;A;;;;AAgBE;;;;;;;AAKE;;;;;AAGF;;;;;;;;AAMA;;;;A;;;;;;;AAOA;;;;AAGA;;;;AAEE;;;;;AAGF;;;;;;A;;;;;AASE;;;;ACrDJ;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;A;;;;;;A;;;;;AAgBA;;;;AAGI;;;;;AAGF;;;;;AAIA;;;;AAEE;;;;;;;;;AAOA;;;;AAIJ;;;;A;;;;A;;;;A;;;;A;;;;;A;;;;AAcE;;;;;A;;;;AAKF;;;;;AAIA;;;;AAGA;;;;;;;;A;;;;;;;AAaA;;;;AAEF;;;;AAGE;;;;A;;;;A;;;;AAQE;;;;;;;;;;;AASE;;;;;;;;AAOJ;;;;AAGA","sources":["packages/map-interface/src/context-panel/main.module.sass","packages/map-interface/src/location-panel/main.module.sass","packages/ui-components/src/util/main.module.scss","packages/ui-components/src/form-controls/main.module.sass","packages/ui-components/src/modal-panel/main.module.sass","packages/ui-components/src/page-layouts/main.module.sass","packages/map-interface/src/main.module.sass","packages/map-interface/src/map-view/main.module.sass","packages/map-interface/src/dev/main.module.sass","packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":[".searchbar-holder\n  transition: margin 300ms\n  display: flex\n  flex-direction: column\n  margin: 0\n  .navbar-holder\n    display: flex\n    flex-direction: row\n  .searchbar\n    width: 100%\n    background-color: var(--panel-background-color)\n    border-radius: 3px\n    padding: 0 5px\n    display: flex\n    flex-direction: row\n    align-items: center\n    :global(.bp4-input-group)\n      flex-grow: 1\n      cursor: text\n    &>*\n      margin-right: 5px\n      &:last-child\n        margin-right: 0\n\n.status-tongue\n  background-color: var(--panel-background-color)\n  margin: 5px\n  margin-top: -12px\n  padding: 0\n  padding-top: 12px\n\n@media screen and (max-width: 768px)\n  .status-tongue\n    max-width: 100vw\n    margin: 0\n    border-radius: 0\n    margin-top: -3px\n",".copy-link-button:global(.bp4-minimal.bp4-button)\n  color: var(--text-subtle-color)\n  svg\n    fill: var(--text-subtle-color)\n\n.location-panel-header\n  padding: 5px\n  display: flex\n  flex-direction: row\n  align-items: center\n  gap: 1em\n  border-bottom: 1px solid var(--panel-rule-color)\n  .spacer\n    flex-grow: 1\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp4-button)\n    font-size: 12px !important\n\n.infodrawer-header-item\n  font-size: 12px\n  :global(.secondary)\n    font-size: 0.9em\n    color: var(--text-subtle-color)\n\n.infodrawer\n  pointer-events: all\n  max-height: 100%\n  max-width: 100%\n  height: fit-content\n  display: flex\n  flex-direction: column\n  overflow: hidden\n  &:global(.bp4-card)\n    padding: 0\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n.infodrawer-body\n  flex-shrink: 1\n  min-height: 0\n  transition: min-height 0.5s ease\n  overflow-y: scroll\n  position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n  .infodrawer\n    border-radius: var(--panel-border-radius, 0px)\n",".json-view-container.root-hidden {\n  padding-left: 0.8em;\n}\n\n.flex-row {\n  display: flex;\n  flex-direction: row;\n}\n\n.flex-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.flex-spacer {\n  flex: 1;\n}\n",".mui-slider-disabled\n  .bp4-slider-handle\n    display: none\n\n.nullable-slider\n  display: flex\n  flex-direction: row\n  align-items: center\n  .bp4-slider\n    flex-grow: 1\n    margin-right: 1em\n    margin-left: 1em\n  .controls\n    margin-top: -22px\n","\n$c1: rgb(16, 22, 26)\n\n.panel-header\n  background-color: var(--panel-secondary-background-color, #eee)\n  display: flex\n  flex-direction: row\n  justify-content: space-between\n  align-items: center\n  padding: 0.2em 0.6em\n  border-bottom: 1px solid var(--panel-rule-color, #ddd)\n\n  h1\n    margin-bottom: 0.2em\n    margin-top: 0.2em\n    font-size: var(--panel-header-font-size, 1.2em)\n    &.overflow-hidden\n      white-space: nowrap\n      overflow: hidden\n      text-overflow: ellipsis\n\n  // \\:global(.bp4-button)\n  //   align-self: center\n\n:global(.bp4-dark)\n  .panel, .content-panel\n    $c2: rgb(255, 255, 255)\n    box-shadow: 0 0 0 1px rgba($c2, 0.2), 0 0 0 rgba($c2, 0), 0 1px 1px rgba($c2, 0.4)\n\n.expander\n  flex-grow: 1\n\n.panel-column\n  flex-grow: 1\n  position: relative\n\n.panel,.content-panel\n  overflow: hidden\n  box-shadow: 0 0 0 1px rgba($c1, 0.2), 0 0 0 rgba($c1, 0), 0 1px 1px rgba($c1, 0.4)\n  border-radius: 6px\n  background-color: var(--panel-background-color, #fff)\n  display: flex\n  flex-direction: column\n\n.content-panel\n  padding: 0.5em\n\n.panel\n  flex-shrink: 1\n  height: 100%\n  max-height: 100vh\n\n  &.minimal\n    border-radius: 0\n    //box-shadow: none\n    .panel-content\n      padding: 0\n      border-radius: 0\n\n.panel-content\n  overflow-y: scroll\n  padding: 1em\n  flex: 1\n  &>:last-child\n    margin-bottom: 1em\n\n.panel-outer\n  display: flex\n  flex-direction: column\n  position: relative\n  max-height: 100%\n\n.panel-container-inner\n  position: absolute\n  top: 2em\n  bottom: 2em\n  left: 1em\n  right: 1em\n  display: flex\n  flex-direction: column\n  .expander\n    flex: 1\n\n.extra-space\n  width: 1em\n\n.panel-container\n  position: sticky\n  height: 100vh\n  top: 0\n  display: flex\n  flex-direction: column\n",".user-interface\n  position: absolute\n  width: 100%\n  height: 100%\n  top: 0\n  display: flex\n  flex-direction: column\n  overflow: hidden\n\n.spacer\n  width: 1em\n\n.three-column\n  display: flex\n  flex: 1\n  flex-direction: row\n  position: relative\n  height: 100%\n  overflow: hidden\n  &>div\n    min-width: 50px\n    height: 100%\n    //max-width: 50%\n    position: relative\n    overflow-y: scroll\n    flex-shrink: 1\n    &.main-column\n      flex-grow: 1\n      max-width: 100%\n    &.context-column.expanded\n      flex-grow: 2\n      max-width: 100%",".map-page\n  display: flex\n  flex-direction: column\n  position: relative\n  width: 100%\n  height: 100%\n  &.fit-viewport\n    height: 100vh\n    width: 100vw\n    /* mobile viewport bug fix */\n    max-height: -webkit-fill-available\n\n  // Compass display\n  .compass-control\n    display: none\n  &.map-is-rotated\n    .compass-control\n      display: block\n\n  .map-3d-control\n    display: none\n  &.map-3d-available .map-3d-control\n    display: block\n  &.map-is-rotated.map-3d-available .map-3d-control\n    display: none\n\n  .globe-control\n    display: none\n    svg\n      color: var(--secondary-color)\n  &.map-is-global .globe-control\n    display: block\n\n.main-ui\n  flex: 1\n  position: relative\n  display: flex\n  flex-direction: column\n  max-height: 100%\n  height: 100%\n  box-shadow: 0 0 10px 4px var(--card-shadow-color)\n\n.panel-card\n  padding: 10px\n  background-color: var(--panel-background-color)\n\n  & >:last-child\n    margin-bottom: 0\n\n:global(.bp4-dark) .panel-card\n  background-color: var(--panel-background-color)\n\n.context-stack\n  display: flex\n  flex-direction: column\n  max-height: 100%\n\n  &>div\n    flex-shrink: 1\n\n  &>.searchbar\n    flex: 0\n\n.context-stack,\n.detail-stack\n  z-index: 100\n\n.panel-container\n  display: flex\n  flex-direction: column\n\n  &>div\n    pointer-events: all\n\n.panel-title\n  font-size: 16px\n\n.spacer\n  flex-grow: 1\n  pointer-events: none\n\n.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n.searchbar-holder\n  margin-bottom: 0.5em\n\n.right-panel\n  width: 24em\n\n.buttons\n  display: flex\n  flex-direction: row\n  flex: 1\n  min-width: 0\n\n.tab-button\n  flex-shrink: 1\n  min-width: 40px\n  overflow: hidden\n  text-align: right\n\n  & :global(.bp4-button-text)\n    transition: all 0.2s\n    transition-delay: 0.1s\n\n  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp4-active) ~ & :global(.bp4-button-text)\n    width: 0\n    opacity: 0\n    margin-left: -7px\n\n  .context-panel-leave .menu-card .panel-header & :global(.bp4-button-text)\n    opacity: 0\n    width: 0\n\n.narrow-card.narrow-enter .panel-header .buttons\n  margin-right: -500px\n\n.panel-header.minimal .tab-button:not(:hover):not(:global(.bp4-active))\n  padding-left: 0\n  padding-right: 0\n  min-width: 30px\n  width: 30px\n\n.panel-header.minimal .tab-button:not(:hover) :global(.bp4-button-text)\n  width: 0\n  opacity: 0\n  margin-left: -7px\n\n.menu-group\n  margin-bottom: 0.5em\n  margin-top: 0.2em\n\n.menu-card :global .bp4-text ul,\n.menu-card :global .text-panel ul\n  padding-left: 1em\n\n.menu-content\n  display: flex\n  flex-direction: column\n  margin-bottom: -8px\n\n  & .bp4-button-group\n    margin-bottom: 4px\n\n  & hr\n    width: 100%\n\n:global #map\n  position: absolute\n  top: 0\n  bottom: 0\n  left: 0\n  right: 0\n\n:global #map .mapbox-compass,\n:global #map .mapbox-3d\n  display: none\n\n:global .mapboxgl-ctrl.mapbox-3d.mapbox-control\n  width: unset\n\n:global .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n  width: unset\n  padding-inline: 4px\n\n:global .mapboxgl-canvas-container\n  width: 100%\n  height: 100%\n\n:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n  background-color: var(--translucent-panel-background-color) !important\n\n:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n  color: var(--text-color)\n\n:global .mapboxgl-marker svg path\n  fill: var(--panel-background-color) !important\n\n:global .mapboxgl-marker svg circle\n  fill: var(--secondary-color) !important\n\n:global .mapbox-control.mapbox-zoom\n  background: var(--translucent-panel-background-inner)\n\n:global .mapbox-control.mapbox-zoom svg\n  fill: var(--text-color) !important\n\n:global .mapboxgl-ctrl-logo\n  transform: scale(0.9) translate(-8px, 2px)\n\n:global .bp4-dark .mapboxgl-ctrl-logo\n  filter: invert(100%)\n\n:global .mapboxgl-ctrl-group button + button\n  border-top: 1px solid var(--panel-rule-color) !important\n\n:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n  filter: invert(40%)\n\n:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n  filter: invert(50%)\n\n:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n  filter: invert(40%)\n\n:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n  filter: invert(50%)\n\n.detail-stack\n  position: relative\n\n.main-ui.detail-panel-open .zoom-control\n  opacity: 0\n  display: none\n\n.zoom-control\n  transition: opacity 1s ease-in-out\n  width: 30px\n  position: absolute\n  top: 0\n  right: 0\n\n.main-ui.searching .map-view-container\n  pointer-events: none\n\n.map-controls\n  display: flex\n  flex-direction: row\n  justify-content: right\n  margin-bottom: 0\n\n  &>*\n    margin-left: 0.5em\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls .map-control\n  min-width: 22px\n  min-height: 22px\n  border-radius: 4px\n  background-color: var(--panel-background-color)\n  box-shadow: 0 0 0 1px var(--card-shadow-color)\n\n.map-controls :global(.mapbox-control) button,\n.map-controls :global(.map-control-wrapper) button,\n.map-controls .map-control button\n  width: 22px\n  height: 22px\n  background-position: center center\n  padding: 0\n  background-color: var(--panel-background-color)\n  color: var(--text-color)\n\n.map-controls :global(.mapbox-control) button:hover,\n.map-controls :global(.map-control-wrapper) button:hover,\n.map-controls .map-control button:hover\n  background-color: var(--panel-background-color) !important\n\n.map-controls .map-scale-control\n  background: none\n  box-shadow: none\n  padding-top: 8px\n\n  :global(.mapboxgl-ctrl-scale)\n    background-color: var(--translucent-panel-background-color)\n    border-color: var(--secondary-text-color)\n    color: var(--secondary-text-color)\n\n/* For mobile phones, we want to make the most of screen space,\n which in some cases means adding complications to the basic page. */\n@media only screen and (max-width: 768px)\n  .main-ui.detail-panel-enter .context-stack\n    height: 0\n    visibility: hidden\n    transition: height 0.5s ease-in-out\n\n  .detail-stack\n    height: fit-content\n    position: inherit\n    max-height: 70%\n\n  .infodrawer-stack\n    max-height: 70%\n\n  :global(.exit-active)\n    max-height: 0\n\n  :global(.mapbox-control.mapbox-zoom)\n    display: none\n\n  .map-controls\n    position: absolute\n    top: -60px\n    right: 10px\n\n  .detail-panel\n    border-radius: 0px\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n  .main-ui\n    flex-direction: row\n    padding: 1em 1em 2em\n    min-height: 80px\n    &>*\n      margin-right: 0.5em\n      &>*:last-child\n        margin-right: 0\n\n    &.searching .context-stack\n      width: 24em\n\n  .context-stack\n    max-width: 34em\n    min-width: 14em\n    width: 16em\n    transition: width 300ms ease\n    padding-bottom: 0.5em\n\n    &.panel-open\n      width: 34em\n      margin-right: 0.5em\n\n  .context-stack.layers,\n  .context-stack.settings\n    width: 18em\n    margin-right: 0.5em\n\n  .main-ui.detail-panel-open .detail-stack\n    width: 30em\n\n  .detail-stack\n    width: 30em\n    pointer-events: none\n    display: flex\n    flex-direction: column\n\n  .context-stack,\n  .detail-stack\n    pointer-events: none\n    z-index: 100\n\n  .context-stack>div,\n  .detail-stack>div\n    pointer-events: all\n    margin-bottom: 0.5em\n\n  .context-stack>div:last-child,\n  .detail-stack>div:last-child\n    margin-bottom: 0\n\n  .context-stack>div.spacer,\n  .detail-stack>div.spacer\n    pointer-events: none\n\n  .map-view-container\n    position: unset\n\n.main-ui .detail-panel\n  transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.detail-panel-from .detail-panel\n  opacity: 0\n\n.main-ui.detail-panel-enter .detail-panel\n  opacity: 1\n\n.main-ui.detail-panel-leave .detail-panel\n  opacity: 0\n\n.main-ui .context-panel\n  transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.context-panel-from .context-panel\n  opacity: 0\n\n.main-ui.context-panel-enter .context-panel\n  opacity: 1\n\n.main-ui.context-panel-leave .context-panel\n  opacity: 0\n\n@media only screen and (max-width: 768px)\n  .main-ui .detail-stack\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .main-ui.detail-panel-from .detail-stack\n    max-height: 0\n    height: 0\n\n  .main-ui.detail-panel-leave .detail-stack\n    max-height: 0\n    max-height: 0\n\n  .main-ui .context-panel\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .main-ui.context-panel-from .context-panel\n    max-height: 0\n    height: 0\n\n  .main-ui.context-panel-leave .context-panel\n    max-height: 0\n    max-height: 0\n\n// Shift UI around to center elements if we're in the global view \n@media only screen and (min-width: 768px)\n  .map-page .main-ui.detail-panel-leave .map-view-container\n    margin-right: -14em\n\n  .map-page.map-is-global .main-ui.detail-panel-leave .map-view-container\n    margin-right: -30em\n\n  .map-page.map-is-global .main-ui.context-panel-leave .map-view-container\n    margin-left: -16em\n",".map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n  /* Make map fill page rather than containing div,\n   by unsetting map position */\n  // We should move this to another file.\n  .map-view-container\n    position: unset\n",".feature-panel\n  position: relative\n  overflow-x: hidden\n\n.key-value\n  display: inline-block\n  margin-right: 1em\n  .key\n    font-weight: bold\n    font-size: 0.9em\n    &:after\n      content: ': '\n  .value\n    font-size: 0.9em\n\n.feature-properties\n  position: relative\n  &:before\n    content: \"–\"\n    position: absolute\n    top: 4px\n    left: 0\n\n.feature-header h3\n  margin-bottom: 0\n  margin-top: 0.5em\n\n.feature-group\n  border-bottom: 1px solid var(--panel-rule-inner)\n  padding: 0 1em\n  margin-left: -1em\n  margin-right: -1em\n  margin-bottom: 0.5em\n  &:last-child\n    border-bottom: none\n\n.tile-info\n  display: flex\n  flex-direction: row\n  align-items: baseline\n  padding: 0 1em\n  h3\n    margin-right: 0.5em\n\n.opacity-slider\n  margin: 0 1em 0.5em\n  :global\n    .bp4-slider-handle .bp4-slider-label\n      background-color: var(--secondary-color)\n      color: var(--text-color)\n\n.unit-number\n  .unit\n    font-size: 0.9em\n    margin-left: 0.2em\n    font-weight: bold\n\n.page\n  margin: 2em auto\n  max-width: 50em\n\n.dev-index-page\n  overflow-y: scroll\n","\n.panel-subhead\n  padding: 0.2em var(--box-horizontal-padding)\n  border-top: 1px solid var(--accent-border-color)\n  border-bottom: 1px solid var(--accent-border-color)\n  background-color: var(--accent-color)\n  display: flex\n  flex-direction: row\n  align-items: center\n  z-index: 1\n  gap: var(--box-horizontal-padding)\n  top: 0px\n  position: sticky\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0.2em 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\n\n// :global(.bp4-dark) .panel-subhead\n//   margin 0 1px\n\n.expansion-panel\n  padding: 0\n  flex-wrap: wrap\n  margin-top: -1px\n  // &.collapsed\n  //   .expansion-panel-header\n  //     border-bottom-width: 0;\n\n.sub-expansion-panel\n  margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n  overflow: hidden\n  &:first-child\n    .expansion-panel-header\n      border-top-width: 0\n  .panel-subhead\n    border-top: none\n    border-bottom: none\n\n  .expansion-panel-header\n    background-color: var(--accent-secondary-color)\n    cursor: pointer\n    &:hover\n      background-color: var(--accent-secondary-hover-color)\n    h2, h3, h4\n      font-weight: 500\n      border-bottom: 1px solid var(--tertiary-border-color)\n      border-top: 1px solid var(--tertiary-border-color)\n      margin-top: -1px\n      padding: 5px 1em 5px\n      align-items: center\n\n.expansion-summary-title-help\n  margin-left: 5px\n  :global(.bp4-icon)\n    margin-left: 5px\n\n.expansion-panel-header\n  cursor: pointer\n  &:hover\n    background-color: var(--accent-hover-color)\n  :global(.bp4-icon)\n    transform: translate(0,3px)\n\n.expansion-children\n  padding: 5px 1em 10px\n  .expansion-panel\n    margin-left: -1em\n    margin-right: -1em\n    &:first-child\n      margin-top: -5px\n\n.expansion-panel-subtext\n  font-size: 85%\n  font-weight: 400\n\n:global\n  .expansion-panel-root\n    padding-left: 15px !important\n\n  .expansion-panel-detail\n    display: block !important\n    padding: 0 !important\n\n  .expansion-panel-detail-sub\n    display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n  display: flex\n  flex-direction: row\n  align-items: center\n  justify-content: space-between\n  margin: 3px 0\n\n.expandable-details-header\n  display: inline-flex\n  flex-direction: row\n  align-items: baseline\n  flex-grow: 1\n\n.expandable-details-children\n  position: relative\n\n.expandable-details-toggle\n  :global(.bp4-button)\n    font-size: 10px\n\n.expandable-details\n  &.macrostrat-unit\n    .title:after\n      content: none\n  .title\n    margin-right: 1em\n    &:after\n      content: \":\"\n\n.expansion-body\n  display: inline-block\n  //flex-direction row\n  align-items: baseline\n  background-color: var(--tertiary-background)\n  padding: 2px 6px\n  border-radius: 4px\n  width: 100%\n  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n  margin-bottom: 6px\n\n.expansion-panel-detail-header\n  font-size: 90%\n  font-style: italic\n  margin-right: 1em\n  display: inline\n  color: var(--secondary-color)\n  &:after\n    content: \":\"\n\n.expansion-panel-detail-body\n  display: inline\n"],"names":[],"version":3,"file":"module.css.map"}