npm - @macrostrat/map-interface - Versions diffs - 2.1.0 → 2.2.1 - Mend

@macrostrat/map-interface 2.1.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,19 @@ 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.2.1] - 2026-02-13
+- Add `width` and `height` props to `MapView`
+- Add a default `style` to `MapView` (Mapbox Streets)
+- Don't set `id` property by default on `MapView`
+- New stories for `MapView`
+## [2.2.0] - 2026-02-13
+- Add internal logic to `MapView` to manage the addition of custom style
+  fragments, based on updates to the `@macrostrat/mapbox-react` package
+- Add new stories
 ## [2.1.0] - 2026-02-09
 - Remove xDD info panel components

package/dist/map-view.cjs CHANGED Viewed

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const h$1 = require("@macrostrat/hyper");
 const mapboxReact = require("@macrostrat/mapbox-react");
 const mapboxUtils = require("@macrostrat/mapbox-utils");
 const classNames = require("classnames");
@@ -12,10 +11,8 @@ const helpers = require("./helpers.cjs");
 const utils = require("./utils.cjs");
 const uiComponents = require("@macrostrat/ui-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
 const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
 const mapboxgl__default = /* @__PURE__ */ _interopDefault(mapboxgl);
-const h = h__default.default.styled(main_module.default);
 function defaultInitializeMap(container, args = {}) {
   const { mapPosition, ...rest } = args;
   const map = new mapboxgl__default.default.Map({
@@ -48,8 +45,10 @@ const defaultMapPosition = {
 function MapView(props) {
   let { terrainSourceID } = props;
   const {
+    height,
+    width,
     enableTerrain = true,
-    style,
+    style = "mapbox://styles/mapbox/streets-v11",
     mapPosition,
     initializeMap = defaultInitializeMap,
     children,
@@ -67,13 +66,10 @@ function MapView(props) {
     transformStyle,
     trackResize = true,
     loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
-    id = "map",
+    id,
     className,
     ...rest
   } = props;
-  if (enableTerrain) {
-    terrainSourceID ??= "mapbox-3d-dem";
-  }
   React.useEffect(() => {
     if (id != null) {
       console.warn(
@@ -90,6 +86,7 @@ function MapView(props) {
   const ref = React.useRef();
   const parentRef = React.useRef();
   const [baseStyle, setBaseStyle] = React.useState(null);
+  const _ctxOverlayStyles = mapboxReact.useMapStyleFragments();
   const estMapPosition = mapRef.current == null ? mapPosition : mapboxUtils.getMapPosition(mapRef.current);
   const { mapUse3D, mapIsRotated } = mapboxUtils.mapViewInfo(estMapPosition);
   const is3DAvailable = (mapUse3D ?? false) && enableTerrain;
@@ -97,9 +94,9 @@ function MapView(props) {
     if (baseStyle == null) return;
     let map = mapRef.current;
     let newStyle = baseStyle;
-    const overlayStyles2 = props.overlayStyles ?? [];
-    if (overlayStyles2.length > 0) {
-      newStyle = mapboxUtils.mergeStyles(newStyle, ...overlayStyles2);
+    const _overlayStyles = overlayStyles ?? [];
+    if (_overlayStyles.length > 0 || _ctxOverlayStyles.length > 0) {
+      newStyle = mapboxUtils.mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);
     }
     if (is3DAvailable) {
       const terrainStyle = mapboxReact.getTerrainLayerForStyle(newStyle, terrainSourceID);
@@ -123,7 +120,7 @@ function MapView(props) {
       map2.setPadding(utils.getMapPadding(ref, parentRef), { animate: false });
       onMapLoaded?.(map2);
     }
-  }, [baseStyle, overlayStyles, transformStyle]);
+  }, [baseStyle, overlayStyles, _ctxOverlayStyles, transformStyle]);
   uiComponents.useAsyncEffect(async () => {
     let newStyle;
     if (typeof style === "string") {
@@ -149,25 +146,29 @@ function MapView(props) {
     },
     className
   );
-  return h(
+  const containerStyle = {
+    height,
+    width
+  };
+  return main_module.default(
     "div.map-view-container.main-view",
-    { ref: parentRef, className: parentClassName },
+    { ref: parentRef, className: parentClassName, style: containerStyle },
     [
-      h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
-      h(helpers.MapLoadingReporter, {
+      main_module.default("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
+      main_module.default(helpers.MapLoadingReporter, {
         ignoredSources: loadingIgnoredSources
       }),
-      h(StyleLoadedReporter, { onStyleLoaded }),
-      h(helpers.MapMovedReporter, { onMapMoved }),
+      main_module.default(StyleLoadedReporter, { onStyleLoaded }),
+      main_module.default(helpers.MapMovedReporter, { onMapMoved }),
       // Subsitute for trackResize: true that allows map resizing to
       // be tied to a specific ref component
-      h.if(trackResize)(helpers.MapResizeManager, { containerRef: ref }),
-      h(helpers.MapPaddingManager, {
+      main_module.default.if(trackResize)(helpers.MapResizeManager, { containerRef: ref }),
+      main_module.default(helpers.MapPaddingManager, {
         containerRef: ref,
         parentRef,
         infoMarkerPosition
       }),
-      h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),
+      main_module.default(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),
       children
     ]
   );
@@ -193,8 +194,7 @@ function StyleLoadedReporter({ onStyleLoaded = null }) {
 }
 function MapTerrainManager({
   mapUse3D,
-  terrainSourceID,
-  style
+  terrainSourceID
 }) {
   mapboxReact.use3DTerrain(mapUse3D, terrainSourceID);
   return null;

package/dist/map-view.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"map-view.cjs","sources":["../src/map-view.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n useMapRef,\n useMapDispatch,\n use3DTerrain,\n getTerrainLayerForStyle,\n useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport React from \"react\";\nimport {\n mapViewInfo,\n MapPosition,\n setMapPosition,\n getMapPosition,\n getMapboxStyle,\n mergeStyles,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useState } from \"react\";\nimport styles from \"./main.module.sass\";\nimport {\n MapLoadingReporter,\n MapMovedReporter,\n MapPaddingManager,\n MapResizeManager,\n} from \"./helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"./utils\";\nimport { useAsyncEffect } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\ntype MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, \"container\">;\n\nexport interface MapViewProps extends MapboxCoreOptions {\n showLineSymbols?: boolean;\n children?: React.ReactNode;\n mapboxToken?: string;\n // Deprecated\n accessToken?: string;\n terrainSourceID?: string;\n enableTerrain?: boolean;\n infoMarkerPosition?: mapboxgl.LngLatLike;\n mapPosition?: MapPosition;\n initializeMap?: (\n container: HTMLElement,\n args: MapboxOptionsExt,\n ) => mapboxgl.Map;\n onMapLoaded?: (map: mapboxgl.Map) => void;\n onStyleLoaded?: (map: mapboxgl.Map) => void;\n onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;\n /** This map sets its own viewport, rather than being positioned by a parent.\n * This is a hack to ensure that the map can overflow its \"safe area\" when false /\n standalone?: boolean;\n /* Overlay styles to apply to the map: a list of mapbox style objects or fragments to\n * overlay on top of the main map style at runtime /\n overlayStyles?: Partial<mapboxgl.StyleSpecification>[];\n /* A function to transform the map style before it is loaded /\n transformStyle?: (\n style: mapboxgl.StyleSpecification,\n ) => mapboxgl.StyleSpecification;\n loadingIgnoredSources?: string[];\n id?: string;\n className?: string;\n}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n const { mapPosition, ...rest } = args;\n\n const map = new mapboxgl.Map({\n container,\n maxZoom: 18,\n logoPosition: \"bottom-left\",\n trackResize: false,\n antialias: true,\n // This is a legacy option for Mapbox GL v2\n // @ts-ignore\n optimizeForTerrain: true,\n ...rest,\n });\n\n let _mapPosition = mapPosition;\n if (_mapPosition == null && rest.center == null && rest.bounds == null) {\n // If no map positioning information is provided, we use the default\n _mapPosition = defaultMapPosition;\n }\n\n // set initial map position\n if (_mapPosition != null) {\n setMapPosition(map, _mapPosition);\n }\n\n return map;\n}\n\nconst defaultMapPosition: MapPosition = {\n camera: {\n lat: 34,\n lng: -120,\n altitude: 300000,\n },\n};\n\nexport function MapView(props: MapViewProps) {\n let { terrainSourceID } = props;\n const {\n enableTerrain = true,\n style,\n mapPosition,\n initializeMap = defaultInitializeMap,\n children,\n mapboxToken,\n // Deprecated\n accessToken,\n infoMarkerPosition,\n transformRequest,\n projection,\n onMapLoaded = null,\n onStyleLoaded = null,\n onMapMoved = null,\n standalone = false,\n overlayStyles,\n transformStyle,\n trackResize = true,\n loadingIgnoredSources = [\"elevationMarker\", \"crossSectionEndpoints\"],\n id = \"map\",\n className,\n ...rest\n } = props;\n if (enableTerrain) {\n terrainSourceID ??= \"mapbox-3d-dem\";\n }\n\n useEffect(() => {\n if (id != null) {\n console.warn(\n \"Setting a specific element ID for the map is deprecated. Please use className instead.\",\n );\n }\n }, [id]);\n\n const _mapboxToken = mapboxToken ?? accessToken;\n\n if (_mapboxToken != null) {\n mapboxgl.accessToken = _mapboxToken;\n }\n\n const dispatch = useMapDispatch();\n let mapRef = useMapRef();\n const ref = useRef<HTMLDivElement>();\n const parentRef = useRef<HTMLDivElement>();\n\n const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);\n\n const estMapPosition: MapPosition \| null =\n mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);\n const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);\n const is3DAvailable = (mapUse3D ?? false) && enableTerrain;\n\n useEffect(() => {\n /* Manager to update map style /\n if (baseStyle == null) return;\n let map = mapRef.current;\n\n let newStyle: mapboxgl.StyleSpecification = baseStyle;\n\n const overlayStyles = props.overlayStyles ?? [];\n\n if (overlayStyles.length > 0) {\n newStyle = mergeStyles(newStyle, ...overlayStyles);\n }\n\n /* If we can, we try to update the map style with terrain information\n * immediately, before the style is loaded. This allows us to avoid a\n * flash of the map without terrain.\n \n To do this, we need to estimate the map position before load, which\n * doesn't always work.\n /\n if (is3DAvailable) {\n // We can update the style with terrain layers immediately\n const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);\n newStyle = mergeStyles(newStyle, terrainStyle);\n }\n\n if (transformStyle != null) {\n newStyle = transformStyle(newStyle);\n }\n\n if (map != null) {\n dispatch({ type: \"set-style-loaded\", payload: false });\n map.setStyle(newStyle);\n } else {\n const map = initializeMap(ref.current, {\n style: newStyle,\n projection,\n mapPosition,\n transformRequest,\n ...rest,\n });\n dispatch({ type: \"set-map\", payload: map });\n map.setPadding(getMapPadding(ref, parentRef), { animate: false });\n onMapLoaded?.(map);\n }\n }, [baseStyle, overlayStyles, transformStyle]);\n\n useAsyncEffect(async () => {\n /* Manager to update map style /\n let newStyle: mapboxgl.StyleSpecification;\n if (typeof style === \"string\") {\n newStyle = await getMapboxStyle(style, {\n access_token: mapboxgl.accessToken,\n });\n } else {\n newStyle = style;\n }\n setBaseStyle(newStyle);\n }, [style]);\n\n // Get map projection\n const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n const mapClassName = classNames(\n {\n \"is-rotated\": mapIsRotated ?? false,\n \"is-3d-available\": is3DAvailable,\n },\n `${_projection}-projection`,\n );\n\n const parentClassName = classNames(\n {\n standalone,\n },\n className,\n );\n\n return h(\n \"div.map-view-container.main-view\",\n { ref: parentRef, className: parentClassName },\n [\n h(\"div.mapbox-map.map-view\", { ref, className: mapClassName, id }),\n h(MapLoadingReporter, {\n ignoredSources: loadingIgnoredSources,\n }),\n h(StyleLoadedReporter, { onStyleLoaded }),\n h(MapMovedReporter, { onMapMoved }),\n // Subsitute for trackResize: true that allows map resizing to\n // be tied to a specific ref component\n h.if(trackResize)(MapResizeManager, { containerRef: ref }),\n h(MapPaddingManager, {\n containerRef: ref,\n parentRef,\n infoMarkerPosition,\n }),\n h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),\n children,\n ],\n );\n}\n\nfunction StyleLoadedReporter({ onStyleLoaded = null }) {\n /* Check back every 0.1 seconds to see if the map has loaded.\n * We do it this way because mapboxgl loading events are unreliable */\n const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);\n const mapRef = useMapRef();\n const dispatch = useMapDispatch();\n\n useEffect(() => {\n if (isStyleLoaded) return;\n const interval = setInterval(() => {\n const map = mapRef.current;\n if (map == null) return;\n if (map.isStyleLoaded()) {\n // Wait a tick before setting the style loaded state\n dispatch({ type: \"set-style-loaded\", payload: true });\n onStyleLoaded?.(map);\n clearInterval(interval);\n }\n }, 50);\n return () => clearInterval(interval);\n }, [isStyleLoaded]);\n\n return null;\n}\n\nexport function MapTerrainManager({\n mapUse3D,\n terrainSourceID,\n style,\n}: {\n mapUse3D?: boolean;\n terrainSourceID?: string;\n style?: mapboxgl.StyleSpecification \| string;\n}) {\n use3DTerrain(mapUse3D, terrainSourceID);\n\n return null;\n}\n"],"names":["hyper","styles","mapboxgl","setMapPosition","useEffect","useMapDispatch","useMapRef","useRef","useState","getMapPosition","mapViewInfo","overlayStyles","mergeStyles","getTerrainLayerForStyle","map","getMapPadding","useAsyncEffect","getMapboxStyle","classNames","MapLoadingReporter","MapMovedReporter","MapResizeManager","MapPaddingManager","useMapStatus","use3DTerrain"],"mappings":"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"}
1	+ {"version":3,"file":"map-view.cjs","sources":["../src/map-view.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n useMapRef,\n useMapDispatch,\n use3DTerrain,\n getTerrainLayerForStyle,\n useMapStatus,\n useMapStyleFragments,\n} from \"@macrostrat/mapbox-react\";\nimport React from \"react\";\nimport {\n mapViewInfo,\n MapPosition,\n setMapPosition,\n getMapPosition,\n getMapboxStyle,\n mergeStyles,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useState } from \"react\";\nimport h from \"./main.module.sass\";\nimport {\n MapLoadingReporter,\n MapMovedReporter,\n MapPaddingManager,\n MapResizeManager,\n} from \"./helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"./utils\";\nimport { useAsyncEffect } from \"@macrostrat/ui-components\";\n\ntype MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, \"container\">;\n\nexport interface MapViewProps extends MapboxCoreOptions {\n showLineSymbols?: boolean;\n children?: React.ReactNode;\n mapboxToken?: string;\n // Deprecated\n accessToken?: string;\n terrainSourceID?: string;\n enableTerrain?: boolean;\n infoMarkerPosition?: mapboxgl.LngLatLike;\n mapPosition?: MapPosition;\n initializeMap?: (\n container: HTMLElement,\n args: MapboxOptionsExt,\n ) => mapboxgl.Map;\n onMapLoaded?: (map: mapboxgl.Map) => void;\n onStyleLoaded?: (map: mapboxgl.Map) => void;\n onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;\n /** This map sets its own viewport, rather than being positioned by a parent.\n * This is a hack to ensure that the map can overflow its \"safe area\" when false /\n standalone?: boolean;\n /* Overlay styles to apply to the map: a list of mapbox style objects or fragments to\n * overlay on top of the main map style at runtime /\n overlayStyles?: Partial<mapboxgl.StyleSpecification>[];\n /* A function to transform the map style before it is loaded /\n transformStyle?: (\n style: mapboxgl.StyleSpecification,\n ) => mapboxgl.StyleSpecification;\n loadingIgnoredSources?: string[];\n id?: string;\n className?: string;\n height: number;\n width: number;\n}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n const { mapPosition, ...rest } = args;\n\n const map = new mapboxgl.Map({\n container,\n maxZoom: 18,\n logoPosition: \"bottom-left\",\n trackResize: false,\n antialias: true,\n // This is a legacy option for Mapbox GL v2\n // @ts-ignore\n optimizeForTerrain: true,\n ...rest,\n });\n\n let _mapPosition = mapPosition;\n if (_mapPosition == null && rest.center == null && rest.bounds == null) {\n // If no map positioning information is provided, we use the default\n _mapPosition = defaultMapPosition;\n }\n\n // set initial map position\n if (_mapPosition != null) {\n setMapPosition(map, _mapPosition);\n }\n\n return map;\n}\n\nconst defaultMapPosition: MapPosition = {\n camera: {\n lat: 34,\n lng: -120,\n altitude: 300000,\n },\n};\n\nexport function MapView(props: MapViewProps) {\n let { terrainSourceID } = props;\n const {\n height,\n width,\n enableTerrain = true,\n style = \"mapbox://styles/mapbox/streets-v11\",\n mapPosition,\n initializeMap = defaultInitializeMap,\n children,\n mapboxToken,\n // Deprecated\n accessToken,\n infoMarkerPosition,\n transformRequest,\n projection,\n onMapLoaded = null,\n onStyleLoaded = null,\n onMapMoved = null,\n standalone = false,\n overlayStyles,\n transformStyle,\n trackResize = true,\n loadingIgnoredSources = [\"elevationMarker\", \"crossSectionEndpoints\"],\n id,\n className,\n ...rest\n } = props;\n\n useEffect(() => {\n if (id != null) {\n console.warn(\n \"Setting a specific element ID for the map is deprecated. Please use className instead.\",\n );\n }\n }, [id]);\n\n const _mapboxToken = mapboxToken ?? accessToken;\n\n if (_mapboxToken != null) {\n mapboxgl.accessToken = _mapboxToken;\n }\n\n const dispatch = useMapDispatch();\n let mapRef = useMapRef();\n const ref = useRef<HTMLDivElement>();\n const parentRef = useRef<HTMLDivElement>();\n\n const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);\n\n /* Get overlay styles from map context. These are added after the base style is loaded, and can be used\n * to add layers to the map at runtime, even after initialization. They are merged with any overlay styles\n * passed in as props.\n /\n const _ctxOverlayStyles = useMapStyleFragments() as any[];\n\n const estMapPosition: MapPosition \| null =\n mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);\n const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);\n const is3DAvailable = (mapUse3D ?? false) && enableTerrain;\n\n useEffect(() => {\n /* Manager to update map style /\n if (baseStyle == null) return;\n let map = mapRef.current;\n\n let newStyle: mapboxgl.StyleSpecification = baseStyle;\n\n const _overlayStyles = overlayStyles ?? [];\n\n if (_overlayStyles.length > 0 \|\| _ctxOverlayStyles.length > 0) {\n newStyle = mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);\n }\n\n /* If we can, we try to update the map style with terrain information\n * immediately, before the style is loaded. This allows us to avoid a\n * flash of the map without terrain.\n \n To do this, we need to estimate the map position before load, which\n * doesn't always work.\n /\n if (is3DAvailable) {\n // We can update the style with terrain layers immediately\n const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);\n newStyle = mergeStyles(newStyle, terrainStyle);\n }\n\n if (transformStyle != null) {\n newStyle = transformStyle(newStyle);\n }\n\n if (map != null) {\n dispatch({ type: \"set-style-loaded\", payload: false });\n map.setStyle(newStyle);\n } else {\n const map = initializeMap(ref.current, {\n style: newStyle,\n projection,\n mapPosition,\n transformRequest,\n ...rest,\n });\n dispatch({ type: \"set-map\", payload: map });\n map.setPadding(getMapPadding(ref, parentRef), { animate: false });\n onMapLoaded?.(map);\n }\n }, [baseStyle, overlayStyles, _ctxOverlayStyles, transformStyle]);\n\n useAsyncEffect(async () => {\n /* Manager to update map style /\n let newStyle: mapboxgl.StyleSpecification;\n if (typeof style === \"string\") {\n newStyle = await getMapboxStyle(style, {\n access_token: mapboxgl.accessToken,\n });\n } else {\n newStyle = style;\n }\n setBaseStyle(newStyle);\n }, [style]);\n\n // Get map projection\n const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n const mapClassName = classNames(\n {\n \"is-rotated\": mapIsRotated ?? false,\n \"is-3d-available\": is3DAvailable,\n },\n `${_projection}-projection`,\n );\n\n const parentClassName = classNames(\n {\n standalone,\n },\n className,\n );\n\n const containerStyle = {\n height,\n width,\n };\n\n return h(\n \"div.map-view-container.main-view\",\n { ref: parentRef, className: parentClassName, style: containerStyle },\n [\n h(\"div.mapbox-map.map-view\", { ref, className: mapClassName, id }),\n h(MapLoadingReporter, {\n ignoredSources: loadingIgnoredSources,\n }),\n h(StyleLoadedReporter, { onStyleLoaded }),\n h(MapMovedReporter, { onMapMoved }),\n // Subsitute for trackResize: true that allows map resizing to\n // be tied to a specific ref component\n h.if(trackResize)(MapResizeManager, { containerRef: ref }),\n h(MapPaddingManager, {\n containerRef: ref,\n parentRef,\n infoMarkerPosition,\n }),\n h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),\n children,\n ],\n );\n}\n\nfunction StyleLoadedReporter({ onStyleLoaded = null }) {\n /* Check back every 0.1 seconds to see if the map has loaded.\n * We do it this way because mapboxgl loading events are unreliable */\n const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);\n const mapRef = useMapRef();\n const dispatch = useMapDispatch();\n\n useEffect(() => {\n if (isStyleLoaded) return;\n const interval = setInterval(() => {\n const map = mapRef.current;\n if (map == null) return;\n if (map.isStyleLoaded()) {\n // Wait a tick before setting the style loaded state\n dispatch({ type: \"set-style-loaded\", payload: true });\n onStyleLoaded?.(map);\n clearInterval(interval);\n }\n }, 50);\n return () => clearInterval(interval);\n }, [isStyleLoaded]);\n\n return null;\n}\n\nexport function MapTerrainManager({\n mapUse3D,\n terrainSourceID,\n}: {\n mapUse3D?: boolean;\n terrainSourceID?: string;\n style?: mapboxgl.StyleSpecification \| string;\n}) {\n use3DTerrain(mapUse3D, terrainSourceID);\n\n return null;\n}\n"],"names":["mapboxgl","setMapPosition","useEffect","useMapDispatch","useMapRef","useRef","useState","useMapStyleFragments","getMapPosition","mapViewInfo","mergeStyles","getTerrainLayerForStyle","map","getMapPadding","useAsyncEffect","getMapboxStyle","classNames","h","MapLoadingReporter","MapMovedReporter","MapResizeManager","MapPaddingManager","useMapStatus","use3DTerrain"],"mappings":"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"}

package/dist/map-view.d.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export interface MapViewProps extends MapboxCoreOptions {
     loadingIgnoredSources?: string[];
     id?: string;
     className?: string;
+    height: number;
+    width: number;
 }
 export interface MapboxOptionsExt extends MapboxCoreOptions {
     mapPosition?: MapPosition;
@@ -32,8 +34,12 @@ export interface MapboxOptionsExt extends MapboxCoreOptions {
 export declare function MapView(props: MapViewProps): import('react').ReactElement<{
     ref: React.MutableRefObject<HTMLDivElement>;
     className: string;
+    style: {
+        height: number;
+        width: number;
+    };
 }, string | import('react').JSXElementConstructor<any>>;
-export declare function MapTerrainManager({ mapUse3D, terrainSourceID, style, }: {
+export declare function MapTerrainManager({ mapUse3D, terrainSourceID, }: {
     mapUse3D?: boolean;
     terrainSourceID?: string;
     style?: mapboxgl.StyleSpecification | string;

package/dist/map-view.js CHANGED Viewed

@@ -1,15 +1,13 @@
-import h$1 from "@macrostrat/hyper";
-import { use3DTerrain, useMapDispatch, useMapRef, getTerrainLayerForStyle, useMapStatus } from "@macrostrat/mapbox-react";
+import { use3DTerrain, useMapDispatch, useMapRef, useMapStyleFragments, getTerrainLayerForStyle, useMapStatus } from "@macrostrat/mapbox-react";
 import { getMapPosition, mapViewInfo, mergeStyles, getMapboxStyle, setMapPosition } from "@macrostrat/mapbox-utils";
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
 import { useEffect, useRef, useState } from "react";
-import h$2 from "./main.module.sass.js";
+import h from "./main.module.sass.js";
 import { MapLoadingReporter, MapMovedReporter, MapResizeManager, MapPaddingManager } from "./helpers.js";
 /* empty css                             */
 import { getMapPadding } from "./utils.js";
 import { useAsyncEffect } from "@macrostrat/ui-components";
-const h = h$1.styled(h$2);
 function defaultInitializeMap(container, args = {}) {
   const { mapPosition, ...rest } = args;
   const map = new mapboxgl.Map({
@@ -42,8 +40,10 @@ const defaultMapPosition = {
 function MapView(props) {
   let { terrainSourceID } = props;
   const {
+    height,
+    width,
     enableTerrain = true,
-    style,
+    style = "mapbox://styles/mapbox/streets-v11",
     mapPosition,
     initializeMap = defaultInitializeMap,
     children,
@@ -61,13 +61,10 @@ function MapView(props) {
     transformStyle,
     trackResize = true,
     loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
-    id = "map",
+    id,
     className,
     ...rest
   } = props;
-  if (enableTerrain) {
-    terrainSourceID ??= "mapbox-3d-dem";
-  }
   useEffect(() => {
     if (id != null) {
       console.warn(
@@ -84,6 +81,7 @@ function MapView(props) {
   const ref = useRef();
   const parentRef = useRef();
   const [baseStyle, setBaseStyle] = useState(null);
+  const _ctxOverlayStyles = useMapStyleFragments();
   const estMapPosition = mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);
   const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);
   const is3DAvailable = (mapUse3D ?? false) && enableTerrain;
@@ -91,9 +89,9 @@ function MapView(props) {
     if (baseStyle == null) return;
     let map = mapRef.current;
     let newStyle = baseStyle;
-    const overlayStyles2 = props.overlayStyles ?? [];
-    if (overlayStyles2.length > 0) {
-      newStyle = mergeStyles(newStyle, ...overlayStyles2);
+    const _overlayStyles = overlayStyles ?? [];
+    if (_overlayStyles.length > 0 || _ctxOverlayStyles.length > 0) {
+      newStyle = mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);
     }
     if (is3DAvailable) {
       const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);
@@ -117,7 +115,7 @@ function MapView(props) {
       map2.setPadding(getMapPadding(ref, parentRef), { animate: false });
       onMapLoaded?.(map2);
     }
-  }, [baseStyle, overlayStyles, transformStyle]);
+  }, [baseStyle, overlayStyles, _ctxOverlayStyles, transformStyle]);
   useAsyncEffect(async () => {
     let newStyle;
     if (typeof style === "string") {
@@ -143,9 +141,13 @@ function MapView(props) {
     },
     className
   );
+  const containerStyle = {
+    height,
+    width
+  };
   return h(
     "div.map-view-container.main-view",
-    { ref: parentRef, className: parentClassName },
+    { ref: parentRef, className: parentClassName, style: containerStyle },
     [
       h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
       h(MapLoadingReporter, {
@@ -187,8 +189,7 @@ function StyleLoadedReporter({ onStyleLoaded = null }) {
 }
 function MapTerrainManager({
   mapUse3D,
-  terrainSourceID,
-  style
+  terrainSourceID
 }) {
   use3DTerrain(mapUse3D, terrainSourceID);
   return null;

package/dist/map-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"map-view.js","sources":["../src/map-view.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n useMapRef,\n useMapDispatch,\n use3DTerrain,\n getTerrainLayerForStyle,\n useMapStatus,\n} from \"@macrostrat/mapbox-react\";\nimport React from \"react\";\nimport {\n mapViewInfo,\n MapPosition,\n setMapPosition,\n getMapPosition,\n getMapboxStyle,\n mergeStyles,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useState } from \"react\";\nimport styles from \"./main.module.sass\";\nimport {\n MapLoadingReporter,\n MapMovedReporter,\n MapPaddingManager,\n MapResizeManager,\n} from \"./helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"./utils\";\nimport { useAsyncEffect } from \"@macrostrat/ui-components\";\n\nconst h = hyper.styled(styles);\n\ntype MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, \"container\">;\n\nexport interface MapViewProps extends MapboxCoreOptions {\n showLineSymbols?: boolean;\n children?: React.ReactNode;\n mapboxToken?: string;\n // Deprecated\n accessToken?: string;\n terrainSourceID?: string;\n enableTerrain?: boolean;\n infoMarkerPosition?: mapboxgl.LngLatLike;\n mapPosition?: MapPosition;\n initializeMap?: (\n container: HTMLElement,\n args: MapboxOptionsExt,\n ) => mapboxgl.Map;\n onMapLoaded?: (map: mapboxgl.Map) => void;\n onStyleLoaded?: (map: mapboxgl.Map) => void;\n onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;\n /** This map sets its own viewport, rather than being positioned by a parent.\n * This is a hack to ensure that the map can overflow its \"safe area\" when false /\n standalone?: boolean;\n /* Overlay styles to apply to the map: a list of mapbox style objects or fragments to\n * overlay on top of the main map style at runtime /\n overlayStyles?: Partial<mapboxgl.StyleSpecification>[];\n /* A function to transform the map style before it is loaded /\n transformStyle?: (\n style: mapboxgl.StyleSpecification,\n ) => mapboxgl.StyleSpecification;\n loadingIgnoredSources?: string[];\n id?: string;\n className?: string;\n}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n const { mapPosition, ...rest } = args;\n\n const map = new mapboxgl.Map({\n container,\n maxZoom: 18,\n logoPosition: \"bottom-left\",\n trackResize: false,\n antialias: true,\n // This is a legacy option for Mapbox GL v2\n // @ts-ignore\n optimizeForTerrain: true,\n ...rest,\n });\n\n let _mapPosition = mapPosition;\n if (_mapPosition == null && rest.center == null && rest.bounds == null) {\n // If no map positioning information is provided, we use the default\n _mapPosition = defaultMapPosition;\n }\n\n // set initial map position\n if (_mapPosition != null) {\n setMapPosition(map, _mapPosition);\n }\n\n return map;\n}\n\nconst defaultMapPosition: MapPosition = {\n camera: {\n lat: 34,\n lng: -120,\n altitude: 300000,\n },\n};\n\nexport function MapView(props: MapViewProps) {\n let { terrainSourceID } = props;\n const {\n enableTerrain = true,\n style,\n mapPosition,\n initializeMap = defaultInitializeMap,\n children,\n mapboxToken,\n // Deprecated\n accessToken,\n infoMarkerPosition,\n transformRequest,\n projection,\n onMapLoaded = null,\n onStyleLoaded = null,\n onMapMoved = null,\n standalone = false,\n overlayStyles,\n transformStyle,\n trackResize = true,\n loadingIgnoredSources = [\"elevationMarker\", \"crossSectionEndpoints\"],\n id = \"map\",\n className,\n ...rest\n } = props;\n if (enableTerrain) {\n terrainSourceID ??= \"mapbox-3d-dem\";\n }\n\n useEffect(() => {\n if (id != null) {\n console.warn(\n \"Setting a specific element ID for the map is deprecated. Please use className instead.\",\n );\n }\n }, [id]);\n\n const _mapboxToken = mapboxToken ?? accessToken;\n\n if (_mapboxToken != null) {\n mapboxgl.accessToken = _mapboxToken;\n }\n\n const dispatch = useMapDispatch();\n let mapRef = useMapRef();\n const ref = useRef<HTMLDivElement>();\n const parentRef = useRef<HTMLDivElement>();\n\n const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);\n\n const estMapPosition: MapPosition \| null =\n mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);\n const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);\n const is3DAvailable = (mapUse3D ?? false) && enableTerrain;\n\n useEffect(() => {\n /* Manager to update map style /\n if (baseStyle == null) return;\n let map = mapRef.current;\n\n let newStyle: mapboxgl.StyleSpecification = baseStyle;\n\n const overlayStyles = props.overlayStyles ?? [];\n\n if (overlayStyles.length > 0) {\n newStyle = mergeStyles(newStyle, ...overlayStyles);\n }\n\n /* If we can, we try to update the map style with terrain information\n * immediately, before the style is loaded. This allows us to avoid a\n * flash of the map without terrain.\n \n To do this, we need to estimate the map position before load, which\n * doesn't always work.\n /\n if (is3DAvailable) {\n // We can update the style with terrain layers immediately\n const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);\n newStyle = mergeStyles(newStyle, terrainStyle);\n }\n\n if (transformStyle != null) {\n newStyle = transformStyle(newStyle);\n }\n\n if (map != null) {\n dispatch({ type: \"set-style-loaded\", payload: false });\n map.setStyle(newStyle);\n } else {\n const map = initializeMap(ref.current, {\n style: newStyle,\n projection,\n mapPosition,\n transformRequest,\n ...rest,\n });\n dispatch({ type: \"set-map\", payload: map });\n map.setPadding(getMapPadding(ref, parentRef), { animate: false });\n onMapLoaded?.(map);\n }\n }, [baseStyle, overlayStyles, transformStyle]);\n\n useAsyncEffect(async () => {\n /* Manager to update map style /\n let newStyle: mapboxgl.StyleSpecification;\n if (typeof style === \"string\") {\n newStyle = await getMapboxStyle(style, {\n access_token: mapboxgl.accessToken,\n });\n } else {\n newStyle = style;\n }\n setBaseStyle(newStyle);\n }, [style]);\n\n // Get map projection\n const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n const mapClassName = classNames(\n {\n \"is-rotated\": mapIsRotated ?? false,\n \"is-3d-available\": is3DAvailable,\n },\n `${_projection}-projection`,\n );\n\n const parentClassName = classNames(\n {\n standalone,\n },\n className,\n );\n\n return h(\n \"div.map-view-container.main-view\",\n { ref: parentRef, className: parentClassName },\n [\n h(\"div.mapbox-map.map-view\", { ref, className: mapClassName, id }),\n h(MapLoadingReporter, {\n ignoredSources: loadingIgnoredSources,\n }),\n h(StyleLoadedReporter, { onStyleLoaded }),\n h(MapMovedReporter, { onMapMoved }),\n // Subsitute for trackResize: true that allows map resizing to\n // be tied to a specific ref component\n h.if(trackResize)(MapResizeManager, { containerRef: ref }),\n h(MapPaddingManager, {\n containerRef: ref,\n parentRef,\n infoMarkerPosition,\n }),\n h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),\n children,\n ],\n );\n}\n\nfunction StyleLoadedReporter({ onStyleLoaded = null }) {\n /* Check back every 0.1 seconds to see if the map has loaded.\n * We do it this way because mapboxgl loading events are unreliable */\n const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);\n const mapRef = useMapRef();\n const dispatch = useMapDispatch();\n\n useEffect(() => {\n if (isStyleLoaded) return;\n const interval = setInterval(() => {\n const map = mapRef.current;\n if (map == null) return;\n if (map.isStyleLoaded()) {\n // Wait a tick before setting the style loaded state\n dispatch({ type: \"set-style-loaded\", payload: true });\n onStyleLoaded?.(map);\n clearInterval(interval);\n }\n }, 50);\n return () => clearInterval(interval);\n }, [isStyleLoaded]);\n\n return null;\n}\n\nexport function MapTerrainManager({\n mapUse3D,\n terrainSourceID,\n style,\n}: {\n mapUse3D?: boolean;\n terrainSourceID?: string;\n style?: mapboxgl.StyleSpecification \| string;\n}) {\n use3DTerrain(mapUse3D, terrainSourceID);\n\n return null;\n}\n"],"names":["hyper","styles","overlayStyles","map"],"mappings":"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"}
1	+ {"version":3,"file":"map-view.js","sources":["../src/map-view.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n useMapRef,\n useMapDispatch,\n use3DTerrain,\n getTerrainLayerForStyle,\n useMapStatus,\n useMapStyleFragments,\n} from \"@macrostrat/mapbox-react\";\nimport React from \"react\";\nimport {\n mapViewInfo,\n MapPosition,\n setMapPosition,\n getMapPosition,\n getMapboxStyle,\n mergeStyles,\n} from \"@macrostrat/mapbox-utils\";\nimport classNames from \"classnames\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useEffect, useRef, useState } from \"react\";\nimport h from \"./main.module.sass\";\nimport {\n MapLoadingReporter,\n MapMovedReporter,\n MapPaddingManager,\n MapResizeManager,\n} from \"./helpers\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport { getMapPadding } from \"./utils\";\nimport { useAsyncEffect } from \"@macrostrat/ui-components\";\n\ntype MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, \"container\">;\n\nexport interface MapViewProps extends MapboxCoreOptions {\n showLineSymbols?: boolean;\n children?: React.ReactNode;\n mapboxToken?: string;\n // Deprecated\n accessToken?: string;\n terrainSourceID?: string;\n enableTerrain?: boolean;\n infoMarkerPosition?: mapboxgl.LngLatLike;\n mapPosition?: MapPosition;\n initializeMap?: (\n container: HTMLElement,\n args: MapboxOptionsExt,\n ) => mapboxgl.Map;\n onMapLoaded?: (map: mapboxgl.Map) => void;\n onStyleLoaded?: (map: mapboxgl.Map) => void;\n onMapMoved?: (mapPosition: MapPosition, map: mapboxgl.Map) => void;\n /** This map sets its own viewport, rather than being positioned by a parent.\n * This is a hack to ensure that the map can overflow its \"safe area\" when false /\n standalone?: boolean;\n /* Overlay styles to apply to the map: a list of mapbox style objects or fragments to\n * overlay on top of the main map style at runtime /\n overlayStyles?: Partial<mapboxgl.StyleSpecification>[];\n /* A function to transform the map style before it is loaded /\n transformStyle?: (\n style: mapboxgl.StyleSpecification,\n ) => mapboxgl.StyleSpecification;\n loadingIgnoredSources?: string[];\n id?: string;\n className?: string;\n height: number;\n width: number;\n}\n\nexport interface MapboxOptionsExt extends MapboxCoreOptions {\n mapPosition?: MapPosition;\n}\n\nfunction defaultInitializeMap(container, args: MapboxOptionsExt = {}) {\n const { mapPosition, ...rest } = args;\n\n const map = new mapboxgl.Map({\n container,\n maxZoom: 18,\n logoPosition: \"bottom-left\",\n trackResize: false,\n antialias: true,\n // This is a legacy option for Mapbox GL v2\n // @ts-ignore\n optimizeForTerrain: true,\n ...rest,\n });\n\n let _mapPosition = mapPosition;\n if (_mapPosition == null && rest.center == null && rest.bounds == null) {\n // If no map positioning information is provided, we use the default\n _mapPosition = defaultMapPosition;\n }\n\n // set initial map position\n if (_mapPosition != null) {\n setMapPosition(map, _mapPosition);\n }\n\n return map;\n}\n\nconst defaultMapPosition: MapPosition = {\n camera: {\n lat: 34,\n lng: -120,\n altitude: 300000,\n },\n};\n\nexport function MapView(props: MapViewProps) {\n let { terrainSourceID } = props;\n const {\n height,\n width,\n enableTerrain = true,\n style = \"mapbox://styles/mapbox/streets-v11\",\n mapPosition,\n initializeMap = defaultInitializeMap,\n children,\n mapboxToken,\n // Deprecated\n accessToken,\n infoMarkerPosition,\n transformRequest,\n projection,\n onMapLoaded = null,\n onStyleLoaded = null,\n onMapMoved = null,\n standalone = false,\n overlayStyles,\n transformStyle,\n trackResize = true,\n loadingIgnoredSources = [\"elevationMarker\", \"crossSectionEndpoints\"],\n id,\n className,\n ...rest\n } = props;\n\n useEffect(() => {\n if (id != null) {\n console.warn(\n \"Setting a specific element ID for the map is deprecated. Please use className instead.\",\n );\n }\n }, [id]);\n\n const _mapboxToken = mapboxToken ?? accessToken;\n\n if (_mapboxToken != null) {\n mapboxgl.accessToken = _mapboxToken;\n }\n\n const dispatch = useMapDispatch();\n let mapRef = useMapRef();\n const ref = useRef<HTMLDivElement>();\n const parentRef = useRef<HTMLDivElement>();\n\n const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);\n\n /* Get overlay styles from map context. These are added after the base style is loaded, and can be used\n * to add layers to the map at runtime, even after initialization. They are merged with any overlay styles\n * passed in as props.\n /\n const _ctxOverlayStyles = useMapStyleFragments() as any[];\n\n const estMapPosition: MapPosition \| null =\n mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);\n const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);\n const is3DAvailable = (mapUse3D ?? false) && enableTerrain;\n\n useEffect(() => {\n /* Manager to update map style /\n if (baseStyle == null) return;\n let map = mapRef.current;\n\n let newStyle: mapboxgl.StyleSpecification = baseStyle;\n\n const _overlayStyles = overlayStyles ?? [];\n\n if (_overlayStyles.length > 0 \|\| _ctxOverlayStyles.length > 0) {\n newStyle = mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);\n }\n\n /* If we can, we try to update the map style with terrain information\n * immediately, before the style is loaded. This allows us to avoid a\n * flash of the map without terrain.\n \n To do this, we need to estimate the map position before load, which\n * doesn't always work.\n /\n if (is3DAvailable) {\n // We can update the style with terrain layers immediately\n const terrainStyle = getTerrainLayerForStyle(newStyle, terrainSourceID);\n newStyle = mergeStyles(newStyle, terrainStyle);\n }\n\n if (transformStyle != null) {\n newStyle = transformStyle(newStyle);\n }\n\n if (map != null) {\n dispatch({ type: \"set-style-loaded\", payload: false });\n map.setStyle(newStyle);\n } else {\n const map = initializeMap(ref.current, {\n style: newStyle,\n projection,\n mapPosition,\n transformRequest,\n ...rest,\n });\n dispatch({ type: \"set-map\", payload: map });\n map.setPadding(getMapPadding(ref, parentRef), { animate: false });\n onMapLoaded?.(map);\n }\n }, [baseStyle, overlayStyles, _ctxOverlayStyles, transformStyle]);\n\n useAsyncEffect(async () => {\n /* Manager to update map style /\n let newStyle: mapboxgl.StyleSpecification;\n if (typeof style === \"string\") {\n newStyle = await getMapboxStyle(style, {\n access_token: mapboxgl.accessToken,\n });\n } else {\n newStyle = style;\n }\n setBaseStyle(newStyle);\n }, [style]);\n\n // Get map projection\n const _projection = mapRef.current?.getProjection()?.name ?? \"mercator\";\n\n const mapClassName = classNames(\n {\n \"is-rotated\": mapIsRotated ?? false,\n \"is-3d-available\": is3DAvailable,\n },\n `${_projection}-projection`,\n );\n\n const parentClassName = classNames(\n {\n standalone,\n },\n className,\n );\n\n const containerStyle = {\n height,\n width,\n };\n\n return h(\n \"div.map-view-container.main-view\",\n { ref: parentRef, className: parentClassName, style: containerStyle },\n [\n h(\"div.mapbox-map.map-view\", { ref, className: mapClassName, id }),\n h(MapLoadingReporter, {\n ignoredSources: loadingIgnoredSources,\n }),\n h(StyleLoadedReporter, { onStyleLoaded }),\n h(MapMovedReporter, { onMapMoved }),\n // Subsitute for trackResize: true that allows map resizing to\n // be tied to a specific ref component\n h.if(trackResize)(MapResizeManager, { containerRef: ref }),\n h(MapPaddingManager, {\n containerRef: ref,\n parentRef,\n infoMarkerPosition,\n }),\n h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),\n children,\n ],\n );\n}\n\nfunction StyleLoadedReporter({ onStyleLoaded = null }) {\n /* Check back every 0.1 seconds to see if the map has loaded.\n * We do it this way because mapboxgl loading events are unreliable */\n const isStyleLoaded = useMapStatus((state) => state.isStyleLoaded);\n const mapRef = useMapRef();\n const dispatch = useMapDispatch();\n\n useEffect(() => {\n if (isStyleLoaded) return;\n const interval = setInterval(() => {\n const map = mapRef.current;\n if (map == null) return;\n if (map.isStyleLoaded()) {\n // Wait a tick before setting the style loaded state\n dispatch({ type: \"set-style-loaded\", payload: true });\n onStyleLoaded?.(map);\n clearInterval(interval);\n }\n }, 50);\n return () => clearInterval(interval);\n }, [isStyleLoaded]);\n\n return null;\n}\n\nexport function MapTerrainManager({\n mapUse3D,\n terrainSourceID,\n}: {\n mapUse3D?: boolean;\n terrainSourceID?: string;\n style?: mapboxgl.StyleSpecification \| string;\n}) {\n use3DTerrain(mapUse3D, terrainSourceID);\n\n return null;\n}\n"],"names":["map"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Map interface for Macrostrat",
   "repository": {
     "type": "git",
@@ -48,11 +48,10 @@
   "dependencies": {
     "@blueprintjs/core": "^6.6.1",
     "@macrostrat/color-utils": "^1.2.1",
-    "@macrostrat/data-components": "^1.1.2",
+    "@macrostrat/data-components": "^1.1.3",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "2.1.0",
-    "@macrostrat/mapbox-react": "^3.0.2",
-    "@macrostrat/mapbox-utils": "^1.7.2",
+    "@macrostrat/mapbox-react": "^3.1.1",
+    "@macrostrat/mapbox-utils": "^1.7.3",
     "@macrostrat/ui-components": "^5.0.5",
     "@mapbox/tilebelt": "^2.0.0",
     "@visx/axis": "^3.12.0",

package/src/map-view.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import {
   use3DTerrain,
   getTerrainLayerForStyle,
   useMapStatus,
+  useMapStyleFragments,
 } from "@macrostrat/mapbox-react";
 import React from "react";
 import {
@@ -18,7 +19,7 @@ import {
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
 import { useEffect, useRef, useState } from "react";
-import styles from "./main.module.sass";
+import h from "./main.module.sass";
 import {
   MapLoadingReporter,
   MapMovedReporter,
@@ -29,8 +30,6 @@ import "mapbox-gl/dist/mapbox-gl.css";
 import { getMapPadding } from "./utils";
 import { useAsyncEffect } from "@macrostrat/ui-components";
-const h = hyper.styled(styles);
 type MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, "container">;
 export interface MapViewProps extends MapboxCoreOptions {
@@ -63,6 +62,8 @@ export interface MapViewProps extends MapboxCoreOptions {
   loadingIgnoredSources?: string[];
   id?: string;
   className?: string;
+  height: number;
+  width: number;
 }
 export interface MapboxOptionsExt extends MapboxCoreOptions {
@@ -109,8 +110,10 @@ const defaultMapPosition: MapPosition = {
 export function MapView(props: MapViewProps) {
   let { terrainSourceID } = props;
   const {
+    height,
+    width,
     enableTerrain = true,
-    style,
+    style = "mapbox://styles/mapbox/streets-v11",
     mapPosition,
     initializeMap = defaultInitializeMap,
     children,
@@ -128,13 +131,10 @@ export function MapView(props: MapViewProps) {
     transformStyle,
     trackResize = true,
     loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
-    id = "map",
+    id,
     className,
     ...rest
   } = props;
-  if (enableTerrain) {
-    terrainSourceID ??= "mapbox-3d-dem";
-  }
   useEffect(() => {
     if (id != null) {
@@ -157,6 +157,12 @@ export function MapView(props: MapViewProps) {
   const [baseStyle, setBaseStyle] = useState<mapboxgl.Style>(null);
+  /** Get overlay styles from map context. These are added after the base style is loaded, and can be used
+   * to add layers to the map at runtime, even after initialization. They are merged with any overlay styles
+   * passed in as props.
+   */
+  const _ctxOverlayStyles = useMapStyleFragments() as any[];
   const estMapPosition: MapPosition | null =
     mapRef.current == null ? mapPosition : getMapPosition(mapRef.current);
   const { mapUse3D, mapIsRotated } = mapViewInfo(estMapPosition);
@@ -169,10 +175,10 @@ export function MapView(props: MapViewProps) {
     let newStyle: mapboxgl.StyleSpecification = baseStyle;
-    const overlayStyles = props.overlayStyles ?? [];
+    const _overlayStyles = overlayStyles ?? [];
-    if (overlayStyles.length > 0) {
-      newStyle = mergeStyles(newStyle, ...overlayStyles);
+    if (_overlayStyles.length > 0 || _ctxOverlayStyles.length > 0) {
+      newStyle = mergeStyles(newStyle, ..._overlayStyles, ..._ctxOverlayStyles);
     }
     /** If we can, we try to update the map style with terrain information
@@ -207,7 +213,7 @@ export function MapView(props: MapViewProps) {
       map.setPadding(getMapPadding(ref, parentRef), { animate: false });
       onMapLoaded?.(map);
     }
-  }, [baseStyle, overlayStyles, transformStyle]);
+  }, [baseStyle, overlayStyles, _ctxOverlayStyles, transformStyle]);
   useAsyncEffect(async () => {
     /** Manager to update map style */
@@ -240,9 +246,14 @@ export function MapView(props: MapViewProps) {
     className,
   );
+  const containerStyle = {
+    height,
+    width,
+  };
   return h(
     "div.map-view-container.main-view",
-    { ref: parentRef, className: parentClassName },
+    { ref: parentRef, className: parentClassName, style: containerStyle },
     [
       h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
       h(MapLoadingReporter, {
@@ -292,7 +303,6 @@ function StyleLoadedReporter({ onStyleLoaded = null }) {
 export function MapTerrainManager({
   mapUse3D,
   terrainSourceID,
-  style,
 }: {
   mapUse3D?: boolean;
   terrainSourceID?: string;