@macrostrat/map-interface 1.0.12 → 1.1.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.1.0] - 2024-11-16
+
+- Improve map state management with `zustand` (in `@macrostrat/mapbox-react`)
+- Add `styleType` prop to `DevMapPage` component to allow setting "standard"
+  Mapbox styles or "macrostrat" styles (the default)
+
 ## [1.0.12] - 2024-11-13
 
 - Add a `bounds` option to the `DevMapPage` component

package/dist/index.cjs.js

@@ -1,5 +1,4 @@
 require("./index.cjs.css");
-var $9B3TU$react = require("react");
 var $9B3TU$blueprintjscore = require("@blueprintjs/core");
 var $9B3TU$macrostrathyper = require("@macrostrat/hyper");
 var $9B3TU$macrostratmapboxreact = require("@macrostrat/mapbox-react");
@@ -8,6 +7,7 @@ var $9B3TU$classnames = require("classnames");
 var $9B3TU$macrostratmapboxutils = require("@macrostrat/mapbox-utils");
 var $9B3TU$d3format = require("d3-format");
 var $9B3TU$mapboxgl = require("mapbox-gl");
+var $9B3TU$react = require("react");
 var $9B3TU$macrostratcolorutils = require("@macrostrat/color-utils");
 var $9B3TU$transitionhook = require("transition-hook");
 var $9B3TU$underscore = require("underscore");
