@macrostrat/map-interface 1.0.12 → 1.1.0

package/dist/index.js

@@ -1,13 +1,13 @@
 import "./index.css";
-import {useMemo as $Zz0sd$useMemo, useState as $Zz0sd$useState, useEffect as $Zz0sd$useEffect, useCallback as $Zz0sd$useCallback, useRef as $Zz0sd$useRef} from "react";
 import {Spinner as $Zz0sd$Spinner, Button as $Zz0sd$Button, Text as $Zz0sd$Text, Navbar as $Zz0sd$Navbar, Card as $Zz0sd$Card, Icon as $Zz0sd$Icon, Switch as $Zz0sd$Switch, Collapse as $Zz0sd$Collapse} from "@blueprintjs/core";
 import $Zz0sd$macrostrathyper, {addClassNames as $Zz0sd$addClassNames} from "@macrostrat/hyper";
-import {useMapStatus as $Zz0sd$useMapStatus, useFocusState as $Zz0sd$useFocusState, isCentered as $Zz0sd$isCentered, LocationFocusButton as $Zz0sd$LocationFocusButton, ZoomControl as $Zz0sd$ZoomControl, MapboxMapProvider as $Zz0sd$MapboxMapProvider, useMapPosition as $Zz0sd$useMapPosition, MapControlWrapper as $Zz0sd$MapControlWrapper, ThreeDControl as $Zz0sd$ThreeDControl, CompassControl as $Zz0sd$CompassControl, GlobeControl as $Zz0sd$GlobeControl, useMapRef as $Zz0sd$useMapRef, useMapEaseTo as $Zz0sd$useMapEaseTo, useMapDispatch as $Zz0sd$useMapDispatch, useMapConditionalStyle as $Zz0sd$useMapConditionalStyle} from "@macrostrat/mapbox-react";
+import {useMapStatus as $Zz0sd$useMapStatus, useFocusState as $Zz0sd$useFocusState, isCentered as $Zz0sd$isCentered, LocationFocusButton as $Zz0sd$LocationFocusButton, ZoomControl as $Zz0sd$ZoomControl, MapboxMapProvider as $Zz0sd$MapboxMapProvider, useMapPosition as $Zz0sd$useMapPosition, MapControlWrapper as $Zz0sd$MapControlWrapper, ThreeDControl as $Zz0sd$ThreeDControl, CompassControl as $Zz0sd$CompassControl, GlobeControl as $Zz0sd$GlobeControl, useMapRef as $Zz0sd$useMapRef, useMapEaseTo as $Zz0sd$useMapEaseTo, useMapDispatch as $Zz0sd$useMapDispatch, useMapInitialized as $Zz0sd$useMapInitialized, useMapConditionalStyle as $Zz0sd$useMapConditionalStyle} from "@macrostrat/mapbox-react";
 import {Spacer as $Zz0sd$Spacer, ErrorBoundary as $Zz0sd$ErrorBoundary, useToaster as $Zz0sd$useToaster, useDarkMode as $Zz0sd$useDarkMode, useStoredState as $Zz0sd$useStoredState, ToasterContext as $Zz0sd$ToasterContext, DevToolsButtonSlot as $Zz0sd$DevToolsButtonSlot, useInDarkMode as $Zz0sd$useInDarkMode, JSONView as $Zz0sd$JSONView, usePrevious as $Zz0sd$usePrevious} from "@macrostrat/ui-components";
 import $Zz0sd$classnames from "classnames";
 import {formatCoordForZoomLevel as $Zz0sd$formatCoordForZoomLevel, normalizeLng as $Zz0sd$normalizeLng, metersToFeet as $Zz0sd$metersToFeet, getMapboxStyle as $Zz0sd$getMapboxStyle, mergeStyles as $Zz0sd$mergeStyles, mapViewInfo as $Zz0sd$mapViewInfo, getMapPosition as $Zz0sd$getMapPosition, setMapPosition as $Zz0sd$setMapPosition} from "@macrostrat/mapbox-utils";
 import {format as $Zz0sd$format} from "d3-format";
 import $Zz0sd$mapboxgl, {ScaleControl as $Zz0sd$ScaleControl, GeolocateControl as $Zz0sd$GeolocateControl, Marker as $Zz0sd$Marker} from "mapbox-gl";
