pretty cool!

Author: Zulko

src/App.svelte

@@ -5,33 +5,7 @@
   import { getGeoEntriesInBounds, getUniqueByGeoHash } from "./lib/geodata";
   import { Mixin } from "leaflet";
 
-  let markers = [
-    {
-      lat: 51.508056,
-      lon: -0.076111,
-      name: "City with a very very long name",
-      type: "city",
-      pageTitle: "London",
-      sizeClass: "full",
-    },
-    {
-      lat: 48.8566,
-      lon: 2.3522,
-      name: "Paris",
-      type: "landmark",
-      pageTitle: "Paris",
-      sizeClass: "full",
-      isSelected: true,
-    },
-    {
-      lat: 40.7128,
-      lon: -74.006,
-      name: "New York",
-      type: "city",
-      pageTitle: "New York City",
-      sizeClass: "full",
-    },
-  ];
+  let markers = [];
 
   let dataStatus = "not started";
   let mapBounds = {
@@ -73,9 +47,40 @@
       zoom: Math.max(13, mapZoom), // Ensure zoom is at least 13
     };
 
-    openWikiPane(marker.pageTitle);
+    openWikiPane(marker.page_title);
   }
 
+  function addCosmeticsToEntries(entries, hashlevel) {
+    if (hashlevel > 7.5) {
+      for (const entry of entries) {
+        entry.sizeClass = "full";
+      }
+    } else {
+      for (const entry of entries) {
+        entry.sizeClass = "dot";
+      }
+      for (const entry of getUniqueByGeoHash({
+        entries,
+        hashLength: hashlevel - 0.5,
+        scoreField: "page_len",
+      })) {
+        entry.sizeClass = "reduced";
+      }
+      for (const entry of getUniqueByGeoHash({
+        entries,
+        hashLength: hashlevel - 1.5,
+        scoreField: "page_len",
+      })) {
+        entry.sizeClass = "full";
+      }
+    }
+    // Sort entries so "full" size class appears last
+    entries.sort((a, b) => {
+      if (a.sizeClass === "full" && b.sizeClass !== "full") return 1;
+      if (a.sizeClass !== "full" && b.sizeClass === "full") return -1;
+      return 0;
+    });
+  }
   async function handleBoundsChange(event) {
     const center = event.detail.center;
     mapZoom = event.detail.zoom;
@@ -88,12 +93,16 @@
       maxLon: event.detail.bounds._northEast.lng,
     };
     const entries = await getGeoEntriesInBounds(bounds);
+    console.log(mapZoom, Math.max(1, Math.min(8, mapZoom / 2)));
+    const hashlevel = Math.max(1, Math.min(8, mapZoom / 2));
     const uniqueEntries = getUniqueByGeoHash({
       entries,
-      hashLength: Math.min(8, mapZoom / 2),
+      hashLength: hashlevel,
       scoreField: "page_len",
     });
+    addCosmeticsToEntries(uniqueEntries, hashlevel);
     console.log("Unique entries:", uniqueEntries);
+    markers = uniqueEntries;
   }
   onMount(async () => {
     console.log("App starting");
@@ -120,7 +129,7 @@
     on:markerclick={handleMarkerClick}
   />
 
-  <SlidingPane bind:isOpen={isPaneOpen} title={wikiPage} pageTitle={wikiPage}>
+  <SlidingPane bind:isOpen={isPaneOpen} title={wikiPage} page_title={wikiPage}>
     <!-- Content will be handled by the iframe in SlidingPane -->
   </SlidingPane>
 </main>

src/lib/Map.svelte

@@ -16,7 +16,7 @@
   let mapElement;
   let map;
   let markerLayer;
-
+  let startZoom = 0;
   // Use the traditional event dispatcher
   const dispatch = createEventDispatcher();
 
@@ -44,15 +44,26 @@
       mountain: "mountain-snow",
       other: "pin",
       railwaystation: "train-front",
-      river: "river",
+      river: "waves",
       school: "school",
       settlement: "city",
       town: "city",
       village: "city",
       waterbody: "waves",
     };
-    const icon = iconByType[marker.type] || iconByType.other;
-
+    const icon = iconByType[marker.category] || iconByType.other;
+    const unsanitized_page_title = marker.page_title.replaceAll("_", " ");
+    let label = marker.name;
+    if (!marker.name) {
+      label = unsanitized_page_title;
+    } else if (unsanitized_page_title.includes(marker.name)) {
+      label = unsanitized_page_title;
+    } else {
+      const fullLabel = marker.name + " - " + unsanitized_page_title;
+      if (fullLabel.length <= 30) {
+        label = fullLabel;
+      }
+    }
     return `
     <div class="map-marker marker-size-${marker.sizeClass} ${
       marker.isSelected ? "marker-selected" : ""
@@ -61,10 +72,8 @@
           <img src="/icons/${icon}.svg">
         </div>
         <div class="marker-text-container">
-          <div class="marker-text marker-text-outline">${
-            marker.name || marker.page
-          }</div>
-          <div class="marker-text">${marker.name || marker.page}</div>
+          <div class="marker-text marker-text-outline">${label}</div>
+          <div class="marker-text">${label}</div>
         </div>
       </div>
     `;
@@ -115,6 +124,10 @@
 
   function flyTo(targetLocation) {
     const { lat, lon, zoom: targetZoom } = targetLocation;
+    // If target zoom is less than current zoom, clear markers first
+    if (targetZoom < map.getZoom()) {
+      markerLayer.clearLayers();
+    }
     isFlying = true;
     map.flyTo([lat, lon], targetZoom, {
       animate: true,

src/lib/SlidingPane.svelte

@@ -5,7 +5,7 @@
   // Props
   export let isOpen = false;
   export let title = "";
-  export let pageTitle = ""; // Wikipedia page name
+  export let page_title = ""; // Wikipedia page name
   export let width = "400px"; // Default width for desktop
   export let height = "70vh"; // Default height for mobile
 
@@ -37,15 +37,15 @@
   }
 
   // Generate Wikipedia URL
-  $: wikiUrl = pageTitle
+  $: wikiUrl = page_title
     ? isMobile || parseInt(actualWidth) < 768
-      ? `https://en.m.wikipedia.org/wiki/${encodeURIComponent(pageTitle)}`
-      : `https://en.wikipedia.org/wiki/${encodeURIComponent(pageTitle)}`
+      ? `https://en.m.wikipedia.org/wiki/${encodeURIComponent(page_title)}`
+      : `https://en.wikipedia.org/wiki/${encodeURIComponent(page_title)}`
     : "about:blank";
 
   // Open in new tab
   function openInNewTab() {
-    if (pageTitle) {
+    if (page_title) {
       window.open(wikiUrl, "_blank");
     }
   }
@@ -94,7 +94,7 @@
     >
       <SlidingPaneHeader
         {title}
-        {pageTitle}
+        {page_title}
         {expanded}
         {isMobile}
         onClose={close}
@@ -103,7 +103,7 @@
       />
 
       <div class="pane-content">
-        {#if pageTitle}
+        {#if page_title}
           <iframe
             title="Wikipedia Content"
             src={wikiUrl}