@macrostrat/map-interface 0.2.2 → 1.0.0

package/src/main.module.sass

@@ -1,10 +1,13 @@
-.map-page
+.map-container
   display: flex
   flex-direction: column
   position: relative
   width: 100%
   height: 100%
   overflow: hidden
+  &.show-panel-outlines
+    .map-view-container
+      outline: 2px dotted dodgerblue
   &.fit-viewport
     height: 100vh
     width: 100vw
@@ -32,7 +35,39 @@
   &.map-is-global .globe-control
     display: block
 
-.main-ui
+  &.detail-panel-open
+    .zoom-control
+      opacity: 0
+      display: none
+
+  &.detail-panel-fixed
+    .detail-panel-holder
+      &>*
+        border-radius: unset
+
+.detail-panel-holder
+  display: flex
+  flex-direction: column
+  min-height: 0
+  &>*
+    flex: 1
+
+.map-control-stack
+  display: flex
+  flex-direction: column
+  width: 30em
+  margin-left: -30em
+  pointer-events: none
+
+.main-row
+  flex: 1
+  display: flex
+  flex-direction: row
+  position: relative
+  max-height: 100%
+  min-height: 0
+
+.map-ui
   flex: 1
   position: relative
   display: flex
@@ -41,6 +76,23 @@
   height: 100%
   box-shadow: 0 0 10px 4px var(--card-shadow-color)
 
+.map-view-container
+  flex-grow: 1
+  position: relative
+  overflow: hidden
+
+.mapbox-map
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  &:global(.mapboxgl-map)
+    // override the default mapbox position: relative in all cases
+    position: absolute
+
+
+
 .panel-card
   padding: 10px
   background-color: var(--panel-background-color)
@@ -49,14 +101,10 @@
   & >:last-child
     margin-bottom: 0
 
-:global(.bp4-dark) .panel-card
+:global(.bp5-dark) .panel-card
   background-color: var(--panel-background-color)
 
 .context-stack
-  display: flex
-  flex-direction: column
-  max-height: 100%
-
   &>div
     flex-shrink: 1
 
@@ -65,7 +113,8 @@
 
 .context-stack,
 .detail-stack
-  z-index: 100
+  z-index: 10
+  max-height: 100%
 
 .panel-container
   display: flex
@@ -104,29 +153,29 @@
   overflow: hidden
   text-align: right
 
-  & :global(.bp4-button-text)
+  & :global(.bp5-button-text)
     transition: all 0.2s
     transition-delay: 0.1s
 
-  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp4-active) ~ & :global(.bp4-button-text)
+  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp5-active) ~ & :global(.bp5-button-text)
     width: 0
     opacity: 0
     margin-left: -7px
 
-  .context-panel-leave .menu-card .panel-header & :global(.bp4-button-text)
+  .context-panel-leave .menu-card .panel-header & :global(.bp5-button-text)
     opacity: 0
     width: 0
 
 .narrow-card.narrow-enter .panel-header .buttons
   margin-right: -500px
 
-.panel-header.minimal .tab-button:not(:hover):not(:global(.bp4-active))
+.panel-header.minimal .tab-button:not(:hover):not(:global(.bp5-active))
   padding-left: 0
   padding-right: 0
   min-width: 30px
   width: 30px
 
-.panel-header.minimal .tab-button:not(:hover) :global(.bp4-button-text)
+.panel-header.minimal .tab-button:not(:hover) :global(.bp5-button-text)
   width: 0
   opacity: 0
   margin-left: -7px
@@ -135,7 +184,7 @@
   margin-bottom: 0.5em
   margin-top: 0.2em
 
-.menu-card :global .bp4-text ul,
+.menu-card :global .bp5-text ul,
 .menu-card :global .text-panel ul
   padding-left: 1em
 
@@ -144,7 +193,7 @@
   flex-direction: column
   margin-bottom: -8px
 
