so far so ok

Author: Zulko

src/App.svelte

@@ -3,11 +3,10 @@
   import Map from "./lib/Map.svelte";
   import SlidingPane from "./lib/SlidingPane.svelte";
   import { getGeoEntriesInBounds, getUniqueByGeoHash } from "./lib/geodata";
+  import { updateURLParams, readURLParams } from "./lib/urlState";
 
   let markers = [];
 
-  let dataStatus = "not started";
-
   // State to control the sliding pane
   let isPaneOpen = false;
   let wikiPage = "";
@@ -23,28 +22,38 @@
     zoom: 1,
   };
 
+  // Track if we need to select a marker once data is loaded
+
   // Function to open the pane with a Wikipedia page
   function openWikiPane(page) {
     wikiPage = page;
     isPaneOpen = true;
   }
 
   // Function to handle marker clicks
-  function handleMarkerClick(event) {
+  async function handleMarkerClick(event) {
     const marker = event.detail;
     selectedMarker = marker;
-
-    // Set the target location instead of directly setting center/zoom
+    const hashlevel = Math.max(1, Math.min(8, mapZoom / 2));
+    markers = addMarkerClasses([...markers], hashlevel);
+    openWikiPane(marker.page_title);
     targetMapLocation = {
       lat: marker.lat,
       lon: marker.lon,
       zoom: Math.max(13, mapZoom), // Ensure zoom is at least 13
     };
 
-    openWikiPane(marker.page_title);
+    // Update URL only for user-initiated actions
+    updateURLParams(targetMapLocation, selectedMarker);
   }
 
-  function addCosmeticsToEntries(entries, hashlevel) {
+  function addMarkerClasses(entries, hashlevel) {
+    for (const entry of entries) {
+      entry.isSelected = selectedMarker
+        ? entry.page_title === selectedMarker.page_title &&
+          entry.geohash === selectedMarker.geohash
+        : false;
+    }
     if (hashlevel > 7.5) {
       for (const entry of entries) {
         entry.sizeClass = "full";
@@ -69,34 +78,70 @@
       }
     }
     // Sort entries so "full" size class appears last
+    // TODO: probably better done via the CSS classes
     entries.sort((a, b) => {
-      if (a.sizeClass === "full" && b.sizeClass !== "full") return 1;
-      if (a.sizeClass !== "full" && b.sizeClass === "full") return -1;
+      if (a.isSelected) {
+        console.log("here");
+        return -1;
+      }
+      if (a.sizeClass === "full" && b.sizeClass !== "full") return -1;
+      if (a.sizeClass !== "full" && b.sizeClass === "full") return 1;
       return 0;
     });
+    return entries;
   }
   async function handleBoundsChange(event) {
     const center = event.detail.center;
     mapZoom = event.detail.zoom;
-    console.log(event.detail.center);
+
+    // Update targetMapLocation with the new center and zoom
+    const urlTargetMapLocation = {
+      lat: center.lat,
+      lon: center.lng,
+      zoom: mapZoom,
+    };
+    updateURLParams(urlTargetMapLocation, selectedMarker);
+
     const bounds = {
       minLat: event.detail.bounds._southWest.lat,
       maxLat: event.detail.bounds._northEast.lat,
       minLon: event.detail.bounds._southWest.lng,
       maxLon: event.detail.bounds._northEast.lng,
     };
+
     const entries = await getGeoEntriesInBounds(bounds);
     const hashlevel = Math.max(1, Math.min(8, mapZoom / 2));
     const uniqueEntries = getUniqueByGeoHash({
       entries,
       hashLength: hashlevel,
       scoreField: "page_len",
     });
-    addCosmeticsToEntries(uniqueEntries, hashlevel);
+    if (
+      selectedMarker &&
+      !uniqueEntries.some(
+        (entry) =>
+          entry.page_title === selectedMarker.page_title &&
+          entry.geohash === selectedMarker.geohash
+      )
+    ) {
+      uniqueEntries.push(selectedMarker);
+    }
+
+    addMarkerClasses(uniqueEntries, hashlevel);
     markers = uniqueEntries;
   }
   onMount(async () => {
     console.log("App starting");
+
+    // Read URL parameters when the app loads
+    const urlState = readURLParams();
+    if (urlState.targetLocation) {
+      targetMapLocation = urlState.targetLocation;
+    }
+    if (urlState.selectedMarker) {
+      selectedMarker = urlState.selectedMarker;
+      openWikiPane(selectedMarker.page_title);
+    }
   });
 </script>
 

src/lib/Map.svelte

@@ -6,10 +6,6 @@
 
   // Props
   export let markers = [];
-  // export let zoom = 13;
-  // export let center = [51.508056, -0.076111]; // Default to London
-  export let onMarkerClick = null; // Function to call when marker is clicked
-
   // New props for controlled centering
   export let targetLocation = null; // Format: { lat, lon, zoom }
 
@@ -22,6 +18,8 @@
 
   let isFlying = false; // Track if map is currently in flyTo animation
 
+  let selectedMarker = null;
+
   function computeMarkerHtml(marker) {
     const iconByType = {
       adm1st: "map",
@@ -147,9 +145,14 @@
 
   // Watch for changes to targetLocation and update the map view
   $: if (map && targetLocation) {
+    updateMarkers();
     flyTo(targetLocation);
   }
 
+  $: if (markers && map) {
+    updateMarkers();
+  }
+
   function handleBoundsChange() {
     if (!map || isFlying) return; // Skip if map is flying
 
@@ -171,6 +174,8 @@
 
     // Add new markers
     markers.forEach((marker) => {
+      // Set isSelected property based on selected marker
+
       const markerHtml = computeMarkerHtml(marker);
       const icon = L.divIcon({
         className: "custom-div-icon",
@@ -189,9 +194,6 @@
   }
 
   // Watch for changes to markers
-  $: if (markers && map) {
-    updateMarkers();
-  }
 
   // Handle container size changes
   function handleResize() {
@@ -234,6 +236,12 @@
     &.marker-selected > .marker-icon-circle {
       --circle-size: 32px !important;
       box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.35);
+      z-index: 1000 !important;
+    }
+
+    &.marker-selected {
+      /* Ensure hovered markers appear above others */
+      z-index: 1000 !important;
     }
 
     &:hover > .marker-text-container,

src/lib/urlState.js

@@ -0,0 +1,68 @@
+/**
+ * Updates the URL with current map state without reloading the page
+ * @param {Object} targetLocation - The map location {lat, lon, zoom}
+ * @param {Object|null} selectedMarker - Currently selected marker, if any
+ */
+export function updateURLParams(targetLocation, selectedMarker) {
+  const params = new URLSearchParams();
+  
+  // Add map position parameters
+  params.set('lat', targetLocation.lat.toFixed(6));
+  params.set('lon', targetLocation.lon.toFixed(6));
+  params.set('zoom', targetLocation.zoom.toString());
+  
+  // Add selected marker as base64-encoded JSON if present
+  if (selectedMarker) {
+    try {
+      const markerJson = JSON.stringify(selectedMarker);
+      const markerBase64 = btoa(encodeURIComponent(markerJson));
+      params.set('marker', markerBase64);
+    } catch (e) {
+      console.error('Error encoding marker data:', e);
+    }
+  }
+  
+  // Update URL without reloading the page
+  const newUrl = `${window.location.pathname}?${params.toString()}`;
+  window.history.replaceState({}, '', newUrl);
+}
+
+/**
+ * Reads map state from URL parameters
+ * @returns {Object} - Object containing parsed parameters and selected marker
+ */
+export function readURLParams() {
+  const params = new URLSearchParams(window.location.search);
+  
+  // Get map position parameters
+  const lat = parseFloat(params.get('lat'));
+  const lon = parseFloat(params.get('lon'));
+  const zoom = parseInt(params.get('zoom'));
+  const markerBase64 = params.get('marker');
+  
+  const result = {
+    targetLocation: null,
+    selectedMarker: null
+  };
+  
+  // Update location if valid parameters exist
+  if (!isNaN(lat) && !isNaN(lon) && !isNaN(zoom)) {
+    result.targetLocation = {
+      lat,
+      lon,
+      zoom
+    };
+  }
+  
+  // If there's a marker parameter, decode the base64 data
+  if (markerBase64) {
+    try {
+      const markerJson = decodeURIComponent(atob(markerBase64));
+      result.selectedMarker = JSON.parse(markerJson);
+    } catch (e) {
+      console.error('Error decoding marker data:', e);
+    }
+  }
+  
+  return result;
+}