@macrostrat/map-interface 2.2.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
  1. package/CHANGELOG.md +7 -0
  2. package/dist/map-view.cjs +17 -14
  3. package/dist/map-view.cjs.map +1 -1
  4. package/dist/map-view.d.ts +6 -0
  5. package/dist/map-view.js +10 -6
  6. package/dist/map-view.js.map +1 -1
  7. package/package.json +3 -3
  8. package/src/map-view.ts +13 -6
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. The format
4
4
  is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
5
5
  project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## [2.2.1] - 2026-02-13
8
+
9
+ - Add `width` and `height` props to `MapView`
10
+ - Add a default `style` to `MapView` (Mapbox Streets)
11
+ - Don't set `id` property by default on `MapView`
12
+ - New stories for `MapView`
13
+
7
14
  ## [2.2.0] - 2026-02-13
8
15
 
9
16
  - Add internal logic to `MapView` to manage the addition of custom style
package/dist/map-view.cjs CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const h$1 = require("@macrostrat/hyper");
4
3
  const mapboxReact = require("@macrostrat/mapbox-react");
5
4
  const mapboxUtils = require("@macrostrat/mapbox-utils");
6
5
  const classNames = require("classnames");
@@ -12,10 +11,8 @@ const helpers = require("./helpers.cjs");
12
11
  const utils = require("./utils.cjs");
13
12
  const uiComponents = require("@macrostrat/ui-components");
14
13
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
15
- const h__default = /* @__PURE__ */ _interopDefault(h$1);
16
14
  const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
17
15
  const mapboxgl__default = /* @__PURE__ */ _interopDefault(mapboxgl);
