@macrostrat/map-interface 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2025-07-02
+
+- Allow `DevMapPage` to set more options for the map, inherited from Mapbox GL
+  map options
+- Streamline map position management during initialization
+- Fix stuck loading spinner at map initialization
+- Add new stories for position management
+- Make `enableTerrain: false` work correctly
+- Improve options for map view styling, by allowing the `className` to be set
+  and deprecating the auto setting of `#map` ID on the map view.
+
+## [1.3.2] - 2025-06-26
+
+Bugfix for DevMapPage when applying custom styles
+
 ## [1.3.1] - 2025-06-25
 
 Small improvements to types and styles

package/dist/cjs/index.js

@@ -1,10 +1,10 @@
 var $fce5fc950d1fe35b$exports = require("./map-interface.0e252a74.js");
-var $2bc7c1e4e7da7fdf$exports = require("./map-interface.3934d6d6.js");
-var $9acbb47bf7cb7660$exports = require("./map-interface.5cea0ff4.js");
+var $2bc7c1e4e7da7fdf$exports = require("./map-interface.10d442f4.js");
+var $9acbb47bf7cb7660$exports = require("./map-interface.3bc4f731.js");
 var $c3311f59335df34d$exports = require("./map-interface.bda26b27.js");
-var $493deb9ab6b848e3$exports = require("./map-interface.e7194f92.js");
+var $493deb9ab6b848e3$exports = require("./map-interface.7bdbe4b6.js");
 var $f333fe6f49373ca9$exports = require("./map-interface.99a048dc.js");
-var $2611a7b4364593e5$exports = require("./map-interface.5813e876.js");
+var $2611a7b4364593e5$exports = require("./map-interface.cf6c9a68.js");
 var $3490fc4f4bda12f7$exports = require("./map-interface.ffb109ef.js");
 var $860d9939f7032c69$exports = require("./map-interface.64823b7c.js");
 var $750d69d73bfbdc9a$exports = require("./map-interface.354aaa39.js");

package/dist/cjs/{map-interface.3934d6d6.js → map-interface.10d442f4.js}

@@ -1,4 +1,4 @@
-var $548387e5996cdbbd$exports = require("./map-interface.1d19056e.js");
+var $548387e5996cdbbd$exports = require("./map-interface.dcbd3874.js");
 require("./map-interface.1b386e07.css");
 var $a8d7c4c397e52cf6$exports = require("./map-interface.cd485bb4.js");
 var $c3311f59335df34d$exports = require("./map-interface.bda26b27.js");
@@ -63,4 +63,4 @@ function $2bc7c1e4e7da7fdf$export$aa4baff5242ea6e1(props) {
 }
 
 
-//# sourceMappingURL=map-interface.3934d6d6.js.map
+//# sourceMappingURL=map-interface.10d442f4.js.map

package/dist/cjs/{map-interface.3934d6d6.js.map → map-interface.10d442f4.js.map}

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAErB,SAAS,0CAAoB,KAAK;IACvC,MAAM,YAAY,CAAA,GAAA,2CAAS,EAAE,cAAc,MAAM,SAAS;IAC1D,OAAO,wBAAE,CAAA,GAAA,mCAAQ,GAAG;QAAE,GAAG,KAAK;mBAAE;IAAU;AAC5C;AAYO,SAAS,0CAAe,KAA0B;IACvD,MAAM,aACJ,SAAS,iBACT,gBAAgB,aAChB,KAAK,WACL,OAAO,YACP,QAAQ,oBACR,mBAAmB,2BACnB,GAAG,MACJ,GAAG;IACJ,MAAM,SACJ,iBACA,wBAAE,CAAA,GAAA,0CAAe,GAAG;iBAAE;QAAS,GAAG,IAAI;IAAC,GAAG;QACxC,SAAS,OAAO,OAAO,wBAAE,MAAM;YAAC;SAAM;KACvC;IACH,OAAO,wBAAE,2CAAqB;mBAAE;IAAU,GAAG;QAC3C;QACA,wBAAE,uBAAuB,wBAAE,CAAA,GAAA,2CAAY,GAAG,wBAAE,kBAAkB;KAC/D;AACH;AAEO,MAAM,4CAAe;AAErB,SAAS,0CAAc,KAAK;IACjC,MAAM,YAAE,QAAQ,aAAE,SAAS,WAAE,UAAU,OAAO,GAAG,MAAM,GAAG;IAC1D,MAAM,MAAM,CAAA,GAAA,2CAAS,EAAE,kBAAkB,WAAW;iBAAE;IAAQ;IAC9D,OAAO,wBAAE,2CAAgB;QAAE,WAAW;QAAK,GAAG,IAAI;IAAC,GAAG;AACxD","sources":["packages/map-interface/src/location-panel/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { InfoDrawerHeader, InfoDrawerHeaderProps } from \"./header\";\nimport classNames from \"classnames\";\nimport styles from \"./main.module.sass\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { PanelCard } from \"../container\";\nimport { ComponentType } from \"react\";\n\nconst h = hyper.styled(styles);\n\nexport function InfoDrawerContainer(props) {\n  const className = classNames(\"infodrawer\", props.className);\n  return h(PanelCard, { ...props, className });\n}\n\ntype Component = string | ComponentType<any>;\n\ninterface BaseInfoDrawerProps extends InfoDrawerHeaderProps {\n  className?: string;\n  title?: string;\n  headerElement?: JSX.Element;\n  children?: React.ReactNode;\n  contentContainer?: Component;\n}\n\nexport function BaseInfoDrawer(props: BaseInfoDrawerProps) {\n  const {\n    className,\n    headerElement = null,\n    title,\n    onClose,\n    children,\n    contentContainer = \"div.infodrawer-contents\",\n    ...rest\n  } = props;\n  const header =\n    headerElement ??\n    h(InfoDrawerHeader, { onClose, ...rest }, [\n      title == null ? null : h(\"h3\", [title]),\n    ]);\n  return h(InfoDrawerContainer, { className }, [\n    header,\n    h(\"div.infodrawer-body\", h(ErrorBoundary, h(contentContainer, children))),\n  ]);\n}\n\nexport const DetailsPanel = BaseInfoDrawer;\n\nexport function LocationPanel(props) {\n  const { children, className, loading = false, ...rest } = props;\n  const cls = classNames(\"location-panel\", className, { loading });\n  return h(BaseInfoDrawer, { className: cls, ...rest }, children);\n}\n"],"names":[],"version":3,"file":"map-interface.3934d6d6.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAErB,SAAS,0CAAoB,KAAK;IACvC,MAAM,YAAY,CAAA,GAAA,2CAAS,EAAE,cAAc,MAAM,SAAS;IAC1D,OAAO,wBAAE,CAAA,GAAA,mCAAQ,GAAG;QAAE,GAAG,KAAK;mBAAE;IAAU;AAC5C;AAYO,SAAS,0CAAe,KAA0B;IACvD,MAAM,aACJ,SAAS,iBACT,gBAAgB,aAChB,KAAK,WACL,OAAO,YACP,QAAQ,oBACR,mBAAmB,2BACnB,GAAG,MACJ,GAAG;IACJ,MAAM,SACJ,iBACA,wBAAE,CAAA,GAAA,0CAAe,GAAG;iBAAE;QAAS,GAAG,IAAI;IAAC,GAAG;QACxC,SAAS,OAAO,OAAO,wBAAE,MAAM;YAAC;SAAM;KACvC;IACH,OAAO,wBAAE,2CAAqB;mBAAE;IAAU,GAAG;QAC3C;QACA,wBAAE,uBAAuB,wBAAE,CAAA,GAAA,2CAAY,GAAG,wBAAE,kBAAkB;KAC/D;AACH;AAEO,MAAM,4CAAe;AAErB,SAAS,0CAAc,KAAK;IACjC,MAAM,YAAE,QAAQ,aAAE,SAAS,WAAE,UAAU,OAAO,GAAG,MAAM,GAAG;IAC1D,MAAM,MAAM,CAAA,GAAA,2CAAS,EAAE,kBAAkB,WAAW;iBAAE;IAAQ;IAC9D,OAAO,wBAAE,2CAAgB;QAAE,WAAW;QAAK,GAAG,IAAI;IAAC,GAAG;AACxD","sources":["packages/map-interface/src/location-panel/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { InfoDrawerHeader, InfoDrawerHeaderProps } from \"./header\";\nimport classNames from \"classnames\";\nimport styles from \"./main.module.sass\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { PanelCard } from \"../container\";\nimport { ComponentType } from \"react\";\n\nconst h = hyper.styled(styles);\n\nexport function InfoDrawerContainer(props) {\n  const className = classNames(\"infodrawer\", props.className);\n  return h(PanelCard, { ...props, className });\n}\n\ntype Component = string | ComponentType<any>;\n\ninterface BaseInfoDrawerProps extends InfoDrawerHeaderProps {\n  className?: string;\n  title?: string;\n  headerElement?: JSX.Element;\n  children?: React.ReactNode;\n  contentContainer?: Component;\n}\n\nexport function BaseInfoDrawer(props: BaseInfoDrawerProps) {\n  const {\n    className,\n    headerElement = null,\n    title,\n    onClose,\n    children,\n    contentContainer = \"div.infodrawer-contents\",\n    ...rest\n  } = props;\n  const header =\n    headerElement ??\n    h(InfoDrawerHeader, { onClose, ...rest }, [\n      title == null ? null : h(\"h3\", [title]),\n    ]);\n  return h(InfoDrawerContainer, { className }, [\n    header,\n    h(\"div.infodrawer-body\", h(ErrorBoundary, h(contentContainer, children))),\n  ]);\n}\n\nexport const DetailsPanel = BaseInfoDrawer;\n\nexport function LocationPanel(props) {\n  const { children, className, loading = false, ...rest } = props;\n  const cls = classNames(\"location-panel\", className, { loading });\n  return h(BaseInfoDrawer, { className: cls, ...rest }, children);\n}\n"],"names":[],"version":3,"file":"map-interface.10d442f4.js.map"}

