Improved map view styling

Author: davenquinn

packages/map-interface/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.4.0] - 2025-07-02
+
+- Allow `DevMapPage` to set more options for the map, inherited from Mapbox GL
+  map options
+- Streamline map position management during initialization
+- Fix stuck loading spinner at map initialization
+- Add new stories for position management
+- Make `enableTerrain: false` work correctly
+- Improve options for map view styling, by allowing the `className` to be set
+  and deprecating the auto setting of `#map` ID on the map view.
+
 ## [1.3.2] - 2025-06-26
 
 Bugfix for DevMapPage when applying custom styles

packages/map-interface/package.json

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

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

@@ -61,6 +61,8 @@ export interface MapViewProps extends MapboxCoreOptions {
     style: mapboxgl.StyleSpecification,
   ) => mapboxgl.StyleSpecification;
   loadingIgnoredSources?: string[];
+  id?: string;
+  className?: string;
 }
 
 export interface MapboxOptionsExt extends MapboxCoreOptions {
@@ -126,12 +128,22 @@ export function MapView(props: MapViewProps) {
     transformStyle,
     trackResize = true,
     loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
+    id = "map",
+    className,
     ...rest
   } = props;
   if (enableTerrain) {
     terrainSourceID ??= "mapbox-3d-dem";
   }
 
+  useEffect(() => {
+    if (id != null) {
+      console.warn(
+        "Setting a specific element ID for the map is deprecated. Please use className instead.",
+      );
+    }
+  }, [id]);
+
   const _mapboxToken = mapboxToken ?? accessToken;
 
   if (_mapboxToken != null) {
@@ -213,23 +225,26 @@ export function MapView(props: MapViewProps) {
   // Get map projection
   const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
 
-  const className = classNames(
+  const mapClassName = classNames(
     {
       "is-rotated": mapIsRotated ?? false,
       "is-3d-available": is3DAvailable,
     },
     `${_projection}-projection`,
   );
 
-  const parentClassName = classNames({
-    standalone,
-  });
+  const parentClassName = classNames(
+    {
+      standalone,
+    },
+    className,
+  );
 
   return h(
     "div.map-view-container.main-view",
     { ref: parentRef, className: parentClassName },
     [
-      h("div.mapbox-map#map", { ref, className }),
+      h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
       h(MapLoadingReporter, {
         ignoredSources: loadingIgnoredSources,
       }),

packages/mapbox-react/CHANGELOG.md

@@ -4,6 +4,11 @@ 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).
 
+## [2.6.2] - 2025-07-02
+
+- Move internal functions for managing focus state to the
+  `@macrostrat/mapbox-utils` package
+
 ## [2.6.1] - 2025-06-25
 
 - Small improvements to types and styles

packages/mapbox-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/mapbox-react",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Components to support using Mapbox maps in React",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/mapbox-utils/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.6.0] - 2025-07-02
+
+- Add functions to manage focus state and map positioning, inherited from
+  `@macrostrat/mapbox-react`
+- Add new `updateStyleLayers` helper that merges layers into a map style at
+  runtime
+
 ## [1.5.1] - 2025-06-25
 
 - Fix `getMapPosition` and `setMapPosition` functions

packages/mapbox-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/mapbox-utils",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Utilities for working with Mapbox maps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",