+import {useState as $Zz0sd$useState, useEffect as $Zz0sd$useEffect, useCallback as $Zz0sd$useCallback, useRef as $Zz0sd$useRef, useMemo as $Zz0sd$useMemo} from "react";
 import {asChromaColor as $Zz0sd$asChromaColor, toRGBAString as $Zz0sd$toRGBAString} from "@macrostrat/color-utils";
 import {useTransition as $Zz0sd$useTransition} from "transition-hook";
 import {debounce as $Zz0sd$debounce} from "underscore";
@@ -48,7 +48,6 @@ $parcel$export($6e914c81c8e053da$exports, "MapLoadingButton", () => $6e914c81c8e
 $parcel$export($6e914c81c8e053da$exports, "FloatingNavbar", () => $6e914c81c8e053da$export$a8cc0062d02a3841);
 
 
-
 var $fbe402416678c280$exports = {};
 
 $parcel$export($fbe402416678c280$exports, "loading-button", () => $fbe402416678c280$export$fcaa8d3bc8e9cf1e, (v) => $fbe402416678c280$export$fcaa8d3bc8e9cf1e = v);
@@ -89,13 +88,10 @@ function $6e914c81c8e053da$export$4ec83e90d030b2f3({ isLoading: isLoading = fals
     });
 }
 function $6e914c81c8e053da$export$9e3bae3c08bde368(props) {
-    const { isLoading: isLoading } = (0, $Zz0sd$useMapStatus)();
-    const mapIsLoading = (0, $Zz0sd$useMemo)(()=>isLoading, [
-        isLoading
-    ]);
+    const isLoading = (0, $Zz0sd$useMapStatus)((s)=>s.isLoading);
     return $6e914c81c8e053da$var$h($6e914c81c8e053da$export$4ec83e90d030b2f3, {
         ...props,
-        isLoading: mapIsLoading
+        isLoading: isLoading
     });
 }
 function $6e914c81c8e053da$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 $4bc3dd5f0732eed3$export$2ab96428dea558d6({ containerRef: containerRef,
 function $4bc3dd5f0732eed3$export$f6eeee399afc4e9a({ onMapMoved: onMapMoved = null }) {
     const mapRef = (0, $Zz0sd$useMapRef)();
     const dispatch = (0, $Zz0sd$useMapDispatch)();
+    const isInitialized = (0, $Zz0sd$useMapInitialized)();
     const mapMovedCallback = (0, $Zz0sd$useCallback)(()=>{
         const map = mapRef.current;
         if (map == null) return;
@@ -1016,9 +1013,9 @@ function $4bc3dd5f0732eed3$export$f6eeee399afc4e9a({ onMapMoved: onMapMoved = nu
         });
         onMapMoved?.(mapPosition, map);
     }, [
-        mapRef.current,
         onMapMoved,
-        dispatch
+        dispatch,
+        isInitialized
     ]);
     (0, $Zz0sd$useEffect)(()=>{
         // Get the current value of the map. Useful for gradually moving away
@@ -1041,6 +1038,7 @@ function $4bc3dd5f0732eed3$export$e57f9eaa51773f82({ ignoredSources: ignoredSour
     const mapRef = (0, $Zz0sd$useMapRef)();
     const loadingRef = (0, $Zz0sd$useRef)(false);
     const dispatch = (0, $Zz0sd$useMapDispatch)();
+    const isInitialized = (0, $Zz0sd$useMapInitialized)();
     (0, $Zz0sd$useEffect)(()=>{
         const map = mapRef.current;
         const mapIsLoading = loadingRef.current;
@@ -1074,35 +1072,34 @@ function $4bc3dd5f0732eed3$export$e57f9eaa51773f82({ ignoredSources: ignoredSour
         };
     }, [
         ignoredSources,
-        mapRef.current,
-        mapIsLoading
+        mapIsLoading,
+        isInitialized
     ]);
     return null;
 }
 function $4bc3dd5f0732eed3$export$5c90a91c7455938c({ position: position, setPosition: setPosition, centerMarker: centerMarker = true }) {
     const mapRef = (0, $Zz0sd$useMapRef)();
     const markerRef = (0, $Zz0sd$useRef)(null);
+    const isInitialized = (0, $Zz0sd$useMapInitialized)();
     (0, $82fe09613877ffc2$export$278090850f6b3a9f)(mapRef, markerRef, position);
-    const handleMapClick = (0, $Zz0sd$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, $Zz0sd$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 $9e150e311a3261e9$export$ab1e7a67d6ec5ad8(props) {
     let mapRef = (0, $Zz0sd$useMapRef)();
     const ref = (0, $Zz0sd$useRef)();
     const parentRef = (0, $Zz0sd$useRef)();
-    // Keep track of map position for reloads
-    (0, $Zz0sd$useEffect)(()=>{
-        console.log("Map updated", mapRef.current);
-    }, [
-        mapRef.current
-    ]);
     (0, $Zz0sd$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, $82fe09613877ffc2$export$bb78f9f01775eef1)(ref, parentRef), {
+                animate: false
+            });
+            onMapLoaded?.(map);
         }
-        const map = initializeMap(ref.current, {
-            style: style,
-            projection: projection,
-            mapPosition: mapPosition,
-            ...rest
-        });
-        map.setPadding((0, $82fe09613877ffc2$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, $Zz0sd$useMapPosition)();
     const { mapUse3D: mapUse3D, mapIsRotated: mapIsRotated } = (0, $Zz0sd$mapViewInfo)(_computedMapPosition);
     // Get map projection
@@ -1810,7 +1799,7 @@ function $b8c84b63e75fe4f2$export$617d79dae526d2cf({ features: features }) {
 
 
 const $a281a0612311d660$export$dda1d9f60106f0e9 = (0, $Zz0sd$macrostrathyper).styled((0, (/*@__PURE__*/$parcel$interopDefault($bfe9593b6c29b10b$exports))));
-function $a281a0612311d660$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 $a281a0612311d660$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 $a281a0612311d660$export$c5febf3ae8816972({ title: title = "Map inspect
   */ const dark = (0, $Zz0sd$useDarkMode)();
     const isEnabled = dark?.isEnabled;
     if (mapboxToken != null) (0, $Zz0sd$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, $Zz0sd$useState)(false);
     const [state, setState] = (0, $Zz0sd$useStoredState)("macrostrat:dev-map-page", {
         showTileExtent: false,
         xRay: false
     });
     const { showTileExtent: showTileExtent, xRay: xRay } = state;
-    const [actualStyle, setActualStyle] = (0, $Zz0sd$useState)(style);
-    console.log("actualStyle", actualStyle);
+    const [actualStyle, setActualStyle] = (0, $Zz0sd$useState)(null);
     (0, $Zz0sd$useEffect)(()=>{
         (0, $64ee2eed3ed5ffbc$export$e739dc8dfc0db9a6)(style, overlayStyle, {
             mapboxToken: mapboxToken,
@@ -1892,6 +1881,7 @@ function $a281a0612311d660$export$c5febf3ae8816972({ title: title = "Map inspect
             title: title
         }),
         contextPanel: $a281a0612311d660$export$dda1d9f60106f0e9((0, $4bdfa9cd8240b2fd$export$ec68dd77edbe678b), [
+            children,
             $a281a0612311d660$export$dda1d9f60106f0e9((0, $Zz0sd$Switch), {
                 checked: xRay,
                 label: "X-ray mode",
@@ -1901,8 +1891,7 @@ function $a281a0612311d660$export$c5febf3ae8816972({ title: title = "Map inspect
                         xRay: !xRay
                     });
                 }
-            }),
-            children
+            })
         ]),
         detailPanel: detailElement,
         contextPanelOpen: isOpen,