package/dist/cjs/{map-interface.17e81e8a.js → map-interface.28d1a6b7.js}

@@ -1,12 +1,12 @@
 var $8646508ae99a5857$exports = require("./map-interface.4c5addca.js");
 var $c3311f59335df34d$exports = require("./map-interface.bda26b27.js");
 var $fce5fc950d1fe35b$exports = require("./map-interface.0e252a74.js");
-var $2611a7b4364593e5$exports = require("./map-interface.5813e876.js");
-var $2bc7c1e4e7da7fdf$exports = require("./map-interface.3934d6d6.js");
-var $493deb9ab6b848e3$exports = require("./map-interface.e7194f92.js");
+var $2611a7b4364593e5$exports = require("./map-interface.cf6c9a68.js");
+var $2bc7c1e4e7da7fdf$exports = require("./map-interface.10d442f4.js");
+var $493deb9ab6b848e3$exports = require("./map-interface.7bdbe4b6.js");
 var $33088e8384af337c$exports = require("./map-interface.abe5fe65.js");
 require("./map-interface.26497065.css");
-var $abbe8d0af34cbbed$exports = require("./map-interface.175c4635.js");
+var $abbe8d0af34cbbed$exports = require("./map-interface.f8826069.js");
 var $db14eb7a5c07abdb$exports = require("./map-interface.e9bcd5c0.js");
 var $g1A1s$blueprintjscore = require("@blueprintjs/core");
 var $g1A1s$macrostrathyper = require("@macrostrat/hyper");