-  & .bp4-button-group
+  & .bp5-button-group
     margin-bottom: 4px
 
   & hr
@@ -187,16 +236,16 @@
   .mapboxgl-ctrl-logo
     transform: scale(0.9) translate(-8px, 2px)
 
-  .bp4-dark .mapboxgl-ctrl-logo
+  .bp5-dark .mapboxgl-ctrl-logo
     filter: invert(100%)
 
   .mapboxgl-ctrl-group button + button
     border-top: 1px solid var(--panel-rule-color) !important
 
-  .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
+  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
     filter: invert(40%)
 
-  .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
+  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
     filter: invert(50%)
 
   .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
@@ -208,9 +257,11 @@
 .detail-stack
   position: relative
 
-.main-ui.detail-panel-open .zoom-control
-  opacity: 0
-  display: none
+.detail-panel-container, .map-right-controls
+  flex: 1
+  
+
+
 
 .zoom-control
   transition: opacity 1s ease-in-out
@@ -219,41 +270,45 @@
   top: 0
   right: 0
 
-.main-ui.searching .map-view-container
-  pointer-events: none
-
 .map-controls
   display: flex
   flex-direction: row
   justify-content: right
   margin-bottom: 0
+  gap: 0.5em
+
+  :global(.map-control)
+    &>:global(.bp5-button)
+      padding: 0
+      transform: translate(-3.5px, -3.5px)
+      width: 22px !important
 
-  &>*
-    margin-left: 0.5em
 
 .map-controls :global(.mapbox-control),
 .map-controls :global(.map-control-wrapper),
-.map-controls .map-control
-  min-width: 22px
-  min-height: 22px
+.map-controls :global(.map-control)
+  max-height: 22px
+  height: 22px
   border-radius: 4px
   background-color: var(--panel-background-color)
   box-shadow: 0 0 0 1px var(--card-shadow-color)
 
 .map-controls :global(.mapbox-control) button,
 .map-controls :global(.map-control-wrapper) button,
-.map-controls .map-control button
-  width: 22px
+.map-controls :global(.map-control) button
+  max-height: 22px
   height: 22px
+  width: 22px
+  max-width: 22px
   background-position: center center
   padding: 0
-  background-color: var(--panel-background-color)
-  color: var(--text-color)
+  //background-color: var(--panel-background-color)
+  //color: var(--text-color)
 
-.map-controls :global(.mapbox-control) button:hover,
-.map-controls :global(.map-control-wrapper) button:hover,
-.map-controls .map-control button:hover
-  background-color: var(--panel-background-color) !important
+//.map-controls :global(.mapbox-control) button:hover,
+//.map-controls :global(.map-control-wrapper) button:hover,
+//.map-controls .map-control button:hover
+//  background-color: var(--panel-background-color) !important
 
 .map-controls .map-scale-control
   background: none
@@ -265,10 +320,13 @@
     border-color: var(--secondary-text-color)
     color: var(--secondary-text-color)
 
+// .map-container.detail-panel-fixed
+//   right: 30em
+
 /* For mobile phones, we want to make the most of screen space,
  which in some cases means adding complications to the basic page. */
 @media only screen and (max-width: 768px)
-  .main-ui.detail-panel-enter .context-stack
+  .map-container.detail-panel-enter .context-stack
     height: 0
     visibility: hidden
     transition: height 0.5s ease-in-out
@@ -294,20 +352,25 @@
   .detail-panel
     border-radius: 0px
 
+  
 /* Desktop styling is necessarily much more complicated than mobile
  to handle a two-column layout. */
 @media screen and (min-width: 768px)
-  .main-ui
+  /* Make map fill page rather than containing div,
+   by unsetting map position */
+  // We should move this to another file.
+  .map-view-container
+    position: unset
+
+
+  .map-ui
     flex-direction: row
     padding: 1em 1em 2em
     min-height: 80px
-    &>*
-      margin-right: 0.5em
-      &>*:last-child
-        margin-right: 0
+    gap: 0.5em
 
   .context-stack
