Merge branch 'map-terrain-reloading'

* map-terrain-reloading:
  Updated changelogs
  Smoother terrain reloading
  Add style layers directly to map
  Don't set fog by default
  Removed terrain functions entirely from map-interface
  Remove unused terrain functions
  Integrate terrain utilities into mapbox-react
  Break out default layers
  Moved bulk of terrain code to mapbox-react
  Terrain loads but with unstyled flash
  Story showing issue with map reloading
  Created skeletal terrain reloading demo

Author: davenquinn

packages/map-interface/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.3] - 2025-02-23
+
+- Allow map interface to be rendered without a context panel
+- Create a story for streamlining style reloading with 3D terrain
+- Move all terrain management to `@macrostrat/mapbox-react`
+- New approach to setting up map styles that reduces the chance of full
+  re-renders of terrain layers. This enables smoother transitions between
+  minimally varying map styles.
+
 ## [1.2.2] - 2025-02-16
 
 - Improve styles for map sidebar and expansion panels

packages/map-interface/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Map interface for Macrostrat",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/map-interface/src/container.ts

@@ -118,7 +118,7 @@ function _MapAreaContainer({
   );
 
   let contextStack = null;
-  if (navbar != null && contextPanel != null) {
+  if (navbar != null || contextPanel != null) {
     contextStack = h(ContextStack, { navbar, ...contextStackProps }, [
       h.if(contextPanelTrans.shouldMount)([contextPanel]),
     ]);

…ages/map-interface/src/map-view/index.ts packages/map-interface/src/map-view.tspackages/map-interface/src/map-view/index.ts renamed to packages/map-interface/src/map-view.ts packages/map-interface/src/map-view/index.ts renamed to packages/map-interface/src/map-view.ts

@@ -3,25 +3,30 @@ import {
   useMapRef,
   useMapDispatch,
   useMapPosition,
+  setup3DTerrain,
+  use3DTerrain,
+  addTerrainToStyle,
 } from "@macrostrat/mapbox-react";
 import {
   mapViewInfo,
   MapPosition,
   setMapPosition,
+  getMapPosition,
+  getMapboxStyle,
 } from "@macrostrat/mapbox-utils";
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
-import { useEffect, useRef, useCallback } from "react";
-import styles from "../main.module.sass";
-import { enable3DTerrain } from "./terrain";
+import { useEffect, useRef } from "react";
+import styles from "./main.module.sass";
 import {
   MapLoadingReporter,
   MapMovedReporter,
   MapPaddingManager,
   MapResizeManager,
-} from "../helpers";
+} from "./helpers";
 import "mapbox-gl/dist/mapbox-gl.css";
-import { getMapPadding } from "../utils";
+import { getMapPadding } from "./utils";
+import { useAsyncEffect } from "@macrostrat/ui-components";
 
 const h = hyper.styled(styles);
 
@@ -116,16 +121,45 @@ export function MapView(props: MapViewProps) {
   const ref = useRef<HTMLDivElement>();
   const parentRef = useRef<HTMLDivElement>();
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
+    /** Manager to update map style */
     if (style == null) return;
     let map = mapRef.current;
+
+    /** If we can, we try to update the map style with terrain information
+     * immediately, before the style is loaded. This allows us to avoid a
+     * flash of the map without terrain.
+     *
+     * To do this, we need to estimate the map position before load, which
+     * doesn't always work.
+     */
+    // We either get the map position directly from the map or from props
+    const estMapPosition: MapPosition | null =
+      map == null ? mapPosition : getMapPosition(map);
+    let newStyle = style;
+    const { mapUse3D } = mapViewInfo(estMapPosition);
+
+    /** If style is a string, we can't update it with terrain layers immediately.
+     * We need to wait for the style to load and then update it.
+     */
+    if (typeof style === "string") {
+      newStyle = await getMapboxStyle(style, {
+        access_token: mapboxgl.accessToken,
+      });
+    }
+
+    if (mapUse3D) {
+      // We can update the style with terrain layers immediately
+      newStyle = addTerrainToStyle(newStyle as mapboxgl.Style, terrainSourceID);
+    }
+
     if (map != null) {
-      console.log("Setting style", style);
-      map.setStyle(style);
+      console.log("Setting style", newStyle);
+      map.setStyle(newStyle);
     } else {
-      console.log("Initializing map", style);
+      console.log("Initializing map", newStyle);
       const map = initializeMap(ref.current, {
-        style,
+        style: newStyle,
         projection,
         mapPosition,
         transformRequest,
@@ -138,11 +172,13 @@ export function MapView(props: MapViewProps) {
 
     const loadCallback = () => {
       onStyleLoaded?.(map);
+      // Set initial terrain state
       dispatch({ type: "set-style-loaded", payload: true });
     };
 
     map = mapRef.current;
-    if (map.isStyleLoaded()) {
+
+    if (map.style?._loaded) {
       // Catch a race condition where the style is loaded before the callback is set
       loadCallback();
     }
@@ -174,24 +210,21 @@ export function MapView(props: MapViewProps) {
     h(MapMovedReporter, { onMapMoved }),
     h(MapResizeManager, { containerRef: ref }),
     h(MapPaddingManager, { containerRef: ref, parentRef, infoMarkerPosition }),
-    h(MapTerrainManager, { mapUse3D, terrainSourceID }),
+    h(MapTerrainManager, { mapUse3D, terrainSourceID, style }),
     children,
   ]);
 }
 
 export function MapTerrainManager({
   mapUse3D,
   terrainSourceID,
+  style,
 }: {
   mapUse3D?: boolean;
   terrainSourceID?: string;
+  style?: mapboxgl.Style | string;
 }) {
-  const mapRef = useMapRef();
+  use3DTerrain(mapUse3D, terrainSourceID);
 
-  useEffect(() => {
-    const map = mapRef.current;
-    if (map == null) return;
-    enable3DTerrain(map, mapUse3D, terrainSourceID);
-  }, [mapRef.current, mapUse3D]);
   return null;
 }

packages/map-interface/src/map-view/terrain.ts

@@ -0,0 +1,11 @@
+.header-block
+  .top-row
+    display: flex
+    justify-content: space-between
+    align-items: center
+  h3.header-title
+    margin: 0.2em 0 0.5em
+    text-overflow: ellipsis
+
+.controls>:last-child
+  margin-bottom: 0