Updated URL management

Author: davenquinn

pages/dev/map/rockd-strabospot/+Page.client.ts

@@ -22,8 +22,11 @@ import { DetailsPanel } from "./details-panel";
 import Legend from "./legend-text.mdx";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { usePageContext } from "vike-react/usePageContext";
-import { navigate } from "vike/client/router";
-import { formatCoordForZoomLevel } from "@macrostrat/mapbox-utils";
+import {
+  AnyMapPosition,
+  formatCoordForZoomLevel,
+  MapPosition,
+} from "@macrostrat/mapbox-utils";
 
 const h = hyper.styled(styles);
 
@@ -32,56 +35,15 @@ mapboxgl.accessToken = mapboxAccessToken;
 const baseURL = "/dev/map/rockd-strabospot";
 
 export function Page() {
-  const { routeParams } = usePageContext();
-  const { lng, lat } = routeParams;
-
-  let initialPosition = null;
-  if (lng != null && lat != null) {
-    try {
-      // Try to get the zoom level from the hash
-      const q = new URLSearchParams(window.location.hash.slice(1));
-      const zoom = q.has("z") ? parseInt(q.get("z")) : 7;
-
-      initialPosition = { lng: parseFloat(lng), lat: parseFloat(lat), zoom };
-    } catch {
-      console.error("Failed to parse initial position");
-    }
-  }
+  const [inspectPosition, onSelectPosition] = useMapLocationManager();
 
   const style = useRockdStraboSpotStyle();
   const inDarkMode = useInDarkMode();
 
   const [isOpen, setOpen] = useState(true);
 
-  const [inspectPosition, setInspectPosition] =
-    useState<mapboxgl.LngLat | null>(initialPosition);
-
   const [data, setData] = useState(null);
 
-  const onSelectPosition = useCallback(
-    (
-      position: mapboxgl.LngLat | null,
-      event: Event | undefined,
-      map: mapboxgl.Map | undefined
-    ) => {
-      setInspectPosition(position);
-      let newPathname = "/dev/map/rockd-strabospot";
-      let currentPathname = window.location.pathname;
-
-      if (map != null && position != null) {
-        const z = map.getZoom() ?? 7;
-        const lng = formatCoordForZoomLevel(position.lng, z);
-        const lat = formatCoordForZoomLevel(position.lat, z);
-        newPathname += `/loc/${lng}/${lat}`;
-      }
-      newPathname += buildHashParams(map, position);
-      if (currentPathname !== newPathname) {
-        window.history.pushState({}, "", newPathname);
-      }
-    },
-    []
-  );
-
   return h(
     MapAreaContainer,
     {
@@ -114,10 +76,10 @@ export function Page() {
         style,
         projection: { name: "globe" },
         mapboxToken: mapboxAccessToken,
-        mapPosition: initialPosition,
+        mapPosition: inspectPosition,
         bounds: [-125, 24, -66, 49],
-        onMapMoved(mapPosition, map) {
-          window.location.hash = buildHashParams(map, inspectPosition);
+        onMapMoved(pos, map) {
+          setURL(inspectPosition, map);
         },
       },
       [
@@ -128,13 +90,68 @@ export function Page() {
         }),
         h(MapMarker, {
           position: inspectPosition,
-          setPosition: onSelectPosition,
+          setPosition(pos, event, map) {
+            onSelectPosition(pos, map);
+          },
         }),
       ]
     )
   );
 }
 
+type PositionBuilder = (
+  position: MapPosition | null,
+  map: mapboxgl.Map | undefined
+) => void;
+
+function useMapLocationManager(): [MapPosition, PositionBuilder] {
+  const { routeParams } = usePageContext();
+  const { lng, lat } = routeParams;
+
+  let initialPosition = null;
+  if (lng != null && lat != null) {
+    try {
+      // Try to get the zoom level from the hash
+      const q = new URLSearchParams(window.location.hash.slice(1));
+      const zoom = q.has("z") ? parseInt(q.get("z")) : 7;
+
+      initialPosition = { lng: parseFloat(lng), lat: parseFloat(lat), zoom };
+    } catch {
+      console.error("Failed to parse initial position");
+    }
+  }
+
+  const [inspectPosition, setInspectPosition] =
+    useState<mapboxgl.LngLat | null>(initialPosition);
+
+  const onSelectPosition = useCallback(
+    (position: mapboxgl.LngLat | null, map: mapboxgl.Map | undefined) => {
+      setInspectPosition(position);
+      setURL(position, map);
+    },
+    []
+  );
+
+  return [inspectPosition, onSelectPosition];
+}
+
+function setURL(position: mapboxgl.LngLat, map: mapboxgl.Map) {
+  let newPathname = "/dev/map/rockd-strabospot";
+  let currentPathname = window.location.pathname;
+
+  if (map != null && position != null) {
+    const z = map.getZoom() ?? 7;
+    const lng = formatCoordForZoomLevel(position.lng, z);
+    const lat = formatCoordForZoomLevel(position.lat, z);
+    newPathname += `/loc/${lng}/${lat}`;
+  }
+  newPathname += buildHashParams(map, position);
+  console.log(currentPathname, newPathname);
+  if (currentPathname !== newPathname) {
+    history.replaceState({}, "", newPathname);
+  }
+}
+
 function buildHashParams(map, selectedPosition) {
   if (selectedPosition == null) return "";
   const z = map.getZoom();