-    max-width: 34em
+    max-width: var(--map-context-stack-max-width, 34em)
     min-width: 14em
     transition: width 300ms ease
     padding-bottom: 0.5em
@@ -316,6 +379,17 @@
     display: flex
     flex-direction: column
 
+    &.adaptive-width
+      width: var(--map-context-stack-width, none)
+      max-width: var(--map-context-stack-max-width, none)
+      transition: width 300ms ease
+
+    :global(.bp5-navbar)
+      //height: unset
+      //padding: 5px
+      h1, h2, h3
+        margin: 0
+
     &>.spacer
       flex-grow: 0
 
@@ -325,18 +399,14 @@
     &>div
       max-height: 100%
 
-  .main-ui.detail-panel-open .detail-stack
-    width: var(--map-detail-stack-width, 30em)
-
   .detail-stack
-    width: 30em
-    pointer-events: none
+    width: var(--map-detail-stack-width, 30em)
     display: flex
     flex-direction: column
 
   .context-stack, .detail-stack
     pointer-events: none
-    z-index: 100
+    z-index: 10
 
     &>div
       pointer-events: all
@@ -356,56 +426,73 @@
   .map-view-container
     position: unset
 
-.main-ui .detail-panel
-  transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
-
-.main-ui.detail-panel-from .detail-panel
-  opacity: 0
-
-.main-ui.detail-panel-enter .detail-panel
-  opacity: 1
+/** CSS Transitions **/
 
-.main-ui.detail-panel-leave .detail-panel
-  opacity: 0
+.map-container
+  // Context panel
+  .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-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
+  &.context-panel-from .context-panel-holder>div
+    opacity: 0
+  &.context-panel-enter .context-panel-holder>div
+    opacity: 1
+  &.context-panel-leave .context-panel-holder>div
+    opacity: 0
 
-.main-ui.context-panel-from .context-panel-holder>div
-  opacity: 0
+  // Detail panel (floating)
+  &.detail-panel-floating
+    // We assume that the relevant panel is the first child of the stack.
+    &.detail-panel-from .detail-panel-holder
+      opacity: 0
+    &.detail-panel-enter .detail-panel-holder
+      opacity: 1
+    &.detail-panel-leave .detail-panel-holder
+      opacity: 0
+    .detail-panel
+      transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
+
+  // TODO: these styles have not been evaluated for mobile
+  &.detail-panel-fixed
+    .map-ui
+      transition: margin-right 0.8s ease
+    .detail-stack
+      transition: margin-right 0.8s ease
+
+    &.detail-panel-from .detail-panel-holder
+      margin-right: calc(-1 * var(--map-detail-stack-width, 30em)) 
+    &.detail-panel-enter .detail-panel-holder
+      margin-right: 0
+    &.detail-panel-leave .detail-panel-holder
+      margin-right: calc(-1 * var(--map-detail-stack-width, 30em)) 
 
-.main-ui.context-panel-enter .context-panel-holder>div
-  opacity: 1
 
-.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
+  //padding: 0i
 
 @media only screen and (max-width: 768px)
-  .main-ui .detail-stack
+  .map-container .detail-stack
     transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
 
-  .main-ui.detail-panel-from .detail-stack
+  .map-container.detail-panel-from .detail-stack
     max-height: 0
     height: 0
 
-  .main-ui.detail-panel-leave .detail-stack
-    max-height: 0
+  .map-container.detail-panel-leave .detail-stack
     max-height: 0
 
-  .main-ui.context-panel-from .context-panel
+  .map-container.context-panel-from .context-panel
     max-height: 0
     height: 0
 
-  .main-ui.context-panel-leave
+  .map-container.context-panel-leave
     .context-stack
       .context-panel-holder
         flex: 0
@@ -414,11 +501,11 @@
 
 // Shift UI around to center elements if we're in the global view 
 @media only screen and (min-width: 768px)
