@macrostrat/map-interface 0.0.1

package/src/main.module.sass

@@ -0,0 +1,419 @@
+.map-page
+  display: flex
+  flex-direction: column
+  position: relative
+  width: 100%
+  height: 100%
+  &.fit-viewport
+    height: 100vh
+    width: 100vw
+    /* mobile viewport bug fix */
+    max-height: -webkit-fill-available
+
+  // Compass display
+  .compass-control
+    display: none
+  &.map-is-rotated
+    .compass-control
+      display: block
+
+  .map-3d-control
+    display: none
+  &.map-3d-available .map-3d-control
+    display: block
+  &.map-is-rotated.map-3d-available .map-3d-control
+    display: none
+
+  .globe-control
+    display: none
+    svg
+      color: var(--secondary-color)
+  &.map-is-global .globe-control
+    display: block
+
+.main-ui
+  flex: 1
+  position: relative
+  display: flex
+  flex-direction: column
+  max-height: 100%
+  height: 100%
+  box-shadow: 0 0 10px 4px var(--card-shadow-color)
+
+.panel-card
+  padding: 10px
+  background-color: var(--panel-background-color)
+
+  & >:last-child
+    margin-bottom: 0
+
+:global(.bp4-dark) .panel-card
+  background-color: var(--panel-background-color)
+
+.context-stack
+  display: flex
+  flex-direction: column
+  max-height: 100%
+
+  &>div
+    flex-shrink: 1
+
+  &>.searchbar
+    flex: 0
+
+.context-stack,
+.detail-stack
+  z-index: 100
+
+.panel-container
+  display: flex
+  flex-direction: column
+
+  &>div
+    pointer-events: all
+
+.panel-title
+  font-size: 16px
+
+.spacer
+  flex-grow: 1
+  pointer-events: none
+
+.map-view-container
+  flex-grow: 1
+  position: relative
+  overflow: hidden
+
+.searchbar-holder
+  margin-bottom: 0.5em
+
+.right-panel
+  width: 24em
+
+.buttons
+  display: flex
+  flex-direction: row
+  flex: 1
+  min-width: 0
+
+.tab-button
+  flex-shrink: 1
+  min-width: 40px
+  overflow: hidden
+  text-align: right
+
+  & :global(.bp4-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)
+    width: 0
+    opacity: 0
+    margin-left: -7px
+
+  .context-panel-leave .menu-card .panel-header & :global(.bp4-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))
+  padding-left: 0
+  padding-right: 0
+  min-width: 30px
+  width: 30px
+
+.panel-header.minimal .tab-button:not(:hover) :global(.bp4-button-text)
+  width: 0
+  opacity: 0
+  margin-left: -7px
+
+.menu-group
+  margin-bottom: 0.5em
+  margin-top: 0.2em
+
+.menu-card :global .bp4-text ul,
+.menu-card :global .text-panel ul
+  padding-left: 1em
+
+.menu-content
+  display: flex
+  flex-direction: column
+  margin-bottom: -8px
+
+  & .bp4-button-group
+    margin-bottom: 4px
+
+  & hr
+    width: 100%
+
+:global #map
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+
+:global #map .mapbox-compass,
+:global #map .mapbox-3d
+  display: none
+
+:global .mapboxgl-ctrl.mapbox-3d.mapbox-control
+  width: unset
+
+:global .mapboxgl-ctrl.mapbox-3d.mapbox-control button
+  width: unset
+  padding-inline: 4px
+
+:global .mapboxgl-canvas-container
+  width: 100%
+  height: 100%
+
+:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib
+  background-color: var(--translucent-panel-background-color) !important
+
+:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib a
+  color: var(--text-color)
+
+:global .mapboxgl-marker svg path
+  fill: var(--panel-background-color) !important
+
+:global .mapboxgl-marker svg circle
+  fill: var(--secondary-color) !important
+
+:global .mapbox-control.mapbox-zoom
+  background: var(--translucent-panel-background-inner)
+
+:global .mapbox-control.mapbox-zoom svg
+  fill: var(--text-color) !important
+
+:global .mapboxgl-ctrl-logo
+  transform: scale(0.9) translate(-8px, 2px)
+
+:global .bp4-dark .mapboxgl-ctrl-logo
+  filter: invert(100%)
+
+:global .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%)
+
+:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
+  filter: invert(50%)
+
+:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
+  filter: invert(40%)
+
+:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover
+  filter: invert(50%)
+
+.detail-stack
+  position: relative
+
+.main-ui.detail-panel-open .zoom-control
+  opacity: 0
+  display: none
+
+.zoom-control
+  transition: opacity 1s ease-in-out
+  width: 30px
+  position: absolute
+  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
+
+  &>*
+    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
+  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
+  height: 22px
+  background-position: center center
+  padding: 0
+  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 .map-scale-control
+  background: none
+  box-shadow: none
+  padding-top: 8px
+
+  :global(.mapboxgl-ctrl-scale)
+    background-color: var(--translucent-panel-background-color)
+    border-color: var(--secondary-text-color)
+    color: var(--secondary-text-color)
+
+/* 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
+    height: 0
+    visibility: hidden
+    transition: height 0.5s ease-in-out
+
+  .detail-stack
+    height: fit-content
+    position: inherit
+    max-height: 70%
+
+  .infodrawer-stack
+    max-height: 70%
+
+  :global(.exit-active)
+    max-height: 0
+
+  :global(.mapbox-control.mapbox-zoom)
+    display: none
+
+  .map-controls
+    position: absolute
+    top: -60px
+    right: 10px
+
+  .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
+    flex-direction: row
+    padding: 1em 1em 2em
+    min-height: 80px
+    &>*
+      margin-right: 0.5em
+      &>*: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
+
+    &.panel-open
+      width: 34em
+      margin-right: 0.5em
+
+  .context-stack.layers,
+  .context-stack.settings
+    width: 18em
+    margin-right: 0.5em
+
+  .main-ui.detail-panel-open .detail-stack
+    width: 30em
+
+  .detail-stack
+    width: 30em
+    pointer-events: none
+    display: flex
+    flex-direction: column
+
+  .context-stack,
+  .detail-stack
+    pointer-events: none
+    z-index: 100
+
+  .context-stack>div,
+  .detail-stack>div
+    pointer-events: all
+    margin-bottom: 0.5em
+
+  .context-stack>div:last-child,
+  .detail-stack>div:last-child
+    margin-bottom: 0
+
+  .context-stack>div.spacer,
+  .detail-stack>div.spacer
+    pointer-events: none
+
+  .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
+
+.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-from .context-panel
+  opacity: 0
+
+.main-ui.context-panel-enter .context-panel
+  opacity: 1
+
+.main-ui.context-panel-leave .context-panel
+  opacity: 0
+
+@media only screen and (max-width: 768px)
+  .main-ui .detail-stack
+    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
+
+  .main-ui.detail-panel-from .detail-stack
+    max-height: 0
+    height: 0
+
+  .main-ui.detail-panel-leave .detail-stack
+    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
+
+// 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
+    margin-right: -14em
+
+  .map-page.map-is-global .main-ui.detail-panel-leave .map-view-container
+    margin-right: -30em
+
+  .map-page.map-is-global .main-ui.context-panel-leave .map-view-container
+    margin-left: -16em

package/src/map-view/index.ts

@@ -0,0 +1,163 @@
+import hyper from "@macrostrat/hyper";
+import {
+  useMapRef,
+  useMapStatus,
+  useMapDispatch,
+} from "@macrostrat/mapbox-react";
+import {
+  mapViewInfo,
+  MapPosition,
+  setMapPosition,
+} from "@macrostrat/mapbox-utils";
+import classNames from "classnames";
+import mapboxgl from "mapbox-gl";
+import { useEffect, useRef } from "react";
+import styles from "./main.module.sass";
+import rootStyles from "../main.module.sass";
+import { enable3DTerrain } from "./terrain";
+import {
+  MapLoadingReporter,
+  MapMovedReporter,
+  MapPaddingManager,
+  MapResizeManager,
+} from "../helpers";
+
+const h = hyper.styled({ ...styles, ...rootStyles });
+
+type MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, "container">;
+
+export interface MapViewProps extends MapboxCoreOptions {
+  showLineSymbols?: boolean;
+  children?: React.ReactNode;
+  accessToken?: string;
+  terrainSourceID?: string;
+  enableTerrain?: boolean;
+  infoMarkerPosition?: mapboxgl.LngLatLike;
+  //style: mapboxgl.Style | string;
+  //transformRequest?: mapboxgl.TransformRequestFunction;
+  mapPosition?: MapPosition;
+}
+
+function initializeMap(container, args: MapboxCoreOptions = {}) {
+  const map = new mapboxgl.Map({
+    container,
+    maxZoom: 18,
+    //maxTileCacheSize: 0,
+    logoPosition: "bottom-left",
+    trackResize: true,
+    antialias: true,
+    optimizeForTerrain: true,
+    ...args,
+  });
+
+  //setMapPosition(map, mapPosition);
+  return map;
+}
+
+const defaultMapPosition: MapPosition = {
+  camera: {
+    lat: 34,
+    lng: -120,
+    altitude: 300000,
+  },
+};
+
+export function MapView(props: MapViewProps) {
+  let { terrainSourceID } = props;
+  const {
+    enableTerrain = true,
+    style,
+    transformRequest,
+    mapPosition = defaultMapPosition,
+    children,
+    accessToken,
+    infoMarkerPosition,
+    projection,
+  } = props;
+  if (enableTerrain) {
+    terrainSourceID ??= "mapbox-3d-dem";
+  }
+
+  if (accessToken != null) {
+    mapboxgl.accessToken = accessToken;
+  }
+
+  const dispatch = useMapDispatch();
+  let mapRef = useMapRef();
+  const ref = useRef<HTMLDivElement>();
+  const parentRef = useRef<HTMLDivElement>();
+
+  // 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");
+    const map = initializeMap(ref.current, {
+      style,
+      transformRequest,
+      projection,
+    });
+    dispatch({ type: "set-map", payload: map });
+    console.log("Map initialized");
+    return () => {
+      map.remove();
+      dispatch({ type: "set-map", payload: null });
+    };
+  }, [transformRequest, dispatch, 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();
+  const { mapUse3D, mapIsRotated } = mapViewInfo(_computedMapPosition);
+
+  // Get map projection
+  const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
+
+  const className = classNames(
+    {
+      "is-rotated": mapIsRotated ?? false,
+      "is-3d-available": mapUse3D ?? false,
+    },
+    `${_projection}-projection`
+  );
+
+  return h("div.map-view-container.main-view", { ref: parentRef }, [
+    h("div.mapbox-map#map", { ref, className }),
+    h(MapLoadingReporter, {
+      ignoredSources: ["elevationMarker", "crossSectionEndpoints"],
+    }),
+    h(MapMovedReporter),
+    h(MapResizeManager, { containerRef: ref }),
+    h(MapPaddingManager, { containerRef: ref, parentRef, infoMarkerPosition }),
+    h(MapTerrainManager, { mapUse3D, terrainSourceID }),
+    children,
+  ]);
+}
+
+export function MapTerrainManager({
+  mapUse3D,
+  terrainSourceID,
+}: {
+  mapUse3D?: boolean;
+  terrainSourceID?: string;
+}) {
+  const mapRef = useMapRef();
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map == null) return;
+    enable3DTerrain(map, mapUse3D, terrainSourceID);
+  }, [mapRef.current, mapUse3D]);
+  return null;
+}

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

@@ -0,0 +1,13 @@
+.map-view-container
+  flex-grow: 1
+  position: relative
+  overflow: hidden
+
+/* Desktop styling is necessarily much more complicated than mobile
+ to handle a two-column layout. */
+@media screen and (min-width: 768px)
+  /* Make map fill page rather than containing div,
+   by unsetting map position */
+  // We should move this to another file.
+  .map-view-container
+    position: unset