@@ -42,7 +42,7 @@ $parcel$export(module.exports, "DevMapPage", () => $6f5ca387ac26c0b5$export$2391
 
 
 const $6f5ca387ac26c0b5$export$dda1d9f60106f0e9 = (0, ($parcel$interopDefault($g1A1s$macrostrathyper))).styled((0, ($parcel$interopDefault($33088e8384af337c$exports))));
-function $6f5ca387ac26c0b5$export$eab3034e57b46e26({ title: title = "Map inspector", headerElement: headerElement = null, transformRequest: transformRequest = null, mapPosition: mapPosition = null, mapboxToken: mapboxToken = null, overlayStyle: overlayStyle = null, controls: controls = null, children: children = null, style: style, bounds: bounds = null, focusedSource: focusedSource = null, focusedSourceTitle: focusedSourceTitle = null, fitViewport: fitViewport = true, styleType: styleType = "macrostrat" }) {
+function $6f5ca387ac26c0b5$export$eab3034e57b46e26({ title: title = "Map inspector", headerElement: headerElement = null, transformRequest: transformRequest = null, mapPosition: mapPosition = null, mapboxToken: mapboxToken = null, overlayStyle: overlayStyle = null, controls: controls = null, children: children = null, style: style, bounds: bounds = null, focusedSource: focusedSource = null, focusedSourceTitle: focusedSourceTitle = null, fitViewport: fitViewport = true, styleType: styleType = "macrostrat", ...rest }) {
     /* We apply a custom style to the panel container when we are interacting
     with the search bar, so that we can block map interactions until search
     bar focus is lost.
@@ -51,9 +51,10 @@ function $6f5ca387ac26c0b5$export$eab3034e57b46e26({ title: title = "Map inspect
   */ const dark = (0, $g1A1s$macrostratuicomponents.useDarkMode)();
     const isEnabled = dark?.isEnabled;
     if (mapboxToken != null) (0, ($parcel$interopDefault($g1A1s$mapboxgl))).accessToken = mapboxToken;
-    style ??= (0, $2611a7b4364593e5$exports.useBasicMapStyle)({
+    const basicStyle = (0, $2611a7b4364593e5$exports.useBasicMapStyle)({
         styleType: styleType
     });
+    style ??= basicStyle;
     const [isOpen, setOpen] = (0, $g1A1s$react.useState)(false);
     const [state, setState] = (0, $g1A1s$macrostratuicomponents.useStoredState)("macrostrat:dev-map-page", {
         showTileExtent: false,
@@ -148,7 +149,8 @@ function $6f5ca387ac26c0b5$export$eab3034e57b46e26({ title: title = "Map inspect
             name: "globe"
         },
         mapboxToken: mapboxToken,
-        bounds: bounds
+        bounds: bounds,
+        ...rest
     }, [
         $6f5ca387ac26c0b5$export$dda1d9f60106f0e9((0, $db14eb7a5c07abdb$exports.FeatureSelectionHandler), {
             selectedLocation: inspectPosition,
@@ -180,4 +182,4 @@ function $6f5ca387ac26c0b5$var$MapInspector(props) {
 const $6f5ca387ac26c0b5$export$2391061fbdfb71ef = $6f5ca387ac26c0b5$var$MapInspector;
 
 
-//# sourceMappingURL=map-interface.17e81e8a.js.map
+//# sourceMappingURL=map-interface.28d1a6b7.js.map

package/dist/cjs/map-interface.28d1a6b7.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/map-interface/src/dev/map-page.ts"],"sourcesContent":["// Import other components\nimport { Switch } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode, useStoredState } from \"@macrostrat/ui-components\";\nimport mapboxgl from \"mapbox-gl\";\nimport React from \"react\";\nimport { useCallback, useState, useEffect } from \"react\";\nimport { buildInspectorStyle } from \"./xray\";\nimport { MapAreaContainer, PanelCard } from \"../container\";\nimport { FloatingNavbar, MapLoadingButton } from \"../context-panel\";\nimport { MapMarker, useBasicMapStyle } from \"../helpers\";\nimport { LocationPanel } from \"../location-panel\";\nimport { MapView, MapViewProps } from \"../map-view\";\nimport styles from \"./main.module.sass\";\nimport { TileExtentLayer } from \"./tile-extent\";\nimport {\n  FeaturePanel,\n  FeatureSelectionHandler,\n  TileInfo,\n} from \"./vector-tile-features\";\nimport { MapPosition } from \"@macrostrat/mapbox-utils\";\n\nexport const h = hyper.styled(styles);\n\ninterface MapInspectorProps extends MapViewProps {\n  headerElement?: React.ReactNode;\n  transformRequest?: mapboxgl.RequestTransformFunction;\n  title?: string;\n  style?: mapboxgl.StyleSpecification | string;\n  controls?: React.ReactNode;\n  children?: React.ReactNode;\n  mapboxToken?: string;\n  overlayStyle?: mapboxgl.StyleSpecification | string;\n  focusedSource?: string;\n  focusedSourceTitle?: string;\n  projection?: string;\n  mapPosition?: MapPosition;\n  bounds?: [number, number, number, number];\n  fitViewport?: boolean;\n  styleType?: \"standard\" | \"macrostrat\";\n  enableTerrain?: boolean;\n}\n\nexport function MapInspectorV2({\n  title = \"Map inspector\",\n  headerElement = null,\n  transformRequest = null,\n  mapPosition = null,\n  mapboxToken = null,\n  overlayStyle = null,\n  controls = null,\n  children = null,\n  style,\n  bounds = null,\n  focusedSource = null,\n  focusedSourceTitle = null,\n  fitViewport = true,\n  styleType = \"macrostrat\",\n  ...rest\n}: MapInspectorProps) {\n  /* We apply a custom style to the panel container when we are interacting\n    with the search bar, so that we can block map interactions until search\n    bar focus is lost.\n    We also apply a custom style when the infodrawer is open so we can hide\n    the search bar on mobile platforms\n  */\n\n  const dark = useDarkMode();\n  const isEnabled = dark?.isEnabled;\n\n  if (mapboxToken != null) {\n    mapboxgl.accessToken = mapboxToken;\n  }\n\n  const basicStyle = useBasicMapStyle({ styleType });\n  style ??= basicStyle;\n\n  const [isOpen, setOpen] = useState(false);\n\n  const [state, setState] = useStoredState(\"macrostrat:dev-map-page\", {\n    showTileExtent: false,\n    xRay: false,\n  });\n  const { showTileExtent, xRay } = state;\n\n  const [actualStyle, setActualStyle] = useState(null);\n\n  useEffect(() => {\n    buildInspectorStyle(style, overlayStyle, {\n      mapboxToken,\n      inDarkMode: isEnabled,\n      xRay,\n    }).then(setActualStyle);\n  }, [style, xRay, mapboxToken, isEnabled, overlayStyle]);\n\n  const [inspectPosition, setInspectPosition] =\n    useState<mapboxgl.LngLat | null>(null);\n\n  const [data, setData] = useState(null);\n\n  const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {\n    setInspectPosition(position);\n  }, []);\n\n  let detailElement = null;\n  if (inspectPosition != null) {\n    detailElement = h(\n      LocationPanel,\n      {\n        onClose() {\n          setInspectPosition(null);\n        },\n        position: inspectPosition,\n      },\n      [\n        h(TileInfo, {\n          feature: data?.[0] ?? null,\n          showExtent: showTileExtent,\n          setShowExtent() {\n            setState({ ...state, showTileExtent: !showTileExtent });\n          },\n        }),\n        h(FeaturePanel, { features: data, focusedSource, focusedSourceTitle }),\n      ],\n    );\n  }\n\n  let tile = null;\n  if (showTileExtent && data?.[0] != null) {\n    let f = data[0];\n    tile = { x: f._x, y: f._y, z: f._z };\n  }\n\n  return h(\n    MapAreaContainer,\n    {\n      navbar: h(FloatingNavbar, {\n        rightElement: h(MapLoadingButton, {\n          large: true,\n          active: isOpen,\n          onClick: () => setOpen(!isOpen),\n          style: {\n            marginRight: \"-5px\",\n          },\n        }),\n        headerElement,\n        title,\n      }),\n      contextPanel: h(PanelCard, [\n        controls,\n        h(Switch, {\n          checked: xRay,\n          label: \"X-ray mode\",\n          onChange() {\n            setState({ ...state, xRay: !xRay });\n          },\n        }),\n      ]),\n      detailPanel: detailElement,\n      contextPanelOpen: isOpen,\n      fitViewport,\n    },\n    h(\n      MapView,\n      {\n        style: actualStyle,\n        transformRequest,\n        mapPosition,\n        projection: { name: \"globe\" },\n        mapboxToken,\n        bounds,\n        ...rest,\n      },\n      [\n        h(FeatureSelectionHandler, {\n          selectedLocation: inspectPosition,\n          setFeatures: setData,\n        }),\n        h(MapMarker, {\n          position: inspectPosition,\n          setPosition: onSelectPosition,\n        }),\n        h(TileExtentLayer, { tile, color: isEnabled ? \"white\" : \"black\" }),\n        children,\n      ],\n    ),\n  );\n}\n\nfunction MapInspector(props) {\n  const { children, controls, ...rest } = props;\n  /** Compatibility wrapper for MapInspectorV2 */\n  // React warning about this legacy usage\n  console.warn(\"MapInspector is deprecated. Use MapInspectorV2 instead\");\n\n  return h(MapInspectorV2, {\n    ...rest,\n    controls: [children, controls],\n  });\n}\n\n// Legacy export\nexport const DevMapPage = MapInspector;\n"],"names":[],"version":3,"file":"map-interface.28d1a6b7.js.map"}

package/dist/cjs/{map-interface.5cea0ff4.js → map-interface.3bc4f731.js}

@@ -1,5 +1,5 @@
-var $6f5ca387ac26c0b5$exports = require("./map-interface.17e81e8a.js");
-var $abbe8d0af34cbbed$exports = require("./map-interface.175c4635.js");
+var $6f5ca387ac26c0b5$exports = require("./map-interface.28d1a6b7.js");
+var $abbe8d0af34cbbed$exports = require("./map-interface.f8826069.js");
 var $db14eb7a5c07abdb$exports = require("./map-interface.e9bcd5c0.js");
 var $8646508ae99a5857$exports = require("./map-interface.4c5addca.js");
 
@@ -30,4 +30,4 @@ $parcel$exportWildcard(module.exports, $db14eb7a5c07abdb$exports);
 $parcel$exportWildcard(module.exports, $8646508ae99a5857$exports);
 
 
-//# sourceMappingURL=map-interface.5cea0ff4.js.map
+//# sourceMappingURL=map-interface.3bc4f731.js.map

package/dist/cjs/{map-interface.5cea0ff4.js.map → map-interface.3bc4f731.js.map}

@@ -1 +1 @@
-{"mappings":"","sources":["packages/map-interface/src/dev/index.ts"],"sourcesContent":["export * from \"./map-page\";\nexport * from \"./tile-extent\";\nexport * from \"./vector-tile-features\";\nexport * from \"./xray\";\n"],"names":[],"version":3,"file":"map-interface.5cea0ff4.js.map"}
+{"mappings":"","sources":["packages/map-interface/src/dev/index.ts"],"sourcesContent":["export * from \"./map-page\";\nexport * from \"./tile-extent\";\nexport * from \"./vector-tile-features\";\nexport * from \"./xray\";\n"],"names":[],"version":3,"file":"map-interface.3bc4f731.js.map"}

package/dist/cjs/{map-interface.e7194f92.js → map-interface.7bdbe4b6.js}

@@ -1,6 +1,6 @@
 var $35f1bc0112883d51$exports = require("./map-interface.a9fe0f5d.js");
 require("./map-interface.4a401c1f.css");
-var $2611a7b4364593e5$exports = require("./map-interface.5813e876.js");
+var $2611a7b4364593e5$exports = require("./map-interface.cf6c9a68.js");
 var $3490fc4f4bda12f7$exports = require("./map-interface.ffb109ef.js");
 var $8GJXj$macrostrathyper = require("@macrostrat/hyper");
 var $8GJXj$macrostratmapboxreact = require("@macrostrat/mapbox-react");
@@ -40,7 +40,7 @@ function $493deb9ab6b848e3$var$defaultInitializeMap(container, args = {}) {
         container: container,
         maxZoom: 18,
         logoPosition: "bottom-left",
-        trackResize: true,
+        trackResize: false,
         antialias: true,
         // This is a legacy option for Mapbox GL v2
         // @ts-ignore
@@ -64,8 +64,16 @@ const $493deb9ab6b848e3$var$defaultMapPosition = {
 function $493deb9ab6b848e3$export$ab1e7a67d6ec5ad8(props) {
     let { terrainSourceID: terrainSourceID } = props;
     const { enableTerrain: enableTerrain = true, style: style, mapPosition: mapPosition, initializeMap: initializeMap = $493deb9ab6b848e3$var$defaultInitializeMap, children: children, mapboxToken: mapboxToken, accessToken: // Deprecated
-    accessToken, infoMarkerPosition: infoMarkerPosition, transformRequest: transformRequest, projection: projection, onMapLoaded: onMapLoaded = null, onStyleLoaded: onStyleLoaded = null, onMapMoved: onMapMoved = null, standalone: standalone = false, overlayStyles: overlayStyles, transformStyle: transformStyle, ...rest } = props;
+    accessToken, infoMarkerPosition: infoMarkerPosition, transformRequest: transformRequest, projection: projection, onMapLoaded: onMapLoaded = null, onStyleLoaded: onStyleLoaded = null, onMapMoved: onMapMoved = null, standalone: standalone = false, overlayStyles: overlayStyles, transformStyle: transformStyle, trackResize: trackResize = true, loadingIgnoredSources: loadingIgnoredSources = [
+        "elevationMarker",
+        "crossSectionEndpoints"
+    ], id: id = "map", className: className, ...rest } = props;
     if (enableTerrain) terrainSourceID ??= "mapbox-3d-dem";
+    (0, $8GJXj$react.useEffect)(()=>{
+        if (id != null) console.warn("Setting a specific element ID for the map is deprecated. Please use className instead.");
+    }, [
+        id
+    ]);
     const _mapboxToken = mapboxToken ?? accessToken;
     if (_mapboxToken != null) (0, ($parcel$interopDefault($8GJXj$mapboxgl))).accessToken = _mapboxToken;
     const dispatch = (0, $8GJXj$macrostratmapboxreact.useMapDispatch)();
@@ -73,37 +81,34 @@ function $493deb9ab6b848e3$export$ab1e7a67d6ec5ad8(props) {
     const ref = (0, $8GJXj$react.useRef)();
     const parentRef = (0, $8GJXj$react.useRef)();
     const [baseStyle, setBaseStyle] = (0, $8GJXj$react.useState)(null);
-    const isStyleLoaded = (0, $8GJXj$macrostratmapboxreact.useMapStatus)((state)=>state.isStyleLoaded);
+    const estMapPosition = mapRef.current == null ? mapPosition : (0, $8GJXj$macrostratmapboxutils.getMapPosition)(mapRef.current);
+    const { mapUse3D: mapUse3D, mapIsRotated: mapIsRotated } = (0, $8GJXj$macrostratmapboxutils.mapViewInfo)(estMapPosition);
+    const is3DAvailable = (mapUse3D ?? false) && enableTerrain;
     (0, $8GJXj$react.useEffect)(()=>{
         /** Manager to update map style */ if (baseStyle == null) return;
         let map = mapRef.current;
+        let newStyle = baseStyle;
+        const overlayStyles = props.overlayStyles ?? [];
+        if (overlayStyles.length > 0) newStyle = (0, $8GJXj$macrostratmapboxutils.mergeStyles)(newStyle, ...overlayStyles);
         /** If we can, we try to update the map style with terrain information
      * immediately, before the style is loaded. This allows us to avoid a
      * flash of the map without terrain.
      *
      * To do this, we need to estimate the map position before load, which
      * doesn't always work.
-     */ // We either get the map position directly from the map or from props
-        const estMapPosition = map == null ? mapPosition : (0, $8GJXj$macrostratmapboxutils.getMapPosition)(map);
-        const { mapUse3D: mapUse3D } = (0, $8GJXj$macrostratmapboxutils.mapViewInfo)(estMapPosition);
-        let newStyle = baseStyle;
-        const overlayStyles = props.overlayStyles ?? [];
-        if (overlayStyles.length > 0) newStyle = (0, $8GJXj$macrostratmapboxutils.mergeStyles)(newStyle, ...overlayStyles);
-        if (mapUse3D) {
+     */ if (is3DAvailable) {
             // We can update the style with terrain layers immediately
             const terrainStyle = (0, $8GJXj$macrostratmapboxreact.getTerrainLayerForStyle)(newStyle, terrainSourceID);
             newStyle = (0, $8GJXj$macrostratmapboxutils.mergeStyles)(newStyle, terrainStyle);
         }
         if (transformStyle != null) newStyle = transformStyle(newStyle);
         if (map != null) {
-            console.log("Setting style", newStyle);
             dispatch({
                 type: "set-style-loaded",
                 payload: false
             });
             map.setStyle(newStyle);
         } else {
-            console.log("Initializing map", newStyle);
             const map = initializeMap(ref.current, {
                 style: newStyle,
                 projection: projection,
@@ -125,26 +130,6 @@ function $493deb9ab6b848e3$export$ab1e7a67d6ec5ad8(props) {
         overlayStyles,
         transformStyle
     ]);
-    /** Check back every 0.1 seconds to see if the map has loaded.
-   * We do it this way because mapboxgl loading events are unreliable */ (0, $8GJXj$react.useEffect)(()=>{
-        if (isStyleLoaded) return;
-        const interval = setInterval(()=>{
-            const map = mapRef.current;
-            if (map == null) return;
-            if (map.isStyleLoaded()) {
-                // Wait a tick before setting the style loaded state
-                dispatch({
-                    type: "set-style-loaded",
-                    payload: true
-                });
-                onStyleLoaded?.(map);
-                clearInterval(interval);
-            }
-        }, 50);
-        return ()=>clearInterval(interval);
-    }, [
-        isStyleLoaded
-    ]);
     (0, $8GJXj$macrostratuicomponents.useAsyncEffect)(async ()=>{
         /** Manager to update map style */ let newStyle;
         if (typeof style === "string") newStyle = await (0, $8GJXj$macrostratmapboxutils.getMapboxStyle)(style, {
@@ -155,35 +140,36 @@ function $493deb9ab6b848e3$export$ab1e7a67d6ec5ad8(props) {
     }, [
         style
     ]);
-    const _computedMapPosition = (0, $8GJXj$macrostratmapboxreact.useMapPosition)();
-    const { mapUse3D: mapUse3D, mapIsRotated: mapIsRotated } = (0, $8GJXj$macrostratmapboxutils.mapViewInfo)(_computedMapPosition);
     // Get map projection
     const _projection = mapRef.current?.getProjection()?.name ?? "mercator";
-    const className = (0, ($parcel$interopDefault($8GJXj$classnames)))({
+    const mapClassName = (0, ($parcel$interopDefault($8GJXj$classnames)))({
         "is-rotated": mapIsRotated ?? false,
-        "is-3d-available": mapUse3D ?? false
+        "is-3d-available": is3DAvailable
     }, `${_projection}-projection`);
     const parentClassName = (0, ($parcel$interopDefault($8GJXj$classnames)))({
         standalone: standalone
-    });
+    }, className);
     return $493deb9ab6b848e3$var$h("div.map-view-container.main-view", {
         ref: parentRef,
         className: parentClassName
     }, [
-        $493deb9ab6b848e3$var$h("div.mapbox-map#map", {
+        $493deb9ab6b848e3$var$h("div.mapbox-map.map-view", {
             ref: ref,
-            className: className
+            className: mapClassName,
+            id: id
         }),
         $493deb9ab6b848e3$var$h((0, $2611a7b4364593e5$exports.MapLoadingReporter), {
-            ignoredSources: [
-                "elevationMarker",
-                "crossSectionEndpoints"
-            ]
+            ignoredSources: loadingIgnoredSources
+        }),
+        $493deb9ab6b848e3$var$h($493deb9ab6b848e3$var$StyleLoadedReporter, {
+            onStyleLoaded: onStyleLoaded
         }),
         $493deb9ab6b848e3$var$h((0, $2611a7b4364593e5$exports.MapMovedReporter), {
             onMapMoved: onMapMoved
         }),
-        $493deb9ab6b848e3$var$h((0, $2611a7b4364593e5$exports.MapResizeManager), {
+        // Subsitute for trackResize: true that allows map resizing to
+        // be tied to a specific ref component
+        $493deb9ab6b848e3$var$h.if(trackResize)((0, $2611a7b4364593e5$exports.MapResizeManager), {
             containerRef: ref
         }),
         $493deb9ab6b848e3$var$h((0, $2611a7b4364593e5$exports.MapPaddingManager), {
@@ -192,17 +178,43 @@ function $493deb9ab6b848e3$export$ab1e7a67d6ec5ad8(props) {
             infoMarkerPosition: infoMarkerPosition
         }),
         $493deb9ab6b848e3$var$h($493deb9ab6b848e3$export$cee395a8a2a00b29, {
-            mapUse3D: mapUse3D,
+            mapUse3D: is3DAvailable,
             terrainSourceID: terrainSourceID,
             style: style
         }),
         children
     ]);
 }
+function $493deb9ab6b848e3$var$StyleLoadedReporter({ onStyleLoaded: onStyleLoaded = null }) {
+    /** Check back every 0.1 seconds to see if the map has loaded.
+   * We do it this way because mapboxgl loading events are unreliable */ const isStyleLoaded = (0, $8GJXj$macrostratmapboxreact.useMapStatus)((state)=>state.isStyleLoaded);
+    const mapRef = (0, $8GJXj$macrostratmapboxreact.useMapRef)();
+    const dispatch = (0, $8GJXj$macrostratmapboxreact.useMapDispatch)();
+    (0, $8GJXj$react.useEffect)(()=>{
+        if (isStyleLoaded) return;
+        const interval = setInterval(()=>{
+            const map = mapRef.current;
+            if (map == null) return;
+            if (map.isStyleLoaded()) {
+                // Wait a tick before setting the style loaded state
+                dispatch({
+                    type: "set-style-loaded",
+                    payload: true
+                });
+                onStyleLoaded?.(map);
+                clearInterval(interval);
+            }
+        }, 50);
+        return ()=>clearInterval(interval);
+    }, [
+        isStyleLoaded
+    ]);
+    return null;
+}
 function $493deb9ab6b848e3$export$cee395a8a2a00b29({ mapUse3D: mapUse3D, terrainSourceID: terrainSourceID, style: style }) {
     (0, $8GJXj$macrostratmapboxreact.use3DTerrain)(mapUse3D, terrainSourceID);
     return null;
 }
 
 
-//# sourceMappingURL=map-interface.e7194f92.js.map
+//# sourceMappingURL=map-interface.7bdbe4b6.js.map

package/dist/cjs/map-interface.7bdbe4b6.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAwC5B,SAAS,2CAAqB,SAAS,EAAE,OAAyB,CAAC,CAAC;IAClE,MAAM,eAAE,WAAW,EAAE,GAAG,MAAM,GAAG;IAEjC,MAAM,MAAM,IAAI,CAAA,GAAA,yCAAO,EAAE,GAAG,CAAC;mBAC3B;QACA,SAAS;QACT,cAAc;QACd,aAAa;QACb,WAAW;QACX,2CAA2C;QAC3C,aAAa;QACb,oBAAoB;QACpB,GAAG,IAAI;IACT;IAEA,IAAI,eAAe;IACnB,IAAI,gBAAgB,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,MAAM,IAAI,MAChE,oEAAoE;IACpE,eAAe;IAGjB,2BAA2B;IAC3B,IAAI,gBAAgB,MAClB,CAAA,GAAA,2CAAa,EAAE,KAAK;IAGtB,OAAO;AACT;AAEA,MAAM,2CAAkC;IACtC,QAAQ;QACN,KAAK;QACL,KAAK;QACL,UAAU;IACZ;AACF;AAEO,SAAS,0CAAQ,KAAmB;IACzC,IAAI,mBAAE,eAAe,EAAE,GAAG;IAC1B,MAAM,iBACJ,gBAAgB,aAChB,KAAK,eACL,WAAW,iBACX,gBAAgB,sDAChB,QAAQ,eACR,WAAW,eACX,aAAa;IACb,WAAW,sBACX,kBAAkB,oBAClB,gBAAgB,cAChB,UAAU,eACV,cAAc,qBACd,gBAAgB,kBAChB,aAAa,kBACb,aAAa,sBACb,aAAa,kBACb,cAAc,eACd,cAAc,6BACd,wBAAwB;QAAC;QAAmB;KAAwB,MACpE,KAAK,kBACL,SAAS,EACT,GAAG,MACJ,GAAG;IACJ,IAAI,eACF,oBAAoB;IAGtB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,MACR,QAAQ,IAAI,CACV;IAGN,GAAG;QAAC;KAAG;IAEP,MAAM,eAAe,eAAe;IAEpC,IAAI,gBAAgB,MAClB,CAAA,GAAA,yCAAO,EAAE,WAAW,GAAG;IAGzB,MAAM,WAAW,CAAA,GAAA,2CAAa;IAC9B,IAAI,SAAS,CAAA,GAAA,sCAAQ;IACrB,MAAM,MAAM,CAAA,GAAA,mBAAK;IACjB,MAAM,YAAY,CAAA,GAAA,mBAAK;IAEvB,MAAM,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAkB;IAE3D,MAAM,iBACJ,OAAO,OAAO,IAAI,OAAO,cAAc,CAAA,GAAA,2CAAa,EAAE,OAAO,OAAO;IACtE,MAAM,YAAE,QAAQ,gBAAE,YAAY,EAAE,GAAG,CAAA,GAAA,wCAAU,EAAE;IAC/C,MAAM,gBAAgB,AAAC,CAAA,YAAY,KAAI,KAAM;IAE7C,CAAA,GAAA,sBAAQ,EAAE;QACR,gCAAgC,GAChC,IAAI,aAAa,MAAM;QACvB,IAAI,MAAM,OAAO,OAAO;QAExB,IAAI,WAAwC;QAE5C,MAAM,gBAAgB,MAAM,aAAa,IAAI,EAAE;QAE/C,IAAI,cAAc,MAAM,GAAG,GACzB,WAAW,CAAA,GAAA,wCAAU,EAAE,aAAa;QAGtC;;;;;;KAMC,GACD,IAAI,eAAe;YACjB,0DAA0D;YAC1D,MAAM,eAAe,CAAA,GAAA,oDAAsB,EAAE,UAAU;YACvD,WAAW,CAAA,GAAA,wCAAU,EAAE,UAAU;QACnC;QAEA,IAAI,kBAAkB,MACpB,WAAW,eAAe;QAG5B,IAAI,OAAO,MAAM;YACf,SAAS;gBAAE,MAAM;gBAAoB,SAAS;YAAM;YACpD,IAAI,QAAQ,CAAC;QACf,OAAO;YACL,MAAM,MAAM,cAAc,IAAI,OAAO,EAAE;gBACrC,OAAO;4BACP;6BACA;kCACA;gBACA,GAAG,IAAI;YACT;YACA,SAAS;gBAAE,MAAM;gBAAW,SAAS;YAAI;YACzC,IAAI,UAAU,CAAC,CAAA,GAAA,uCAAY,EAAE,KAAK,YAAY;gBAAE,SAAS;YAAM;YAC/D,cAAc;QAChB;IACF,GAAG;QAAC;QAAW;QAAe;KAAe;IAE7C,CAAA,GAAA,4CAAa,EAAE;QACb,gCAAgC,GAChC,IAAI;QACJ,IAAI,OAAO,UAAU,UACnB,WAAW,MAAM,CAAA,GAAA,2CAAa,EAAE,OAAO;YACrC,cAAc,CAAA,GAAA,yCAAO,EAAE,WAAW;QACpC;aAEA,WAAW;QAEb,aAAa;IACf,GAAG;QAAC;KAAM;IAEV,qBAAqB;IACrB,MAAM,cAAc,OAAO,OAAO,EAAE,iBAAiB,QAAQ;IAE7D,MAAM,eAAe,CAAA,GAAA,2CAAS,EAC5B;QACE,cAAc,gBAAgB;QAC9B,mBAAmB;IACrB,GACA,GAAG,YAAY,WAAW,CAAC;IAG7B,MAAM,kBAAkB,CAAA,GAAA,2CAAS,EAC/B;oBACE;IACF,GACA;IAGF,OAAO,wBACL,oCACA;QAAE,KAAK;QAAW,WAAW;IAAgB,GAC7C;QACE,wBAAE,2BAA2B;iBAAE;YAAK,WAAW;gBAAc;QAAG;QAChE,wBAAE,CAAA,GAAA,4CAAiB,GAAG;YACpB,gBAAgB;QAClB;QACA,wBAAE,2CAAqB;2BAAE;QAAc;QACvC,wBAAE,CAAA,GAAA,0CAAe,GAAG;wBAAE;QAAW;QACjC,8DAA8D;QAC9D,sCAAsC;QACtC,wBAAE,EAAE,CAAC,aAAa,CAAA,GAAA,0CAAe,GAAG;YAAE,cAAc;QAAI;QACxD,wBAAE,CAAA,GAAA,2CAAgB,GAAG;YACnB,cAAc;uBACd;gCACA;QACF;QACA,wBAAE,2CAAmB;YAAE,UAAU;6BAAe;mBAAiB;QAAM;QACvE;KACD;AAEL;AAEA,SAAS,0CAAoB,iBAAE,gBAAgB,MAAM;IACnD;sEACoE,GACpE,MAAM,gBAAgB,CAAA,GAAA,yCAAW,EAAE,CAAC,QAAU,MAAM,aAAa;IACjE,MAAM,SAAS,CAAA,GAAA,sCAAQ;IACvB,MAAM,WAAW,CAAA,GAAA,2CAAa;IAE9B,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,eAAe;QACnB,MAAM,WAAW,YAAY;YAC3B,MAAM,MAAM,OAAO,OAAO;YAC1B,IAAI,OAAO,MAAM;YACjB,IAAI,IAAI,aAAa,IAAI;gBACvB,oDAAoD;gBACpD,SAAS;oBAAE,MAAM;oBAAoB,SAAS;gBAAK;gBACnD,gBAAgB;gBAChB,cAAc;YAChB;QACF,GAAG;QACH,OAAO,IAAM,cAAc;IAC7B,GAAG;QAAC;KAAc;IAElB,OAAO;AACT;AAEO,SAAS,0CAAkB,YAChC,QAAQ,mBACR,eAAe,SACf,KAAK,EAKN;IACC,CAAA,GAAA,yCAAW,EAAE,UAAU;IAEvB,OAAO;AACT","sources":["packages/map-interface/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":[],"version":3,"file":"map-interface.7bdbe4b6.js.map"}

package/dist/cjs/{map-interface.5813e876.js → map-interface.cf6c9a68.js}

@@ -123,20 +123,20 @@ function $2611a7b4364593e5$export$e57f9eaa51773f82({ ignoredSources: ignoredSour
         const map = mapRef.current;
         const mapIsLoading = loadingRef.current;
         if (map == null) return;
-        let didSendLoading = false;
+        //let didSendLoading = false;
         const loadingCallback = (evt)=>{
             if (ignoredSources.includes(evt.sourceId) || mapIsLoading) return;
-            if (didSendLoading) return;
+            //if (didSendLoading) return;
             onMapLoading?.(evt);
             dispatch({
                 type: "set-loading",
                 payload: true
             });
             loadingRef.current = true;
-            didSendLoading = true;
+        //didSendLoading = true;
         };
         const idleCallback = (evt)=>{
-            if (!mapIsLoading) return;
+            if (!map.loaded()) return;
             dispatch({
                 type: "set-loading",
                 payload: false
@@ -205,4 +205,4 @@ function $2611a7b4364593e5$export$3503bf0b3851527b(opts) {
 const $2611a7b4364593e5$export$566518253d2584f8 = $2611a7b4364593e5$export$6daf1520df36ae21;
 
 
-//# sourceMappingURL=map-interface.5813e876.js.map
+//# sourceMappingURL=map-interface.cf6c9a68.js.map

package/dist/cjs/{map-interface.5813e876.js.map → map-interface.cf6c9a68.js.map}

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/map-interface/src/helpers.ts"],"sourcesContent":["import {\n  useMapRef,\n  useMapEaseTo,\n  useMapDispatch,\n  useMapStatus,\n  useMapInitialized,\n} from \"@macrostrat/mapbox-react\";\nimport { useMemo, useRef } from \"react\";\nimport { debounce } from \"underscore\";\nimport useResizeObserver from \"use-resize-observer\";\n\nimport { getMapPosition } from \"@macrostrat/mapbox-utils\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { getMapPadding, useMapMarker } from \"./utils\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\n\nexport function MapResizeManager({ containerRef }) {\n  const mapRef = useMapRef();\n\n  const debouncedResize = useRef(\n    debounce(() => {\n      mapRef.current?.resize();\n    }, 100),\n  );\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: debouncedResize.current,\n  });\n\n  return null;\n}\n\ninterface MapPaddingManagerProps {\n  containerRef: React.RefObject<HTMLDivElement>;\n  parentRef: React.RefObject<HTMLDivElement>;\n  infoMarkerPosition: mapboxgl.LngLatLike;\n  debounceTime?: number;\n}\n\nexport function MapPaddingManager({\n  containerRef,\n  parentRef,\n  infoMarkerPosition,\n  debounceTime = 200,\n}: MapPaddingManagerProps) {\n  const mapRef = useMapRef();\n\n  const [padding, setPadding] = useState(\n    getMapPadding(containerRef, parentRef),\n  );\n\n  const _updateMapPadding = useCallback(() => {\n    const newPadding = getMapPadding(containerRef, parentRef);\n    setPadding(newPadding);\n  }, [containerRef.current, parentRef.current]);\n\n  const updateMapPadding = useMemo(\n    () => debounce(_updateMapPadding, debounceTime),\n    [_updateMapPadding, debounceTime],\n  );\n\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    // Update map padding on load\n    updateMapPadding();\n  }, [mapRef.current]);\n\n  useResizeObserver({\n    ref: parentRef,\n    onResize(sz) {\n      updateMapPadding();\n    },\n    round(n) {\n      return Math.round(n);\n    },\n  });\n\n  // Ideally, we would not have to do this when we know the infobox is loaded\n  useMapEaseTo({ center: infoMarkerPosition, padding });\n\n  return null;\n}\n\nexport function MapMovedReporter({ onMapMoved = null }) {\n  const mapRef = useMapRef();\n  const dispatch = useMapDispatch();\n  const isInitialized = useMapInitialized();\n\n  const mapMovedCallback = useCallback(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    const mapPosition = getMapPosition(map);\n    dispatch({ type: \"map-moved\", payload: mapPosition });\n    onMapMoved?.(mapPosition, map);\n  }, [onMapMoved, dispatch, isInitialized]);\n\n  useEffect(() => {\n    // Get the current value of the map. Useful for gradually moving away\n    // from class component\n    const map = mapRef.current;\n    if (map == null) return;\n    // Update the URI when the map moves\n    mapMovedCallback();\n    const cb = debounce(mapMovedCallback, 100);\n    map.on(\"moveend\", cb);\n    return () => {\n      map?.off(\"moveend\", cb);\n    };\n  }, [mapMovedCallback]);\n  return null;\n}\n\ninterface MapLoadingReporterProps {\n  ignoredSources?: string[];\n  onMapLoading?: (evt: mapboxgl.MapEvent) => void;\n  onMapIdle?: (evt: mapboxgl.MapEvent) => void;\n  mapIsLoading?: boolean;\n}\n\nexport function MapLoadingReporter({\n  ignoredSources,\n  onMapLoading = null,\n  onMapIdle = null,\n  mapIsLoading,\n}: MapLoadingReporterProps) {\n  const mapRef = useMapRef();\n  const loadingRef = useRef(false);\n  const dispatch = useMapDispatch();\n  const isInitialized = useMapInitialized();\n\n  useEffect(() => {\n    const map = mapRef.current;\n    const mapIsLoading = loadingRef.current;\n    if (map == null) return;\n\n    let didSendLoading = false;\n\n    const loadingCallback = (evt) => {\n      if (ignoredSources.includes(evt.sourceId) || mapIsLoading) return;\n      if (didSendLoading) return;\n      onMapLoading?.(evt);\n      dispatch({ type: \"set-loading\", payload: true });\n      loadingRef.current = true;\n      didSendLoading = true;\n    };\n    const idleCallback = (evt) => {\n      if (!mapIsLoading) return;\n      dispatch({ type: \"set-loading\", payload: false });\n      loadingRef.current = false;\n      onMapIdle?.(evt);\n    };\n    map.on(\"sourcedataloading\", loadingCallback);\n    map.on(\"idle\", idleCallback);\n    return () => {\n      map?.off(\"sourcedataloading\", loadingCallback);\n      map?.off(\"idle\", idleCallback);\n    };\n  }, [ignoredSources, mapIsLoading, isInitialized]);\n  return null;\n}\n\nexport function MapMarker({ position, setPosition, centerMarker = true }) {\n  const mapRef = useMapRef();\n  const markerRef = useRef(null);\n  const isInitialized = useMapInitialized();\n\n  useMapMarker(mapRef, markerRef, position);\n\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null || setPosition == null) return;\n\n    const handleMapClick = (event: mapboxgl.MapMouseEvent) => {\n      setPosition(event.lngLat, event, mapRef.current);\n      // We should integrate this with the \"easeToCenter\" hook\n      if (centerMarker) {\n        mapRef.current?.flyTo({ center: event.lngLat, duration: 800 });\n      }\n    };\n\n    map.on(\"click\", handleMapClick);\n\n    return () => {\n      map?.off(\"click\", handleMapClick);\n    };\n  }, [setPosition, isInitialized]);\n\n  return null;\n}\n\nexport function useBasicMapStyle(\n  opts: {\n    styleType?: \"macrostrat\" | \"standard\";\n  } = {},\n) {\n  const { styleType } = opts;\n  const inDarkMode = useInDarkMode();\n\n  const props = useMemo(() => {\n    return { styleType, inDarkMode };\n  }, [styleType, inDarkMode]);\n\n  return getBasicMapStyle(props);\n}\n\nexport function getBasicMapStyle(opts: {\n  styleType?: \"macrostrat\" | \"standard\";\n  inDarkMode?: boolean;\n}) {\n  const { styleType = \"macrostrat\", inDarkMode = false } = opts ?? {};\n\n  if (styleType == \"macrostrat\") {\n    return inDarkMode\n      ? \"mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true\"\n      : \"mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true\";\n  } else {\n    return inDarkMode\n      ? \"mapbox://styles/mapbox/dark-v10\"\n      : \"mapbox://styles/mapbox/light-v10\";\n  }\n}\n\nexport const useBasicStylePair = useBasicMapStyle;\n"],"names":[],"version":3,"file":"map-interface.5813e876.js.map"}
+{"mappings":"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","sources":["packages/map-interface/src/helpers.ts"],"sourcesContent":["import {\n  useMapRef,\n  useMapEaseTo,\n  useMapDispatch,\n  useMapStatus,\n  useMapInitialized,\n} from \"@macrostrat/mapbox-react\";\nimport { useMemo, useRef } from \"react\";\nimport { debounce } from \"underscore\";\nimport useResizeObserver from \"use-resize-observer\";\n\nimport { getMapPosition } from \"@macrostrat/mapbox-utils\";\nimport mapboxgl from \"mapbox-gl\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { getMapPadding, useMapMarker } from \"./utils\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\n\nexport function MapResizeManager({ containerRef }) {\n  const mapRef = useMapRef();\n\n  const debouncedResize = useRef(\n    debounce(() => {\n      mapRef.current?.resize();\n    }, 100),\n  );\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: debouncedResize.current,\n  });\n\n  return null;\n}\n\ninterface MapPaddingManagerProps {\n  containerRef: React.RefObject<HTMLDivElement>;\n  parentRef: React.RefObject<HTMLDivElement>;\n  infoMarkerPosition: mapboxgl.LngLatLike;\n  debounceTime?: number;\n}\n\nexport function MapPaddingManager({\n  containerRef,\n  parentRef,\n  infoMarkerPosition,\n  debounceTime = 200,\n}: MapPaddingManagerProps) {\n  const mapRef = useMapRef();\n\n  const [padding, setPadding] = useState(\n    getMapPadding(containerRef, parentRef),\n  );\n\n  const _updateMapPadding = useCallback(() => {\n    const newPadding = getMapPadding(containerRef, parentRef);\n    setPadding(newPadding);\n  }, [containerRef.current, parentRef.current]);\n\n  const updateMapPadding = useMemo(\n    () => debounce(_updateMapPadding, debounceTime),\n    [_updateMapPadding, debounceTime],\n  );\n\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    // Update map padding on load\n    updateMapPadding();\n  }, [mapRef.current]);\n\n  useResizeObserver({\n    ref: parentRef,\n    onResize(sz) {\n      updateMapPadding();\n    },\n    round(n) {\n      return Math.round(n);\n    },\n  });\n\n  // Ideally, we would not have to do this when we know the infobox is loaded\n  useMapEaseTo({ center: infoMarkerPosition, padding });\n\n  return null;\n}\n\nexport function MapMovedReporter({ onMapMoved = null }) {\n  const mapRef = useMapRef();\n  const dispatch = useMapDispatch();\n  const isInitialized = useMapInitialized();\n\n  const mapMovedCallback = useCallback(() => {\n    const map = mapRef.current;\n    if (map == null) return;\n    const mapPosition = getMapPosition(map);\n    dispatch({ type: \"map-moved\", payload: mapPosition });\n    onMapMoved?.(mapPosition, map);\n  }, [onMapMoved, dispatch, isInitialized]);\n\n  useEffect(() => {\n    // Get the current value of the map. Useful for gradually moving away\n    // from class component\n    const map = mapRef.current;\n    if (map == null) return;\n    // Update the URI when the map moves\n    mapMovedCallback();\n    const cb = debounce(mapMovedCallback, 100);\n    map.on(\"moveend\", cb);\n    return () => {\n      map?.off(\"moveend\", cb);\n    };\n  }, [mapMovedCallback]);\n  return null;\n}\n\ninterface MapLoadingReporterProps {\n  ignoredSources?: string[];\n  onMapLoading?: (evt: mapboxgl.MapEvent) => void;\n  onMapIdle?: (evt: mapboxgl.MapEvent) => void;\n  mapIsLoading?: boolean;\n}\n\nexport function MapLoadingReporter({\n  ignoredSources,\n  onMapLoading = null,\n  onMapIdle = null,\n  mapIsLoading,\n}: MapLoadingReporterProps) {\n  const mapRef = useMapRef();\n  const loadingRef = useRef(false);\n  const dispatch = useMapDispatch();\n  const isInitialized = useMapInitialized();\n\n  useEffect(() => {\n    const map = mapRef.current;\n    const mapIsLoading = loadingRef.current;\n    if (map == null) return;\n\n    //let didSendLoading = false;\n\n    const loadingCallback = (evt) => {\n      if (ignoredSources.includes(evt.sourceId) || mapIsLoading) return;\n      //if (didSendLoading) return;\n      onMapLoading?.(evt);\n      dispatch({ type: \"set-loading\", payload: true });\n      loadingRef.current = true;\n      //didSendLoading = true;\n    };\n    const idleCallback = (evt) => {\n      if (!map.loaded()) return;\n      dispatch({ type: \"set-loading\", payload: false });\n      loadingRef.current = false;\n      onMapIdle?.(evt);\n    };\n    map.on(\"sourcedataloading\", loadingCallback);\n    map.on(\"idle\", idleCallback);\n    return () => {\n      map?.off(\"sourcedataloading\", loadingCallback);\n      map?.off(\"idle\", idleCallback);\n    };\n  }, [ignoredSources, mapIsLoading, isInitialized]);\n  return null;\n}\n\nexport function MapMarker({ position, setPosition, centerMarker = true }) {\n  const mapRef = useMapRef();\n  const markerRef = useRef(null);\n  const isInitialized = useMapInitialized();\n\n  useMapMarker(mapRef, markerRef, position);\n\n  useEffect(() => {\n    const map = mapRef.current;\n    if (map == null || setPosition == null) return;\n\n    const handleMapClick = (event: mapboxgl.MapMouseEvent) => {\n      setPosition(event.lngLat, event, mapRef.current);\n      // We should integrate this with the \"easeToCenter\" hook\n      if (centerMarker) {\n        mapRef.current?.flyTo({ center: event.lngLat, duration: 800 });\n      }\n    };\n\n    map.on(\"click\", handleMapClick);\n\n    return () => {\n      map?.off(\"click\", handleMapClick);\n    };\n  }, [setPosition, isInitialized]);\n\n  return null;\n}\n\nexport function useBasicMapStyle(\n  opts: {\n    styleType?: \"macrostrat\" | \"standard\";\n  } = {},\n) {\n  const { styleType } = opts;\n  const inDarkMode = useInDarkMode();\n\n  const props = useMemo(() => {\n    return { styleType, inDarkMode };\n  }, [styleType, inDarkMode]);\n\n  return getBasicMapStyle(props);\n}\n\nexport function getBasicMapStyle(opts: {\n  styleType?: \"macrostrat\" | \"standard\";\n  inDarkMode?: boolean;\n}) {\n  const { styleType = \"macrostrat\", inDarkMode = false } = opts ?? {};\n\n  if (styleType == \"macrostrat\") {\n    return inDarkMode\n      ? \"mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true\"\n      : \"mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true\";\n  } else {\n    return inDarkMode\n      ? \"mapbox://styles/mapbox/dark-v10\"\n      : \"mapbox://styles/mapbox/light-v10\";\n  }\n}\n\nexport const useBasicStylePair = useBasicMapStyle;\n"],"names":[],"version":3,"file":"map-interface.cf6c9a68.js.map"}

package/dist/cjs/{map-interface.1d19056e.js → map-interface.dcbd3874.js}

@@ -6,6 +6,7 @@ var $hshpw$macrostrathyper = require("@macrostrat/hyper");
 var $hshpw$macrostratuicomponents = require("@macrostrat/ui-components");
 var $hshpw$macrostratmapboxreact = require("@macrostrat/mapbox-react");
 var $hshpw$classnames = require("classnames");
+var $hshpw$macrostratmapboxutils = require("@macrostrat/mapbox-utils");
 
 
 function $parcel$interopDefault(a) {
@@ -24,10 +25,11 @@ $parcel$export(module.exports, "InfoDrawerHeader", () => $548387e5996cdbbd$expor
 
 
 
+
 const $548387e5996cdbbd$var$h = (0, ($parcel$interopDefault($hshpw$macrostrathyper))).styled((0, ($parcel$interopDefault($a8d7c4c397e52cf6$exports))));
 function $548387e5996cdbbd$var$PositionButton({ position: position, bounds: bounds, showCopyLink: showCopyLink = false }) {
     const focusState = (0, $hshpw$macrostratmapboxreact.useFocusState)(position);
-    const copyLinkIsVisible = (0, $hshpw$macrostratmapboxreact.isCentered)(focusState) && showCopyLink;
+    const copyLinkIsVisible = (0, $hshpw$macrostratmapboxutils.isCentered)(focusState) && showCopyLink;
     return $548387e5996cdbbd$var$h("div.position-controls", [
         $548387e5996cdbbd$var$h((0, $hshpw$macrostratmapboxreact.LocationFocusButton), {
             location: position,
@@ -107,4 +109,4 @@ function $548387e5996cdbbd$export$e9ff14c4822c2e8c(props) {
 }
 
 
-//# sourceMappingURL=map-interface.1d19056e.js.map
+//# sourceMappingURL=map-interface.dcbd3874.js.map

package/dist/cjs/map-interface.dcbd3874.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAE5B,SAAS,qCAAe,YAAE,QAAQ,UAAE,MAAM,gBAAE,eAAe,OAAO;IAChE,MAAM,aAAa,CAAA,GAAA,0CAAY,EAAE;IAEjC,MAAM,oBAAoB,CAAA,GAAA,uCAAS,EAAE,eAAe;IAEpD,OAAO,wBAAE,yBAAyB;QAChC,wBAAE,CAAA,GAAA,gDAAkB,GAAG;YAAE,UAAU;oBAAU;wBAAQ;QAAW,GAAG,EAAE;QACrE,wBAAE,EAAE,CAAC,qBAAqB,YAAY,MAAM,sCAAgB;YAC1D,UAAU;QACZ;KACD;AACH;AAEA,SAAS,qCAAe,YAAE,QAAQ,YAAE,QAAQ,WAAE,OAAO,EAAE,GAAG,MAAM;IAC9D,MAAM,UAAU,CAAA,GAAA,wCAAS;IAEzB,IAAI,UAAU,CAAC,WAAW,CAAC;IAC3B,IAAI,YAAY,MACd,WAAW,CAAC,IAAI,EAAE,UAAU;IAE9B,WAAW;IAEX,OAAO,wBACL,CAAA,GAAA,6BAAK,GACL;QACE,WAAW;QACX,WAAW,wBAAE,CAAA,GAAA,2BAAG,GAAG;YAAE,MAAM;YAAQ,MAAM;QAAG;QAC5C,SAAS;QACT,OAAO;QACP;YACE,UAAU,SAAS,CAAC,SAAS,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAE,IAAI,CACtD;gBACE,SAAS,KAAK;6BACZ;oBACA,QAAQ;oBACR,MAAM;oBACN,SAAS;gBACX;gBACA;YACF,GACA;gBACE,SAAS,KAAK;oBACZ,SAAS;oBACT,QAAQ;oBACR,MAAM;oBACN,SAAS;gBACX;YACF;QAEJ;QACA,GAAG,IAAI;IACT,GACA,YAAY;AAEhB;AAcO,SAAS,0CAAiB,KAA4B;IAC3D,MAAM,WACJ,OAAO,YACP,QAAQ,UACR,MAAM,QACN,OAAO,cACP,SAAS,0BACT,sBAAsB,eACtB,cAAc,iBACd,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,aAAa;IACjB,IAAI,UAAU,QAAQ,YAAY,MAChC,aAAa,wBAAE,sCAAgB;kBAC7B;gBACA;QACA,cAAc;IAChB;IAGF,OAAO,wBACL,gCACA;QACE,WAAW,CAAA,GAAA,2CAAS,EAAE,WAAW;YAAE,gBAAgB;QAAY;IACjE,GACA;QACE;QACA;QACA,wBAAE;QACF,wBAAE,EAAE,CAAC,YAAY,MAAM,CAAA,GAAA,sCAAW,GAAG;sBACnC;kBACA;YACA,WAAW;QACb;QACA,wBAAE,EAAE,CAAC,aAAa,MAAM,CAAA,GAAA,mCAAQ,GAAG;uBACjC;YACA,WAAW;QACb;QACA,wBAAE,EAAE,CAAC,WAAW,MAAM,CAAA,GAAA,6BAAK,GAAG;YAC5B,SAAS;YACT,MAAM;YACN,SAAS;QACX;KACD;AAEL","sources":["packages/map-interface/src/location-panel/header.ts"],"sourcesContent":["import { Icon, Button } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useToaster } from \"@macrostrat/ui-components\";\nimport { LngLatCoords, Elevation } from \"../location-info\";\nimport { LocationFocusButton, useFocusState } from \"@macrostrat/mapbox-react\";\nimport classNames from \"classnames\";\nimport type { ReactNode } from \"react\";\nimport type { LngLatBounds, LngLatLike } from \"mapbox-gl\";\nimport { isCentered } from \"@macrostrat/mapbox-utils\";\n\nconst h = hyper.styled(styles);\n\nfunction PositionButton({ position, bounds, showCopyLink = false }) {\n  const focusState = useFocusState(position);\n\n  const copyLinkIsVisible = isCentered(focusState) && showCopyLink;\n\n  return h(\"div.position-controls\", [\n    h(LocationFocusButton, { location: position, bounds, focusState }, []),\n    h.if(copyLinkIsVisible && position != null)(CopyLinkButton, {\n      itemName: \"position\",\n    }),\n  ]);\n}\n\nfunction CopyLinkButton({ itemName, children, onClick, ...rest }) {\n  const toaster = useToaster();\n\n  let message = `Copied link`;\n  if (itemName != null) {\n    message += ` to ${itemName}`;\n  }\n  message += \"!\";\n\n  return h(\n    Button,\n    {\n      className: \"copy-link-button\",\n      rightIcon: h(Icon, { icon: \"link\", size: 12 }),\n      minimal: true,\n      small: true,\n      onClick() {\n        navigator.clipboard.writeText(window.location.href).then(\n          () => {\n            toaster?.show({\n              message,\n              intent: \"success\",\n              icon: \"clipboard\",\n              timeout: 1000,\n            });\n            onClick?.();\n          },\n          () => {\n            toaster?.show({\n              message: \"Failed to copy link\",\n              intent: \"danger\",\n              icon: \"error\",\n              timeout: 1000,\n            });\n          },\n        );\n      },\n      ...rest,\n    },\n    children ?? \"Copy link\",\n  );\n}\n\nexport interface InfoDrawerHeaderProps {\n  onClose?: () => void;\n  position?: LngLatLike;\n  zoom?: number;\n  elevation?: number;\n  showCopyPositionButton?: boolean;\n  bounds?: LngLatBounds;\n  fixedHeight?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function InfoDrawerHeader(props: InfoDrawerHeaderProps) {\n  const {\n    onClose,\n    position,\n    bounds,\n    zoom = 7,\n    elevation,\n    showCopyPositionButton,\n    fixedHeight = false,\n    children,\n    className,\n  } = props;\n\n  let leftButton = null;\n  if (bounds != null || position != null) {\n    leftButton = h(PositionButton, {\n      position,\n      bounds,\n      showCopyLink: showCopyPositionButton,\n    });\n  }\n\n  return h(\n    \"header.location-panel-header\",\n    {\n      className: classNames(className, { \"fixed-height\": fixedHeight }),\n    },\n    [\n      leftButton,\n      children,\n      h(\"div.spacer\"),\n      h.if(position != null)(LngLatCoords, {\n        position,\n        zoom,\n        className: \"infodrawer-header-item\",\n      }),\n      h.if(elevation != null)(Elevation, {\n        elevation,\n        className: \"infodrawer-header-item\",\n      }),\n      h.if(onClose != null)(Button, {\n        minimal: true,\n        icon: \"cross\",\n        onClick: onClose,\n      }),\n    ],\n  );\n}\n"],"names":[],"version":3,"file":"map-interface.dcbd3874.js.map"}

package/dist/cjs/{map-interface.175c4635.js → map-interface.f8826069.js}

@@ -1,6 +1,6 @@
 var $eRYHH$macrostratmapboxreact = require("@macrostrat/mapbox-react");
 var $eRYHH$mapboxtilebelt = require("@mapbox/tilebelt");
-var $eRYHH$react = require("react");
+var $eRYHH$macrostratmapboxutils = require("@macrostrat/mapbox-utils");
 
 
 function $parcel$export(e, n, v, s) {
@@ -12,22 +12,21 @@ $parcel$export(module.exports, "TileExtentLayer", () => $abbe8d0af34cbbed$export
 
 
 function $abbe8d0af34cbbed$export$86c09739b12f23cd({ tile: tile, color: color = "red" }) {
-    const styleCallback = (0, $eRYHH$react.useCallback)((map, val)=>{
+    (0, $eRYHH$macrostratmapboxreact.useMapStyleOperator)((map)=>{
         const style = map.getStyle();
         if (style.layers == null) return;
         style.layers = style.layers.filter((l)=>l.id != "tile-extent");
-        if (val == null) return map.setStyle(style);
-        const { x: x, y: y, z: z } = val;
+        if (tile == null) return map.setStyle(style);
+        const { x: x, y: y, z: z } = tile;
         const extent = (0, $eRYHH$mapboxtilebelt.tileToGeoJSON)([
             x,
             y,
             z
         ]);
-        const source = {
-            type: "geojson",
-            data: extent
-        };
-        const layer = {
+        (0, $eRYHH$macrostratmapboxutils.setGeoJSON)(map, "tile-extent", extent);
+        if (map.getLayer("tile-extent") != null) // If the layer already exists, we can just update it
+        map.removeLayer("tile-extent");
+        map.addLayer({
             id: "tile-extent",
             type: "line",
             source: "tile-extent",
@@ -35,17 +34,13 @@ function $abbe8d0af34cbbed$export$86c09739b12f23cd({ tile: tile, color: color =
                 "line-color": color,
                 "line-width": 2
             }
-        };
-        style.sources["tile-extent"] = source;
-        style.layers.push(layer);
-        map.setStyle(style);
+        });
     }, [
-        color
+        color,
+        tile
     ]);
-    const map = (0, $eRYHH$macrostratmapboxreact.useMapRef)();
-    (0, $eRYHH$macrostratmapboxreact.useMapConditionalStyle)(map, tile, styleCallback);
     return null;
 }
 
 
-//# sourceMappingURL=map-interface.175c4635.js.map
+//# sourceMappingURL=map-interface.f8826069.js.map

package/dist/cjs/map-interface.f8826069.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAMO,SAAS,0CAAgB,QAC9B,IAAI,SACJ,QAAQ,OAIT;IACC,CAAA,GAAA,gDAAkB,EAChB,CAAC;QACC,MAAM,QAAQ,IAAI,QAAQ;QAC1B,IAAI,MAAM,MAAM,IAAI,MAAM;QAC1B,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,IAAM,EAAE,EAAE,IAAI;QAClD,IAAI,QAAQ,MACV,OAAO,IAAI,QAAQ,CAAC;QAEtB,MAAM,KAAE,CAAC,KAAE,CAAC,KAAE,CAAC,EAAE,GAAG;QACpB,MAAM,SAAS,CAAA,GAAA,mCAAY,EAAE;YAAC;YAAG;YAAG;SAAE;QAEtC,CAAA,GAAA,uCAAS,EAAE,KAAK,eAAe;QAE/B,IAAI,IAAI,QAAQ,CAAC,kBAAkB,MACjC,qDAAqD;QACrD,IAAI,WAAW,CAAC;QAGlB,IAAI,QAAQ,CAAC;YACX,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,OAAO;gBACL,cAAc;gBACd,cAAc;YAChB;QACF;IACF,GACA;QAAC;QAAO;KAAK;IAEf,OAAO;AACT","sources":["packages/map-interface/src/dev/tile-extent.ts"],"sourcesContent":["import { useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { tileToGeoJSON } from \"@mapbox/tilebelt\";\nimport { setGeoJSON } from \"@macrostrat/mapbox-utils\";\n\ntype TileIndex = { x: number; y: number; z: number };\n\nexport function TileExtentLayer({\n  tile,\n  color = \"red\",\n}: {\n  tile: TileIndex | null;\n  color?: string;\n}) {\n  useMapStyleOperator(\n    (map) => {\n      const style = map.getStyle();\n      if (style.layers == null) return;\n      style.layers = style.layers.filter((l) => l.id != \"tile-extent\");\n      if (tile == null) {\n        return map.setStyle(style);\n      }\n      const { x, y, z } = tile;\n      const extent = tileToGeoJSON([x, y, z]);\n\n      setGeoJSON(map, \"tile-extent\", extent as any);\n\n      if (map.getLayer(\"tile-extent\") != null) {\n        // If the layer already exists, we can just update it\n        map.removeLayer(\"tile-extent\");\n      }\n\n      map.addLayer({\n        id: \"tile-extent\",\n        type: \"line\",\n        source: \"tile-extent\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 2,\n        },\n      });\n    },\n    [color, tile],\n  );\n  return null;\n}\n"],"names":[],"version":3,"file":"map-interface.f8826069.js.map"}