-  .map-page .main-ui.detail-panel-leave .map-view-container
+  .map-container.detail-panel-leave .map-view-container
     margin-right: -14em
 
-  .map-page.map-is-global .main-ui.detail-panel-leave .map-view-container
+  .map-container.map-is-global.detail-panel-leave .map-view-container
     margin-right: -30em
 
-  .map-page.map-is-global .main-ui.context-panel-leave .map-view-container
+  .map-container.map-is-global.context-panel-leave .map-view-container
     margin-left: -16em

package/src/map-view/index.ts

@@ -12,8 +12,7 @@ import {
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
 import { useEffect, useRef, useCallback } from "react";
-import styles from "./main.module.sass";
-import rootStyles from "../main.module.sass";
+import styles from "../main.module.sass";
 import { enable3DTerrain } from "./terrain";
 import {
   MapLoadingReporter,
@@ -24,7 +23,7 @@ import {
 import "mapbox-gl/dist/mapbox-gl.css";
 import { getMapPadding } from "../utils";
 
-const h = hyper.styled({ ...styles, ...rootStyles });
+const h = hyper.styled(styles);
 
 type MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, "container">;
 
@@ -44,6 +43,7 @@ export interface MapViewProps extends MapboxCoreOptions {
   ) => mapboxgl.Map;
   onMapLoaded?: (map: mapboxgl.Map) => void;
   onStyleLoaded?: (map: mapboxgl.Map) => void;
+  onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;
 }
 
 export interface MapboxOptionsExt extends MapboxCoreOptions {
@@ -52,6 +52,7 @@ export interface MapboxOptionsExt extends MapboxCoreOptions {
 
 function defaultInitializeMap(container, args: MapboxOptionsExt = {}) {
   const { mapPosition, ...rest } = args;
+  console.log("Initializing map (default)", args);
 
   const map = new mapboxgl.Map({
     container,
@@ -97,6 +98,7 @@ export function MapView(props: MapViewProps) {
     projection,
     onMapLoaded = null,
     onStyleLoaded = null,
+    onMapMoved = null,
     ...rest
   } = props;
   if (enableTerrain) {
@@ -173,7 +175,7 @@ export function MapView(props: MapViewProps) {
     h(MapLoadingReporter, {
       ignoredSources: ["elevationMarker", "crossSectionEndpoints"],
     }),
-    h(MapMovedReporter),
+    h(MapMovedReporter, { onMapMoved }),
     h(MapResizeManager, { containerRef: ref }),
     h(MapPaddingManager, { containerRef: ref, parentRef, infoMarkerPosition }),
     h(MapTerrainManager, { mapUse3D, terrainSourceID }),

package/src/map-view/terrain.ts

@@ -5,19 +5,21 @@ export function enable3DTerrain(
   shouldEnable: boolean,
   sourceID: string | null = null
 ) {
-  let demSourceID = sourceID ?? getTerrainSourceID(map) ?? "mapbox-dem";
-
-  console.log("Enabling 3D terrain with source", demSourceID);
-
   if (!map.style?._loaded) {
     map.once("style.load", () => {
-      enable3DTerrain(map, shouldEnable, demSourceID);
+      enable3DTerrain(map, shouldEnable, sourceID);
     });
     return;
   }
 
+  const currentTerrainSource = getTerrainSourceID(map);
+  let demSourceID = sourceID ?? currentTerrainSource ?? "mapbox-dem";
+
+  console.log("Enabling 3D terrain with source", demSourceID);
+
   // Enable or disable terrain depending on our current desires...
   const currentTerrain = map.getTerrain();
+
   if (!shouldEnable) {
     if (currentTerrain != null) map.setTerrain(null);
     return;
@@ -48,6 +50,7 @@ export function enable3DTerrain(
   }
 
   map.setTerrain({ source: demSourceID, exaggeration: 1 });
+  console.log(map.getTerrain());
 }
 
 function getTerrainSourceID(map) {