package/src/map-view/terrain.ts

@@ -0,0 +1,60 @@
+// We should merge this with code in @macrostrat/mapbox-react/src/terrain.ts:
+
+export function enable3DTerrain(
+  map,
+  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);
+    });
+    return;
+  }
+
+  // Enable or disable terrain depending on our current desires...
+  const currentTerrain = map.getTerrain();
+  if (!shouldEnable) {
+    if (currentTerrain != null) map.setTerrain(null);
+    return;
+  }
+  if (currentTerrain != null) return;
+
+  // Add a DEM source if one is not found already.
+  if (map.getSource(demSourceID) == null) {
+    map.addSource(demSourceID, {
+      type: "raster-dem",
+      url: "mapbox://mapbox.mapbox-terrain-dem-v1",
+      tileSize: 512,
+      maxzoom: 14,
+    });
+  }
+
+  // add a sky layer that will show when the map is highly pitched
+  if (map.getLayer("sky") == null) {
+    map.addLayer({
+      id: "sky",
+      type: "sky",
+      paint: {
+        "sky-type": "atmosphere",
+        "sky-atmosphere-sun": [0.0, 0.0],
+        "sky-atmosphere-sun-intensity": 15,
+      },
+    });
+  }
+
+  map.setTerrain({ source: demSourceID, exaggeration: 1 });
+}
+
+function getTerrainSourceID(map) {
+  for (const [key, source] of Object.entries(map.getStyle().sources)) {
+    if (source.type == "raster-dem") {
+      return key;
+    }
+  }
+  return null;
+}

package/src/utils.ts

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { Marker } from "mapbox-gl";
+
+function calcMapPadding(rect, childRect) {
+  return {
+    left: Math.max(rect.left - childRect.left, 0),
+    top: Math.max(rect.top - childRect.top, 0),
+    right: Math.max(childRect.right - rect.right, 0),
+    bottom: Math.max(childRect.bottom - rect.bottom, 0),
+  };
+}
+
+export function getMapPadding(ref, parentRef) {
+  const rect = parentRef.current?.getBoundingClientRect();
+  const childRect = ref.current?.getBoundingClientRect();
+  if (rect == null || childRect == null) return;
+  return calcMapPadding(rect, childRect);
+}
+
+export function useMapMarker(mapRef, markerRef, markerPosition) {
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map == null) return;
+    if (markerPosition == null) {
+      markerRef.current?.remove();
+      return;
+    }
+    const marker = markerRef.current ?? new Marker();
+    marker.setLngLat(markerPosition).addTo(map);
+    markerRef.current = marker;
+    return () => marker.remove();
+  }, [mapRef.current, markerPosition]);
+}