18
- const h = h__default.default.styled(main_module.default);
19
16
  function defaultInitializeMap(container, args = {}) {
20
17
  const { mapPosition, ...rest } = args;
21
18
  const map = new mapboxgl__default.default.Map({
@@ -48,8 +45,10 @@ const defaultMapPosition = {
48
45
  function MapView(props) {
49
46
  let { terrainSourceID } = props;
50
47
  const {
48
+ height,
49
+ width,
51
50
  enableTerrain = true,
52
- style,
51
+ style = "mapbox://styles/mapbox/streets-v11",
53
52
  mapPosition,
54
53
  initializeMap = defaultInitializeMap,
55
54
  children,
@@ -67,7 +66,7 @@ function MapView(props) {
67
66
  transformStyle,
68
67
  trackResize = true,
69
68
  loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
70
- id = "map",
69
+ id,
71
70
  className,
72
71
  ...rest
73
72
  } = props;
@@ -147,25 +146,29 @@ function MapView(props) {
147
146
  },
148
147
  className
149
148
  );
150
- return h(
149
+ const containerStyle = {
150
+ height,
151
+ width
152
+ };
153
+ return main_module.default(
151
154
  "div.map-view-container.main-view",
152
- { ref: parentRef, className: parentClassName },
155
+ { ref: parentRef, className: parentClassName, style: containerStyle },
153
156
  [
154
- h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
155
- h(helpers.MapLoadingReporter, {
157
+ main_module.default("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
158
+ main_module.default(helpers.MapLoadingReporter, {
156
159
  ignoredSources: loadingIgnoredSources
157
160
  }),
158
- h(StyleLoadedReporter, { onStyleLoaded }),
159
- h(helpers.MapMovedReporter, { onMapMoved }),
161
+ main_module.default(StyleLoadedReporter, { onStyleLoaded }),
162
+ main_module.default(helpers.MapMovedReporter, { onMapMoved }),
160
163
  // Subsitute for trackResize: true that allows map resizing to
161
164
  // be tied to a specific ref component
162
- h.if(trackResize)(helpers.MapResizeManager, { containerRef: ref }),
163
- h(helpers.MapPaddingManager, {
165
+ main_module.default.if(trackResize)(helpers.MapResizeManager, { containerRef: ref }),
166
+ main_module.default(helpers.MapPaddingManager, {
164
167
  containerRef: ref,
165
168
  parentRef,
166
169
  infoMarkerPosition
167
170
  }),
168
- h(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),
171
+ main_module.default(MapTerrainManager, { mapUse3D: is3DAvailable, terrainSourceID, style }),
169
172
  children
170
173
  ]
171
174
  );
package/dist/map-view.cjs.map CHANGED
@@ -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 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 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\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 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}: {\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","useMapStyleFragments","getMapPosition","mapViewInfo","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
@@ -25,6 +25,8 @@ export interface MapViewProps extends MapboxCoreOptions {
25
25
  loadingIgnoredSources?: string[];
26
26
  id?: string;
27
27
  className?: string;
28
+ height: number;
29
+ width: number;
28
30
  }
29
31
  export interface MapboxOptionsExt extends MapboxCoreOptions {
30
32
  mapPosition?: MapPosition;
@@ -32,6 +34,10 @@ export interface MapboxOptionsExt extends MapboxCoreOptions {
32
34
  export declare function MapView(props: MapViewProps): import('react').ReactElement<{
33
35
  ref: React.MutableRefObject<HTMLDivElement>;
34
36
  className: string;
37
+ style: {
38
+ height: number;
39
+ width: number;
40
+ };
35
41
  }, string | import('react').JSXElementConstructor<any>>;
36
42
  export declare function MapTerrainManager({ mapUse3D, terrainSourceID, }: {
37
43
  mapUse3D?: boolean;
package/dist/map-view.js CHANGED
@@ -1,15 +1,13 @@
1
- import h$1 from "@macrostrat/hyper";
2
1
  import { use3DTerrain, useMapDispatch, useMapRef, useMapStyleFragments, getTerrainLayerForStyle, useMapStatus } from "@macrostrat/mapbox-react";
3
2
  import { getMapPosition, mapViewInfo, mergeStyles, getMapboxStyle, setMapPosition } from "@macrostrat/mapbox-utils";
4
3
  import classNames from "classnames";
5
4
  import mapboxgl from "mapbox-gl";
6
5
  import { useEffect, useRef, useState } from "react";
7
- import h$2 from "./main.module.sass.js";
6
+ import h from "./main.module.sass.js";
8
7
  import { MapLoadingReporter, MapMovedReporter, MapResizeManager, MapPaddingManager } from "./helpers.js";
9
8
  /* empty css */
10
9
  import { getMapPadding } from "./utils.js";
11
10
  import { useAsyncEffect } from "@macrostrat/ui-components";
12
- const h = h$1.styled(h$2);
13
11
  function defaultInitializeMap(container, args = {}) {
14
12
  const { mapPosition, ...rest } = args;
15
13
  const map = new mapboxgl.Map({
@@ -42,8 +40,10 @@ const defaultMapPosition = {
42
40
  function MapView(props) {
43
41
  let { terrainSourceID } = props;
44
42
  const {
43
+ height,
44
+ width,
45
45
  enableTerrain = true,
46
- style,
46
+ style = "mapbox://styles/mapbox/streets-v11",
47
47
  mapPosition,
48
48
  initializeMap = defaultInitializeMap,
49
49
  children,
@@ -61,7 +61,7 @@ function MapView(props) {
61
61
  transformStyle,
62
62
  trackResize = true,
63
63
  loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
64
- id = "map",
64
+ id,
65
65
  className,
66
66
  ...rest
67
67
  } = props;
@@ -141,9 +141,13 @@ function MapView(props) {
141
141
  },
142
142
  className
143
143
  );
144
+ const containerStyle = {
145
+ height,
146
+ width
147
+ };
144
148
  return h(
145
149
  "div.map-view-container.main-view",
146
- { ref: parentRef, className: parentClassName },
150
+ { ref: parentRef, className: parentClassName, style: containerStyle },
147
151
  [
148
152
  h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
149
153
  h(MapLoadingReporter, {
package/dist/map-view.js.map CHANGED
@@ -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 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 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\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 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}: {\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","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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@macrostrat/map-interface",
3
- "version": "2.2.0",
3
+ "version": "2.2.1",
4
4
  "description": "Map interface for Macrostrat",
5
5
  "repository": {
6
6
  "type": "git",
@@ -50,8 +50,8 @@
50
50
  "@macrostrat/color-utils": "^1.2.1",
51
51
  "@macrostrat/data-components": "^1.1.3",
52
52
  "@macrostrat/hyper": "^3.0.6",
53
- "@macrostrat/mapbox-react": "^3.1.0",
54
- "@macrostrat/mapbox-utils": "^1.7.2",
53
+ "@macrostrat/mapbox-react": "^3.1.1",
54
+ "@macrostrat/mapbox-utils": "^1.7.3",
55
55
  "@macrostrat/ui-components": "^5.0.5",
56
56
  "@mapbox/tilebelt": "^2.0.0",
57
57
  "@visx/axis": "^3.12.0",
package/src/map-view.ts CHANGED
@@ -19,7 +19,7 @@ import {
19
19
  import classNames from "classnames";
20
20
  import mapboxgl from "mapbox-gl";
21
21
  import { useEffect, useRef, useState } from "react";
22
- import styles from "./main.module.sass";
22
+ import h from "./main.module.sass";
23
23
  import {
24
24
  MapLoadingReporter,
25
25
  MapMovedReporter,
@@ -30,8 +30,6 @@ import "mapbox-gl/dist/mapbox-gl.css";
30
30
  import { getMapPadding } from "./utils";
31
31
  import { useAsyncEffect } from "@macrostrat/ui-components";
32
32
 
33
- const h = hyper.styled(styles);
34
-
35
33
  type MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, "container">;
36
34
 
37
35
  export interface MapViewProps extends MapboxCoreOptions {
@@ -64,6 +62,8 @@ export interface MapViewProps extends MapboxCoreOptions {
64
62
  loadingIgnoredSources?: string[];
65
63
  id?: string;
66
64
  className?: string;
65
+ height: number;
66
+ width: number;
67
67
  }
68
68
 
69
69
  export interface MapboxOptionsExt extends MapboxCoreOptions {
@@ -110,8 +110,10 @@ const defaultMapPosition: MapPosition = {
110
110
  export function MapView(props: MapViewProps) {
111
111
  let { terrainSourceID } = props;
112
112
  const {
113
+ height,
114
+ width,
113
115
  enableTerrain = true,
114
- style,
116
+ style = "mapbox://styles/mapbox/streets-v11",
115
117
  mapPosition,
116
118
  initializeMap = defaultInitializeMap,
117
119
  children,
@@ -129,7 +131,7 @@ export function MapView(props: MapViewProps) {
129
131
  transformStyle,
130
132
  trackResize = true,
131
133
  loadingIgnoredSources = ["elevationMarker", "crossSectionEndpoints"],
132
- id = "map",
134
+ id,
133
135
  className,
134
136
  ...rest
135
137
  } = props;
@@ -244,9 +246,14 @@ export function MapView(props: MapViewProps) {
244
246
  className,
245
247
  );
246
248
 
249
+ const containerStyle = {
250
+ height,
251
+ width,
252
+ };
253
+
247
254
  return h(
248
255
  "div.map-view-container.main-view",
249
- { ref: parentRef, className: parentClassName },
256
+ { ref: parentRef, className: parentClassName, style: containerStyle },
250
257
  [
251
258
  h("div.mapbox-map.map-view", { ref, className: mapClassName, id }),
252
259
  h(MapLoadingReporter, {