@@ -48,7 +48,6 @@ $parcel$export($fce5fc950d1fe35b$exports, "MapLoadingButton", () => $fce5fc950d1
 $parcel$export($fce5fc950d1fe35b$exports, "FloatingNavbar", () => $fce5fc950d1fe35b$export$a8cc0062d02a3841);
 
 
-
 var $7a1b0f72a2e7f87d$exports = {};
 
 $parcel$export($7a1b0f72a2e7f87d$exports, "loading-button", () => $7a1b0f72a2e7f87d$export$fcaa8d3bc8e9cf1e, (v) => $7a1b0f72a2e7f87d$export$fcaa8d3bc8e9cf1e = v);
@@ -89,13 +88,10 @@ function $fce5fc950d1fe35b$export$4ec83e90d030b2f3({ isLoading: isLoading = fals
     });
 }
 function $fce5fc950d1fe35b$export$9e3bae3c08bde368(props) {
-    const { isLoading: isLoading } = (0, $9B3TU$macrostratmapboxreact.useMapStatus)();
-    const mapIsLoading = (0, $9B3TU$react.useMemo)(()=>isLoading, [
-        isLoading
-    ]);
+    const isLoading = (0, $9B3TU$macrostratmapboxreact.useMapStatus)((s)=>s.isLoading);
     return $fce5fc950d1fe35b$var$h($fce5fc950d1fe35b$export$4ec83e90d030b2f3, {
         ...props,
-        isLoading: mapIsLoading
+        isLoading: isLoading
     });
 }
 function $fce5fc950d1fe35b$export$a8cc0062d02a3841({ className: className, children: children, headerElement: headerElement = null, title: title = null, statusElement: statusElement = null, rightElement: rightElement = null, height: height, width: width, style: style = {} }) {
@@ -1006,6 +1002,7 @@ function $2611a7b4364593e5$export$2ab96428dea558d6({ containerRef: containerRef,
 function $2611a7b4364593e5$export$f6eeee399afc4e9a({ onMapMoved: onMapMoved = null }) {
     const mapRef = (0, $9B3TU$macrostratmapboxreact.useMapRef)();
     const dispatch = (0, $9B3TU$macrostratmapboxreact.useMapDispatch)();
+    const isInitialized = (0, $9B3TU$macrostratmapboxreact.useMapInitialized)();
     const mapMovedCallback = (0, $9B3TU$react.useCallback)(()=>{
         const map = mapRef.current;
         if (map == null) return;
@@ -1016,9 +1013,9 @@ function $2611a7b4364593e5$export$f6eeee399afc4e9a({ onMapMoved: onMapMoved = nu
         });
         onMapMoved?.(mapPosition, map);
     }, [
-        mapRef.current,
         onMapMoved,
-        dispatch
+        dispatch,
+        isInitialized
     ]);
     (0, $9B3TU$react.useEffect)(()=>{
         // Get the current value of the map. Useful for gradually moving away
@@ -1041,6 +1038,7 @@ function $2611a7b4364593e5$export$e57f9eaa51773f82({ ignoredSources: ignoredSour
     const mapRef = (0, $9B3TU$macrostratmapboxreact.useMapRef)();
     const loadingRef = (0, $9B3TU$react.useRef)(false);
     const dispatch = (0, $9B3TU$macrostratmapboxreact.useMapDispatch)();
+    const isInitialized = (0, $9B3TU$macrostratmapboxreact.useMapInitialized)();
     (0, $9B3TU$react.useEffect)(()=>{
         const map = mapRef.current;
         const mapIsLoading = loadingRef.current;
@@ -1074,35 +1072,34 @@ function $2611a7b4364593e5$export$e57f9eaa51773f82({ ignoredSources: ignoredSour
         };
     }, [
         ignoredSources,
-        mapRef.current,
-        mapIsLoading
+        mapIsLoading,
+        isInitialized
     ]);
     return null;
 }
 function $2611a7b4364593e5$export$5c90a91c7455938c({ position: position, setPosition: setPosition, centerMarker: centerMarker = true }) {
     const mapRef = (0, $9B3TU$macrostratmapboxreact.useMapRef)();
     const markerRef = (0, $9B3TU$react.useRef)(null);
+    const isInitialized = (0, $9B3TU$macrostratmapboxreact.useMapInitialized)();
     (0, $3490fc4f4bda12f7$export$278090850f6b3a9f)(mapRef, markerRef, position);
-    const handleMapClick = (0, $9B3TU$react.useCallback)((event)=>{
-        setPosition(event.lngLat, event, mapRef.current);
-        // We should integrate this with the "easeToCenter" hook
-        if (centerMarker) mapRef.current?.flyTo({
-            center: event.lngLat,
-            duration: 800
-        });
-    }, [
-        mapRef.current,
-        setPosition
-    ]);
     (0, $9B3TU$react.useEffect)(()=>{
         const map = mapRef.current;
-        if (map != null && setPosition != null) map.on("click", handleMapClick);
+        if (map == null || setPosition == null) return;
+        const handleMapClick = (event)=>{
+            setPosition(event.lngLat, event, mapRef.current);
+            // We should integrate this with the "easeToCenter" hook
+            if (centerMarker) mapRef.current?.flyTo({
+                center: event.lngLat,
+                duration: 800
+            });
+        };
+        map.on("click", handleMapClick);
         return ()=>{
             map?.off("click", handleMapClick);
         };
     }, [
-        mapRef.current,
-        setPosition
+        setPosition,
+        isInitialized
     ]);
     return null;
 }
@@ -1216,54 +1213,46 @@ function $12b6032029db16d4$export$ab1e7a67d6ec5ad8(props) {
     let mapRef = (0, $9B3TU$macrostratmapboxreact.useMapRef)();
     const ref = (0, $9B3TU$react.useRef)();
     const parentRef = (0, $9B3TU$react.useRef)();
-    // Keep track of map position for reloads
-    (0, $9B3TU$react.useEffect)(()=>{
-        console.log("Map updated", mapRef.current);
-    }, [
-        mapRef.current
-    ]);
     (0, $9B3TU$react.useEffect)(()=>{
         if (style == null) return;
-        if (mapRef.current != null) {
+        let map = mapRef.current;
+        if (map != null) {
             console.log("Setting style", style);
-            mapRef.current.setStyle(style);
-            return;
+            map.setStyle(style);
+        } else {
+            console.log("Initializing map", style);
+            const map = initializeMap(ref.current, {
+                style: style,
+                projection: projection,
+                mapPosition: mapPosition,
+                ...rest
+            });
+            dispatch({
+                type: "set-map",
+                payload: map
+            });
+            map.setPadding((0, $3490fc4f4bda12f7$export$bb78f9f01775eef1)(ref, parentRef), {
+                animate: false
+            });
+            onMapLoaded?.(map);
         }
-        const map = initializeMap(ref.current, {
-            style: style,
-            projection: projection,
-            mapPosition: mapPosition,
-            ...rest
-        });
-        map.setPadding((0, $3490fc4f4bda12f7$export$bb78f9f01775eef1)(ref, parentRef), {
-            animate: false
-        });
-        map.on("style.load", ()=>{
+        const loadCallback = ()=>{
             onStyleLoaded?.(map);
             dispatch({
                 type: "set-style-loaded",
                 payload: true
             });
-        });
-        onMapLoaded?.(map);
-        dispatch({
-            type: "set-map",
-            payload: map
-        });
+        };
+        map = mapRef.current;
+        if (map.isStyleLoaded()) // Catch a race condition where the style is loaded before the callback is set
+        loadCallback();
+        map.on("style.load", loadCallback);
+        return ()=>{
+            map.off("style.load", loadCallback);
+        };
     }, [
         style
     ]);
-    // Map style updating
-    // useEffect(() => {
-    //   if (mapRef?.current == null || style == null) return;
-    //   mapRef?.current?.setStyle(style);
-    // }, [mapRef.current, style]);
-    // Set map position if it changes
-    // useEffect(() => {
-    //   const map = mapRef.current;
-    //   if (map == null || mapPosition == null) return;
-    //   setMapPosition(map, mapPosition);
-    // }, [mapPosition]);
     const _computedMapPosition = (0, $9B3TU$macrostratmapboxreact.useMapPosition)();
     const { mapUse3D: mapUse3D, mapIsRotated: mapIsRotated } = (0, $9B3TU$macrostratmapboxutils.mapViewInfo)(_computedMapPosition);
     // Get map projection
@@ -1810,7 +1799,7 @@ function $db14eb7a5c07abdb$export$617d79dae526d2cf({ features: features }) {
 
 
 const $6f5ca387ac26c0b5$export$dda1d9f60106f0e9 = (0, ($parcel$interopDefault($9B3TU$macrostrathyper))).styled((0, (/*@__PURE__*/$parcel$interopDefault($33088e8384af337c$exports))));
-function $6f5ca387ac26c0b5$export$c5febf3ae8816972({ title: title = "Map inspector", headerElement: headerElement = null, transformRequest: transformRequest = null, mapPosition: mapPosition = null, mapboxToken: mapboxToken = null, overlayStyle: overlayStyle = null, children: children, style: style, bounds: bounds = null, focusedSource: focusedSource = null, focusedSourceTitle: focusedSourceTitle = null, fitViewport: fitViewport = true }) {
+function $6f5ca387ac26c0b5$export$c5febf3ae8816972({ title: title = "Map inspector", headerElement: headerElement = null, transformRequest: transformRequest = null, mapPosition: mapPosition = null, mapboxToken: mapboxToken = null, overlayStyle: overlayStyle = null, children: children, style: style, bounds: bounds = null, focusedSource: focusedSource = null, focusedSourceTitle: focusedSourceTitle = null, fitViewport: fitViewport = true, styleType: styleType = "macrostrat" }) {
     /* 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.
@@ -1819,15 +1808,15 @@ function $6f5ca387ac26c0b5$export$c5febf3ae8816972({ title: title = "Map inspect
   */ const dark = (0, $9B3TU$macrostratuicomponents.useDarkMode)();
     const isEnabled = dark?.isEnabled;
     if (mapboxToken != null) (0, ($parcel$interopDefault($9B3TU$mapboxgl))).accessToken = mapboxToken;
-    style ??= isEnabled ? "mapbox://styles/mapbox/dark-v10" : "mapbox://styles/mapbox/light-v10";
+    if (styleType == "macrostrat") style ??= isEnabled ? "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true" : "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true";
+    else style ??= isEnabled ? "mapbox://styles/mapbox/dark-v10" : "mapbox://styles/mapbox/light-v10";
     const [isOpen, setOpen] = (0, $9B3TU$react.useState)(false);
     const [state, setState] = (0, $9B3TU$macrostratuicomponents.useStoredState)("macrostrat:dev-map-page", {
         showTileExtent: false,
         xRay: false
     });
     const { showTileExtent: showTileExtent, xRay: xRay } = state;
-    const [actualStyle, setActualStyle] = (0, $9B3TU$react.useState)(style);
-    console.log("actualStyle", actualStyle);
+    const [actualStyle, setActualStyle] = (0, $9B3TU$react.useState)(null);
     (0, $9B3TU$react.useEffect)(()=>{
         (0, $8646508ae99a5857$export$e739dc8dfc0db9a6)(style, overlayStyle, {
             mapboxToken: mapboxToken,
@@ -1892,6 +1881,7 @@ function $6f5ca387ac26c0b5$export$c5febf3ae8816972({ title: title = "Map inspect
             title: title
         }),
         contextPanel: $6f5ca387ac26c0b5$export$dda1d9f60106f0e9((0, $c3311f59335df34d$export$ec68dd77edbe678b), [
+            children,
             $6f5ca387ac26c0b5$export$dda1d9f60106f0e9((0, $9B3TU$blueprintjscore.Switch), {
                 checked: xRay,
                 label: "X-ray mode",
@@ -1901,8 +1891,7 @@ function $6f5ca387ac26c0b5$export$c5febf3ae8816972({ title: title = "Map inspect
                         xRay: !xRay
                     });
                 }
-            }),
-            children
+            })
         ]),
         detailPanel: detailElement,
         contextPanelOpen: isOpen,