@macrostrat/map-interface 1.6.0 → 2.0.1

package/dist/cjs/map-interface.4a401c1f.css

@@ -1,584 +0,0 @@
-.map-container_4c0a66 {
-  --map-panel-border-radius: 4px;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.map-container_4c0a66.show-panel-outlines_4c0a66 .map-view-container_4c0a66 {
-  outline: 2px dotted #1e90ff;
-}
-
-.map-container_4c0a66.fit-viewport_4c0a66 {
-  width: 100vw;
-  height: 100vh;
-  max-height: -webkit-fill-available;
-}
-
-.map-container_4c0a66 .compass-control_4c0a66 {
-  display: none;
-}
-
-.map-container_4c0a66.map-is-rotated_4c0a66 .compass-control_4c0a66 {
-  display: block;
-}
-
-.map-container_4c0a66 .map-3d-control_4c0a66 {
-  display: none;
-}
-
-.map-container_4c0a66.map-3d-available_4c0a66 .map-3d-control_4c0a66 {
-  display: block;
-}
-
-.map-container_4c0a66.map-is-rotated_4c0a66.map-3d-available_4c0a66 .map-3d-control_4c0a66, .map-container_4c0a66 .globe-control_4c0a66 {
-  display: none;
-}
-
-.map-container_4c0a66 .globe-control_4c0a66 svg {
-  color: var(--secondary-color);
-}
-
-.map-container_4c0a66.map-is-global_4c0a66 .globe-control_4c0a66 {
-  display: block;
-}
-
-.map-container_4c0a66.detail-panel-open_4c0a66 .zoom-control_4c0a66 {
-  opacity: 0;
-  display: none;
-}
-
-.map-container_4c0a66.detail-panel-fixed_4c0a66 .detail-panel-holder_4c0a66 > * {
-  border-radius: unset;
-}
-
-.detail-panel-holder_4c0a66 {
-  flex-direction: column;
-  min-height: 0;
-  display: flex;
-}
-
-.detail-panel-holder_4c0a66 > * {
-  flex: 1;
-}
-
-.map-control-stack_4c0a66 {
-  pointer-events: none;
-  flex-direction: column;
-  width: 30em;
-  margin-left: -30em;
-  display: flex;
-}
-
-.main-row_4c0a66 {
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  max-height: 100%;
-  display: flex;
-  position: relative;
-}
-
-.map-ui_4c0a66 {
-  height: 100%;
-  max-height: 100%;
-  box-shadow: 0 0 10px 4px var(--card-shadow-color);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
-  position: relative;
-}
-
-.map-view-container_4c0a66.standalone_4c0a66 {
-  width: 100%;
-  height: 100%;
-}
-
-.mapbox-map_4c0a66 {
-  position: absolute;
-  inset: 0;
-}
-
-.mapbox-map_4c0a66.mapboxgl-map {
-  position: absolute;
-}
-
-.mapbox-map_4c0a66 .mapboxgl-canvas, .mapbox-map_4c0a66 .mapboxgl-canvas-container {
-  position: relative;
-  top: 0;
-  left: 0;
-}
-
-.context-panel-holder_4c0a66 > .bp5-card {
-  background-color: var(--panel-background-color);
-  padding: 10px;
-}
-
-.panel-card_4c0a66, .panel-card_4c0a66.bp5-card {
-  padding: var(--panel-padding, 10px);
-  background-color: var(--panel-background-color);
-  border-radius: var(--map-panel-border-radius);
-  overflow: hidden;
-}
-
-.panel-card_4c0a66 > :last-child, .panel-card_4c0a66.bp5-card > :last-child {
-  margin-bottom: 0;
-}
-
-.bp5-dark .panel-card_4c0a66 {
-  background-color: var(--panel-background-color);
-}
-
-.context-stack_4c0a66 > div {
-  flex-shrink: 1;
-}
-
-.context-stack_4c0a66 > .searchbar_4c0a66 {
-  flex: 0;
-}
-
-.context-stack_4c0a66, .detail-stack_4c0a66 {
-  z-index: 10;
-  max-height: 100%;
-}
-
-.panel-container_4c0a66 {
-  flex-direction: column;
-  display: flex;
-}
-
-.panel-container_4c0a66 > div {
-  pointer-events: all;
-}
-
-.panel-title_4c0a66 {
-  font-size: 16px;
-}
-
-.spacer_4c0a66 {
-  pointer-events: none;
-  flex-grow: 1;
-}
-
-.map-view-container_4c0a66 {
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.searchbar-holder_4c0a66 {
-  margin-bottom: .5em;
-}
-
-.right-panel_4c0a66 {
-  width: 24em;
-}
-
-.buttons_4c0a66 {
-  flex-direction: row;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-}
-
-.tab-button_4c0a66 {
-  text-align: right;
-  flex-shrink: 1;
-  min-width: 40px;
-  overflow: hidden;
-}
-
-.tab-button_4c0a66 .bp5-button-text {
-  transition: all .2s .1s;
-}
-
-.menu-card_4c0a66.narrow-card_4c0a66 .panel-header_4c0a66:not(.minimal_4c0a66) .tab-button_4c0a66.bp5-active ~ .tab-button_4c0a66 .bp5-button-text {
-  opacity: 0;
-  width: 0;
-  margin-left: -7px;
-}
-
-.context-panel-leave_4c0a66 .menu-card_4c0a66 .panel-header_4c0a66 .tab-button_4c0a66 .bp5-button-text {
-  opacity: 0;
-  width: 0;
-}
-
-.narrow-card_4c0a66.narrow-enter_4c0a66 .panel-header_4c0a66 .buttons_4c0a66 {
-  margin-right: -500px;
-}
-
-.panel-header_4c0a66.minimal_4c0a66 .tab-button_4c0a66:not(:hover):not(.bp5-active) {
-  width: 30px;
-  min-width: 30px;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.panel-header_4c0a66.minimal_4c0a66 .tab-button_4c0a66:not(:hover) .bp5-button-text {
-  opacity: 0;
-  width: 0;
-  margin-left: -7px;
-}
-
-.menu-group_4c0a66 {
-  margin-top: .2em;
-  margin-bottom: .5em;
-}
-
-.menu-card_4c0a66 .bp5-text ul, .menu-card_4c0a66 .text-panel ul {
-  padding-left: 1em;
-}
-
-.menu-content_4c0a66 {
-  flex-direction: column;
-  margin-bottom: -8px;
-  display: flex;
-}
-
-.menu-content_4c0a66 .bp5-button-group_4c0a66 {
-  margin-bottom: 4px;
-}
-
-.menu-content_4c0a66 hr {
-  width: 100%;
-}
-
-.mapbox-map .mapbox-compass, .mapbox-map .mapbox-3d {
-  display: none;
-}
-
-.mapboxgl-ctrl.mapbox-3d.mapbox-control {
-  width: unset;
-}
-
-.mapboxgl-ctrl.mapbox-3d.mapbox-control button {
-  width: unset;
-  padding-inline: 4px;
-}
-
-.mapboxgl-canvas-container {
-  width: 100%;
-  height: 100%;
-}
-
-.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
-  background-color: var(--translucent-panel-background-color) !important;
-}
-
-.mapboxgl-ctrl.mapboxgl-ctrl-attrib a {
-  color: var(--text-color);
-}
-
-.mapboxgl-marker svg path {
-  fill: var(--panel-background-color) !important;
-}
-
-.mapboxgl-marker svg circle {
-  fill: var(--secondary-color) !important;
-}
-
-.mapbox-control.mapbox-zoom {
-  background: var(--translucent-panel-background-inner);
-}
-
-.mapbox-control.mapbox-zoom svg {
-  fill: var(--text-color) !important;
-}
-
-.mapboxgl-ctrl-logo {
-  transform: scale(.9)translate(-8px, 2px);
-}
-
-.bp5-dark .mapboxgl-ctrl-group {
-  background-color: var(--panel-background-color);
-}
-
-.bp5-dark .mapboxgl-ctrl-logo {
-  filter: invert();
-}
-
-.mapboxgl-ctrl-group button + button {
-  border-top: 1px solid var(--panel-rule-color) !important;
-}
-
-.bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon {
-  filter: invert(40%);
-}
-
-.bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover {
-  filter: invert(50%);
-}
-
-.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
-  filter: invert(40%);
-}
-
-.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover {
-  filter: invert(50%);
-}
-
-.detail-stack_4c0a66 {
-  position: relative;
-}
-
-.detail-panel-container_4c0a66, .map-right-controls_4c0a66 {
-  flex: 1;
-}
-
-.zoom-control_4c0a66 {
-  width: 30px;
-  transition: opacity 1s ease-in-out;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.map-controls_4c0a66 {
-  flex-direction: row;
-  justify-content: right;
-  gap: .5em;
-  margin-bottom: 0;
-  display: flex;
-}
-
-.map-controls_4c0a66 .map-control > .bp5-button {
-  padding: 0;
-  transform: translate(-3.5px, -3.5px);
-  width: 22px !important;
-}
-
-.map-controls_4c0a66 .mapbox-control, .map-controls_4c0a66 .map-control-wrapper, .map-controls_4c0a66 .map-control {
-  background-color: var(--panel-background-color);
-  height: 22px;
-  max-height: 22px;
-  box-shadow: 0 0 0 1px var(--card-shadow-color);
-  border-radius: 4px;
-}
-
-.map-controls_4c0a66 .mapbox-control button, .map-controls_4c0a66 .map-control-wrapper button, .map-controls_4c0a66 .map-control button {
-  background-position: center;
-  width: 22px;
-  max-width: 22px;
-  height: 22px;
-  max-height: 22px;
-  padding: 0;
-}
-
-.map-controls_4c0a66 .map-scale-control_4c0a66 {
-  box-shadow: none;
-  background: none;
-  padding-top: 8px;
-}
-
-.map-controls_4c0a66 .map-scale-control_4c0a66 .mapboxgl-ctrl-scale {
-  background-color: var(--translucent-panel-background-color);
-  border-color: var(--secondary-text-color);
-  color: var(--secondary-text-color);
-}
-
-@media only screen and (width <= 768px) {
-  .map-container_4c0a66.detail-panel-enter_4c0a66 .context-stack_4c0a66 {
-    visibility: hidden;
-    height: 0;
-    transition: height .5s ease-in-out;
-  }
-
-  .detail-stack_4c0a66 {
-    height: fit-content;
-    position: inherit;
-    max-height: 70%;
-  }
-
-  .infodrawer-stack_4c0a66 {
-    max-height: 70%;
-  }
-
-  .infodrawer-stack_4c0a66.exit-active {
-    max-height: 0;
-  }
-
-  .mapbox-control.mapbox-zoom {
-    display: none;
-  }
-
-  .map-controls_4c0a66 {
-    position: absolute;
-    top: -60px;
-    right: 10px;
-  }
-
-  .detail-panel_4c0a66 {
-    border-radius: 0;
-  }
-}
-
-@media screen and (width >= 768px) {
-  .map-view-container_4c0a66:not(.standalone_4c0a66) {
-    position: unset;
-  }
-
-  .map-ui_4c0a66 {
-    flex-direction: row;
-    gap: .5em;
-    min-height: 80px;
-    padding: 1em 1em 2em;
-  }
-
-  .context-stack_4c0a66 {
-    max-width: var(--map-context-stack-max-width, 34em);
-    min-width: 14em;
-    width: var(--map-context-stack-width, 16em);
-    flex-direction: column;
-    margin-right: .5em;
-    padding-bottom: .5em;
-    transition: width .3s;
-    display: flex;
-  }
-
-  .context-stack_4c0a66.adaptive-width_4c0a66 {
-    width: var(--map-context-stack-width, none);
-    max-width: var(--map-context-stack-max-width, none);
-    transition: width .3s;
-  }
-
-  .context-stack_4c0a66 .bp5-navbar h1, .context-stack_4c0a66 .bp5-navbar h2, .context-stack_4c0a66 .bp5-navbar h3 {
-    margin: 0;
-  }
-
-  .context-stack_4c0a66 > .spacer_4c0a66 {
-    flex-grow: 0;
-  }
-
-  .context-panel-holder_4c0a66 {
-    min-height: 0;
-    position: relative;
-  }
-
-  .context-panel-holder_4c0a66 > div {
-    max-height: 100%;
-  }
-
-  .detail-stack_4c0a66 {
-    width: var(--map-detail-stack-width, 30em);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .context-stack_4c0a66, .detail-stack_4c0a66 {
-    pointer-events: none;
-    z-index: 10;
-  }
-
-  .context-stack_4c0a66 > div, .detail-stack_4c0a66 > div {
-    pointer-events: all;
-    margin-bottom: .5em;
-  }
-
-  .context-stack_4c0a66 > div:last-child, .detail-stack_4c0a66 > div:last-child {
-    margin-bottom: 0;
-  }
-
-  .context-stack_4c0a66 > div.spacer_4c0a66, .detail-stack_4c0a66 > div.spacer_4c0a66 {
-    pointer-events: none;
-  }
-
-  .context-stack_4c0a66 .context-stack_4c0a66 .spacer_4c0a66, .detail-stack_4c0a66 .context-stack_4c0a66 .spacer_4c0a66 {
-    min-height: 1em;
-  }
-}
-
-.map-container_4c0a66 .context-panel-holder_4c0a66 {
-  pointer-events: none;
-  flex: 1;
-}
-
-.map-container_4c0a66 .context-panel-holder_4c0a66 > div {
-  pointer-events: all;
-  transition: opacity .8s;
-}
-
-.map-container_4c0a66.context-panel-from_4c0a66 .context-panel-holder_4c0a66 > div {
-  opacity: 0;
-}
-
-.map-container_4c0a66.context-panel-enter_4c0a66 .context-panel-holder_4c0a66 > div {
-  opacity: 1;
-}
-
-.map-container_4c0a66.context-panel-leave_4c0a66 .context-panel-holder_4c0a66 > div, .map-container_4c0a66.detail-panel-floating_4c0a66.detail-panel-from_4c0a66 .detail-panel-holder_4c0a66 {
-  opacity: 0;
-}
-
-.map-container_4c0a66.detail-panel-floating_4c0a66.detail-panel-enter_4c0a66 .detail-panel-holder_4c0a66 {
-  opacity: 1;
-}
-
-.map-container_4c0a66.detail-panel-floating_4c0a66.detail-panel-leave_4c0a66 .detail-panel-holder_4c0a66 {
-  opacity: 0;
-}
-
-.map-container_4c0a66.detail-panel-floating_4c0a66 .detail-panel_4c0a66 {
-  transition: opacity .8s, height .8s, max-height .8s;
-}
-
-.map-container_4c0a66.detail-panel-fixed_4c0a66 .map-ui_4c0a66, .map-container_4c0a66.detail-panel-fixed_4c0a66 .detail-stack_4c0a66 {
-  transition: margin-right .8s;
-}
-
-.map-container_4c0a66.detail-panel-fixed_4c0a66.detail-panel-from_4c0a66 .detail-panel-holder_4c0a66 {
-  margin-right: calc(-1 * var(--map-detail-stack-width, 30em));
-}
-
-.map-container_4c0a66.detail-panel-fixed_4c0a66.detail-panel-enter_4c0a66 .detail-panel-holder_4c0a66 {
-  margin-right: 0;
-}
-
-.map-container_4c0a66.detail-panel-fixed_4c0a66.detail-panel-leave_4c0a66 .detail-panel-holder_4c0a66 {
-  margin-right: calc(-1 * var(--map-detail-stack-width, 30em));
-}
-
-@media only screen and (width <= 768px) {
-  .map-container_4c0a66 .detail-stack_4c0a66 {
-    transition: opacity .8s, height .8s, max-height .8s;
-  }
-
-  .map-container_4c0a66.detail-panel-from_4c0a66 .detail-stack_4c0a66 {
-    height: 0;
-    max-height: 0;
-  }
-
-  .map-container_4c0a66.detail-panel-leave_4c0a66 .detail-stack_4c0a66 {
-    max-height: 0;
-  }
-
-  .map-container_4c0a66.context-panel-from_4c0a66 .context-panel_4c0a66 {
-    height: 0;
-    max-height: 0;
-  }
-
-  .map-container_4c0a66.context-panel-leave_4c0a66 .context-stack_4c0a66 .context-panel-holder_4c0a66 {
-    flex: 0;
-  }
-
-  .map-container_4c0a66.context-panel-leave_4c0a66 .context-stack_4c0a66 .spacer_4c0a66 {
-    flex: 1;
-  }
-}
-
-@media only screen and (width >= 768px) {
-  .map-container_4c0a66.detail-panel-leave_4c0a66 .map-view-container_4c0a66 {
-    margin-right: -14em;
-  }
-
-  .map-container_4c0a66.map-is-global_4c0a66.detail-panel-leave_4c0a66 .map-view-container_4c0a66 {
-    margin-right: -30em;
-  }
-
-  .map-container_4c0a66.map-is-global_4c0a66.context-panel-leave_4c0a66 .map-view-container_4c0a66 {
-    margin-left: -16em;
-  }
-}
-/*# sourceMappingURL=map-interface.4a401c1f.css.map */

package/dist/cjs/map-interface.4a401c1f.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA;;;;;;;;;;AAUI;;;;AAGF;;;;;;AAOA;;;;AAIE;;;;AAGF;;;;AAGA;;;;AAGA;;;;AAME;;;;AAGF;;;;AAIE;;;;;AAME;;;;;;;;;;;;;;;;;;;;;;AAiBJ;;;;;;;;;AAOA;;;;;;;;;;AAYF;;;;;;;;;;AAUE;;;;AAGA;;;;;;;;;;;AAWE;;;;;;;;;;;AAQF;;;;AAGA;;;;AAGE;;;;AAEJ;;;;;AAKI;;;;;;;;;AAKJ;;;;;;;;;AAOE;;;;;;;;;;;;;;AASA;;;;;;;AAKA;;;;;;;;;;;;;;;;;AAYA;;;;;AAGF;;;;AAGE;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;AAKA;;;;;;;;AAKA;;;;;AAEF;;;;;AAIA;;;;AAGE;;;;AAGE;;;;AAGA;;;;AAIA;;;;AAGF;;;;AAGA;;;;;;;;AAME;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAIE;;;;;;;;;;;;;;;;AAcJ;;;;;;;;;;;;;;;;;;;;;;;AAqBA;;;;;;;;;;;;AAaF;EAAA;;;;;;EAME;;;;;;EAGF;;;;EAIE;;;;EAGA;;;;;;;;;;;;;;;;EAyBF;;;;EAGI;;;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;;;;;EAoBJ;;;;;EAOE;;;;EAIA;;;;;;;;;;;EASE;;;;;EAIA;;;;EAIA;;;;EAGE;;;;;AAQF;;;;;AAIA;;;;;AAIE;;;;AAGF;;;;;;;;AASE;;;;AAGA;;;;AAGA;;;;AAGF;;;;AAQA;;;;AAGA;;;;;;;;;EAQF;;;;EAGA;;;;;EAOI;;;;EAGA;;;;;;;;;;;;;;AAaF;EACE;;;;EAGA;;;;EAGA","sources":["packages/map-interface/src/main.module.sass"],"sourcesContent":[".map-container\n  display: flex\n  flex-direction: column\n  position: relative\n  width: 100%\n  height: 100%\n  overflow: hidden\n  --map-panel-border-radius: 4px\n\n  &.show-panel-outlines\n    .map-view-container\n      outline: 2px dotted dodgerblue\n\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\n  &.map-is-rotated\n    .compass-control\n      display: block\n\n  .map-3d-control\n    display: none\n\n  &.map-3d-available .map-3d-control\n    display: block\n\n  &.map-is-rotated.map-3d-available .map-3d-control\n    display: none\n\n  .globe-control\n    display: none\n\n    svg\n      color: var(--secondary-color)\n\n  &.map-is-global .globe-control\n    display: block\n\n  &.detail-panel-open\n    .zoom-control\n      opacity: 0\n      display: none\n\n  &.detail-panel-fixed\n    .detail-panel-holder\n      & > *\n        border-radius: unset\n\n.detail-panel-holder\n  display: flex\n  flex-direction: column\n  min-height: 0\n\n  & > *\n    flex: 1\n\n\n.map-control-stack\n  display: flex\n  flex-direction: column\n  width: 30em\n  margin-left: -30em\n  pointer-events: none\n\n.main-row\n  flex: 1\n  display: flex\n  flex-direction: row\n  position: relative\n  max-height: 100%\n  min-height: 0\n\n.map-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.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n  &.standalone\n    height: 100%\n    width: 100%\n\n.mapbox-map\n  position: absolute\n  top: 0\n  bottom: 0\n  left: 0\n  right: 0\n\n  &:global(.mapboxgl-map)\n    // override the default mapbox position: relative in all cases\n    position: absolute\n\n\n  /** These styles seem to help with weird map zooming behavior */\n  :global(.mapboxgl-canvas), :global(.mapboxgl-canvas-container)\n    position: relative\n    left: 0\n    top: 0\n\n\n.context-panel-holder > :global(.bp5-card)\n  padding: 10px\n  background-color: var(--panel-background-color)\n\n.panel-card, .panel-card:global(.bp5-card)\n  padding: var(--panel-padding, 10px)\n  background-color: var(--panel-background-color)\n  overflow: hidden\n  border-radius: var(--map-panel-border-radius)\n\n  & > :last-child\n    margin-bottom: 0\n\n:global(.bp5-dark) .panel-card\n  background-color: var(--panel-background-color)\n\n.context-stack\n  & > div\n    flex-shrink: 1\n\n  & > .searchbar\n    flex: 0\n\n.context-stack,\n.detail-stack\n  z-index: 10\n  max-height: 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(.bp5-button-text)\n    transition: all 0.2s\n    transition-delay: 0.1s\n\n  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp5-active) ~ & :global(.bp5-button-text)\n    width: 0\n    opacity: 0\n    margin-left: -7px\n\n  .context-panel-leave .menu-card .panel-header & :global(.bp5-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(.bp5-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(.bp5-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 .bp5-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  & .bp5-button-group\n    margin-bottom: 4px\n\n  & hr\n    width: 100%\n\n:global\n  .mapbox-map\n    .mapbox-compass, .mapbox-3d\n      display: none\n\n  .mapboxgl-ctrl.mapbox-3d.mapbox-control\n    width: unset\n\n  .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n    width: unset\n    padding-inline: 4px\n\n  .mapboxgl-canvas-container\n    width: 100%\n    height: 100%\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n    background-color: var(--translucent-panel-background-color) !important\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n    color: var(--text-color)\n\n  .mapboxgl-marker svg path\n    fill: var(--panel-background-color) !important\n\n  .mapboxgl-marker svg circle\n    fill: var(--secondary-color) !important\n\n  .mapbox-control.mapbox-zoom\n    background: var(--translucent-panel-background-inner)\n\n  .mapbox-control.mapbox-zoom svg\n    fill: var(--text-color) !important\n\n  .mapboxgl-ctrl-logo\n    transform: scale(0.9) translate(-8px, 2px)\n\n  .bp5-dark\n    .mapboxgl-ctrl-group\n      background-color: var(--panel-background-color)\n\n    .mapboxgl-ctrl-logo\n      filter: invert(100%)\n\n  .mapboxgl-ctrl-group button + button\n    border-top: 1px solid var(--panel-rule-color) !important\n\n  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n    filter: invert(40%)\n\n  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n    filter: invert(50%)\n\n  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n    filter: invert(40%)\n\n  .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n    filter: invert(50%)\n\n.detail-stack\n  position: relative\n\n.detail-panel-container, .map-right-controls\n  flex: 1\n\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.map-controls\n  display: flex\n  flex-direction: row\n  justify-content: right\n  margin-bottom: 0\n  gap: 0.5em\n\n  :global(.map-control)\n    & > :global(.bp5-button)\n      padding: 0\n      transform: translate(-3.5px, -3.5px)\n      width: 22px !important\n\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls :global(.map-control)\n  max-height: 22px\n  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 :global(.map-control) button\n  max-height: 22px\n  height: 22px\n  width: 22px\n  max-width: 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// .map-container.detail-panel-fixed\n//   right: 30em\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  .map-container.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\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\n  .map-view-container:not(.standalone)\n    position: unset\n\n\n  .map-ui\n    flex-direction: row\n    padding: 1em 1em 2em\n    min-height: 80px\n    gap: 0.5em\n\n  .context-stack\n    max-width: var(--map-context-stack-max-width, 34em)\n    min-width: 14em\n    transition: width 300ms ease\n    padding-bottom: 0.5em\n    width: var(--map-context-stack-width, 16em)\n    margin-right: 0.5em\n    display: flex\n    flex-direction: column\n\n\n    &.adaptive-width\n      width: var(--map-context-stack-width, none)\n      max-width: var(--map-context-stack-max-width, none)\n      transition: width 300ms ease\n\n    :global(.bp5-navbar)\n      //height: unset\n      //padding: 5px\n      h1, h2, h3\n        margin: 0\n\n    & > .spacer\n      flex-grow: 0\n\n  .context-panel-holder\n    min-height: 0\n    position: relative\n\n    & > div\n      max-height: 100%\n\n  .detail-stack\n    width: var(--map-detail-stack-width, 30em)\n    display: flex\n    flex-direction: column\n\n  .context-stack, .detail-stack\n    pointer-events: none\n    z-index: 10\n\n    & > div\n      pointer-events: all\n      margin-bottom: 0.5em\n\n      &:last-child\n        margin-bottom: 0\n\n      &.spacer\n        pointer-events: none\n\n    .context-stack .spacer\n      min-height: 1em\n\n/** CSS Transitions **/\n\n.map-container\n  // Context panel\n  .context-panel-holder\n    pointer-events: none\n    flex: 1\n\n    & > div\n      pointer-events: all\n      transition: opacity 0.8s ease\n  //, height 0.8s ease, max-height 0.8s ease, padding 0.8s ease\n\n  &.context-panel-from .context-panel-holder > div\n    opacity: 0\n\n  &.context-panel-enter .context-panel-holder > div\n    opacity: 1\n\n  &.context-panel-leave .context-panel-holder > div\n    opacity: 0\n\n  // Detail panel (floating)\n  &.detail-panel-floating\n    // We assume that the relevant panel is the first child of the stack.\n    &.detail-panel-from .detail-panel-holder\n      opacity: 0\n\n    &.detail-panel-enter .detail-panel-holder\n      opacity: 1\n\n    &.detail-panel-leave .detail-panel-holder\n      opacity: 0\n\n    .detail-panel\n      transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  // TODO: these styles have not been evaluated for mobile\n  &.detail-panel-fixed\n    .map-ui\n      transition: margin-right 0.8s ease\n\n    .detail-stack\n      transition: margin-right 0.8s ease\n\n    &.detail-panel-from .detail-panel-holder\n      margin-right: calc(-1 * var(--map-detail-stack-width, 30em))\n\n    &.detail-panel-enter .detail-panel-holder\n      margin-right: 0\n\n    &.detail-panel-leave .detail-panel-holder\n      margin-right: calc(-1 * var(--map-detail-stack-width, 30em))\n\n\n// The max-height transition is a bit jerky because of panel padding.\n// We could probably fix this by pulling the panel container itself into\n// the class.\n//max-height: 0\n//padding: 0i\n\n@media only screen and (max-width: 768px)\n  .map-container .detail-stack\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .map-container.detail-panel-from .detail-stack\n    max-height: 0\n    height: 0\n\n  .map-container.detail-panel-leave .detail-stack\n    max-height: 0\n\n  .map-container.context-panel-from .context-panel\n    max-height: 0\n    height: 0\n\n  .map-container.context-panel-leave\n    .context-stack\n      .context-panel-holder\n        flex: 0\n\n      .spacer\n        flex: 1\n\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-container.detail-panel-leave .map-view-container\n    margin-right: -14em\n\n  .map-container.map-is-global.detail-panel-leave .map-view-container\n    margin-right: -30em\n\n  .map-container.map-is-global.context-panel-leave .map-view-container\n    margin-left: -16em\n"],"names":[],"version":3,"file":"map-interface.4a401c1f.css.map"}

package/dist/cjs/map-interface.4c5addca.js

@@ -1,89 +0,0 @@
-var $aGB2m$macrostratmapboxutils = require("@macrostrat/mapbox-utils");
-var $aGB2m$macrostratcolorutils = require("@macrostrat/color-utils");
-
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "buildXRayStyle", () => $8646508ae99a5857$export$eff5fb2e10d05b1d);
-$parcel$export(module.exports, "buildInspectorStyle", () => $8646508ae99a5857$export$e739dc8dfc0db9a6);
-
-
-async function $8646508ae99a5857$export$eff5fb2e10d05b1d(baseStyle, params = null) {
-    const { inDarkMode: inDarkMode = false, color: color = "rgb(74, 242, 161)", mapboxToken: mapboxToken, xRaySources: xRaySources } = params;
-    const style = await (0, $aGB2m$macrostratmapboxutils.getMapboxStyle)(baseStyle, {
-        access_token: mapboxToken
-    });
-    const sources = xRaySources ?? Object.keys(style.sources);
-    let layers = [];
-    for (let layer of style.layers){
-        if ("source" in layer && typeof layer.source === "string" && !sources.includes(layer.source)) {
-            layers.push(layer);
-            continue;
-        }
-        let newLayer = $8646508ae99a5857$var$transformMapboxLayer(layer, color, inDarkMode);
-        if (newLayer != null) layers.push(newLayer);
-    }
-    return {
-        ...style,
-        layers: layers
-    };
-}
-function $8646508ae99a5857$var$transformMapboxLayer(layer, color, inDarkMode) {
-    const c = (0, $aGB2m$macrostratcolorutils.asChromaColor)(color);
-    const xRayColor = (opacity = 1, darken = 0)=>{
-        if (!inDarkMode) return (0, $aGB2m$macrostratcolorutils.toRGBAString)(c.darken(2 - darken).alpha(opacity));
-        return (0, $aGB2m$macrostratcolorutils.toRGBAString)(c.alpha(opacity).darken(darken));
-    };
-    if (layer.type == "background") return null;
-    let newLayer = {
-        ...layer
-    };
-    console.log(xRayColor(0.5));
-    if (layer.type == "fill") newLayer.paint = {
-        "fill-color": xRayColor(0.1),
-        "fill-outline-color": xRayColor(0.5)
-    };
-    else if (layer.type == "line") newLayer.paint = {
-        "line-color": xRayColor(0.5, 0),
-        "line-width": 1.5
-    };
-    else if (layer.type == "symbol") newLayer.paint = {
-        "text-color": xRayColor(1, -0.5),
-        "text-halo-color": "#000"
-    };
-    else if (layer.type == "circle") newLayer.paint = {
-        "circle-color": xRayColor(0.5, 0),
-        "circle-stroke-color": xRayColor(0.5, 1),
-        "circle-radius": 2
-    };
-    return newLayer;
-}
-async function $8646508ae99a5857$export$e739dc8dfc0db9a6(baseStyle, overlayStyle = null, params = {}) {
-    const { mapboxToken: mapboxToken, xRay: xRay = false, xRaySources: _xRaySources, ...rest } = params;
-    let xRaySources = _xRaySources;
-    let style = await (0, $aGB2m$macrostratmapboxutils.getMapboxStyle)(baseStyle, {
-        access_token: mapboxToken
-    });
-    if (overlayStyle != null) {
-        const overlay = await (0, $aGB2m$macrostratmapboxutils.getMapboxStyle)(overlayStyle, {
-            access_token: mapboxToken
-        });
-        style = (0, $aGB2m$macrostratmapboxutils.mergeStyles)(style, overlay);
-        xRaySources ??= Object.keys(overlay.sources);
-    }
-    if (xRay) {
-        // If we haven't specified sources, then we'll use all of them
-        xRaySources ??= Object.keys(style.sources);
-        style = await $8646508ae99a5857$export$eff5fb2e10d05b1d(style, {
-            ...rest,
-            mapboxToken: mapboxToken,
-            xRaySources: xRaySources
-        });
-    }
-    return style;
-}
-
-
-//# sourceMappingURL=map-interface.4c5addca.js.map

package/dist/cjs/map-interface.4c5addca.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;AAWO,eAAe,0CACpB,SAA0B,EAC1B,SAAsB,IAAI;IAE1B,MAAM,cACJ,aAAa,cACb,QAAQ,kCACR,WAAW,eACX,WAAW,EACZ,GAAG;IACJ,MAAM,QAAQ,MAAM,CAAA,GAAA,2CAAa,EAAE,WAAW;QAAE,cAAc;IAAY;IAC1E,MAAM,UAAU,eAAe,OAAO,IAAI,CAAC,MAAM,OAAO;IAExD,IAAI,SAAS,EAAE;IACf,KAAK,IAAI,SAAS,MAAM,MAAM,CAAE;QAC9B,IACE,YAAY,SACZ,OAAO,MAAM,MAAM,KAAK,YACxB,CAAC,QAAQ,QAAQ,CAAC,MAAM,MAAM,GAC9B;YACA,OAAO,IAAI,CAAC;YACZ;QACF;QACA,IAAI,WAAW,2CAAqB,OAAO,OAAO;QAClD,IAAI,YAAY,MACd,OAAO,IAAI,CAAC;IAEhB;IAEA,OAAO;QACL,GAAG,KAAK;gBACR;IACF;AACF;AAEA,SAAS,2CAAqB,KAAK,EAAE,KAAK,EAAE,UAAU;IACpD,MAAM,IAAI,CAAA,GAAA,yCAAY,EAAE;IACxB,MAAM,YAAY,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;QACxC,IAAI,CAAC,YACH,OAAO,CAAA,GAAA,wCAAW,EAAE,EAAE,MAAM,CAAC,IAAI,QAAQ,KAAK,CAAC;QAEjD,OAAO,CAAA,GAAA,wCAAW,EAAE,EAAE,KAAK,CAAC,SAAS,MAAM,CAAC;IAC9C;IAEA,IAAI,MAAM,IAAI,IAAI,cAChB,OAAO;IAGT,IAAI,WAAW;QAAE,GAAG,KAAK;IAAC;IAE1B,QAAQ,GAAG,CAAC,UAAU;IAEtB,IAAI,MAAM,IAAI,IAAI,QAChB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU;QACxB,sBAAsB,UAAU;IAClC;SACK,IAAI,MAAM,IAAI,IAAI,QACvB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU,KAAK;QAC7B,cAAc;IAChB;SACK,IAAI,MAAM,IAAI,IAAI,UACvB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU,GAAG;QAC3B,mBAAmB;IACrB;SACK,IAAI,MAAM,IAAI,IAAI,UACvB,SAAS,KAAK,GAAG;QACf,gBAAgB,UAAU,KAAK;QAC/B,uBAAuB,UAAU,KAAK;QACtC,iBAAiB;IACnB;IAGF,OAAO;AACT;AAMO,eAAe,0CACpB,SAAkC,EAClC,eAA+C,IAAI,EACnD,SAAgC,CAAC,CAAC;IAElC,MAAM,eACJ,WAAW,QACX,OAAO,OACP,aAAa,YAAY,EACzB,GAAG,MACJ,GAAG;IACJ,IAAI,cAAc;IAClB,IAAI,QAAQ,MAAM,CAAA,GAAA,2CAAa,EAAE,WAAW;QAC1C,cAAc;IAChB;IAEA,IAAI,gBAAgB,MAAM;QACxB,MAAM,UAAU,MAAM,CAAA,GAAA,2CAAa,EAAE,cAAc;YACjD,cAAc;QAChB;QACA,QAAQ,CAAA,GAAA,wCAAU,EAAE,OAAO;QAC3B,gBAAgB,OAAO,IAAI,CAAC,QAAQ,OAAO;IAC7C;IAEA,IAAI,MAAM;QACR,8DAA8D;QAC9D,gBAAgB,OAAO,IAAI,CAAC,MAAM,OAAO;QAEzC,QAAQ,MAAM,0CAAe,OAAO;YAAE,GAAG,IAAI;yBAAE;yBAAa;QAAY;IAC1E;IACA,OAAO;AACT","sources":["packages/map-interface/src/dev/xray.ts"],"sourcesContent":["import { getMapboxStyle, mergeStyles } from \"@macrostrat/mapbox-utils\";\nimport { asChromaColor, toRGBAString } from \"@macrostrat/color-utils\";\nimport mapboxgl from \"mapbox-gl\";\n\ninterface XRayOptions {\n  color?: string;\n  inDarkMode?: boolean;\n  mapboxToken?: string;\n  xRaySources?: string[];\n}\n\nexport async function buildXRayStyle(\n  baseStyle: string | object,\n  params: XRayOptions = null,\n) {\n  const {\n    inDarkMode = false,\n    color = \"rgb(74, 242, 161)\",\n    mapboxToken,\n    xRaySources,\n  } = params;\n  const style = await getMapboxStyle(baseStyle, { access_token: mapboxToken });\n  const sources = xRaySources ?? Object.keys(style.sources);\n\n  let layers = [];\n  for (let layer of style.layers) {\n    if (\n      \"source\" in layer &&\n      typeof layer.source === \"string\" &&\n      !sources.includes(layer.source)\n    ) {\n      layers.push(layer);\n      continue;\n    }\n    let newLayer = transformMapboxLayer(layer, color, inDarkMode);\n    if (newLayer != null) {\n      layers.push(newLayer);\n    }\n  }\n\n  return {\n    ...style,\n    layers,\n  };\n}\n\nfunction transformMapboxLayer(layer, color, inDarkMode) {\n  const c = asChromaColor(color);\n  const xRayColor = (opacity = 1, darken = 0) => {\n    if (!inDarkMode) {\n      return toRGBAString(c.darken(2 - darken).alpha(opacity));\n    }\n    return toRGBAString(c.alpha(opacity).darken(darken));\n  };\n\n  if (layer.type == \"background\") {\n    return null;\n  }\n\n  let newLayer = { ...layer };\n\n  console.log(xRayColor(0.5));\n\n  if (layer.type == \"fill\") {\n    newLayer.paint = {\n      \"fill-color\": xRayColor(0.1),\n      \"fill-outline-color\": xRayColor(0.5),\n    };\n  } else if (layer.type == \"line\") {\n    newLayer.paint = {\n      \"line-color\": xRayColor(0.5, 0),\n      \"line-width\": 1.5,\n    };\n  } else if (layer.type == \"symbol\") {\n    newLayer.paint = {\n      \"text-color\": xRayColor(1, -0.5),\n      \"text-halo-color\": \"#000\",\n    };\n  } else if (layer.type == \"circle\") {\n    newLayer.paint = {\n      \"circle-color\": xRayColor(0.5, 0),\n      \"circle-stroke-color\": xRayColor(0.5, 1),\n      \"circle-radius\": 2,\n    };\n  }\n\n  return newLayer;\n}\n\ntype InspectorStyleOptions = XRayOptions & {\n  xRay?: boolean;\n};\n\nexport async function buildInspectorStyle(\n  baseStyle: mapboxgl.Style | string,\n  overlayStyle: mapboxgl.Style | string | null = null,\n  params: InspectorStyleOptions = {},\n) {\n  const {\n    mapboxToken,\n    xRay = false,\n    xRaySources: _xRaySources,\n    ...rest\n  } = params;\n  let xRaySources = _xRaySources;\n  let style = await getMapboxStyle(baseStyle, {\n    access_token: mapboxToken,\n  });\n\n  if (overlayStyle != null) {\n    const overlay = await getMapboxStyle(overlayStyle, {\n      access_token: mapboxToken,\n    });\n    style = mergeStyles(style, overlay);\n    xRaySources ??= Object.keys(overlay.sources);\n  }\n\n  if (xRay) {\n    // If we haven't specified sources, then we'll use all of them\n    xRaySources ??= Object.keys(style.sources);\n\n    style = await buildXRayStyle(style, { ...rest, mapboxToken, xRaySources });\n  }\n  return style;\n}\n"],"names":[],"version":3,"file":"map-interface.4c5addca.js.map"}