synced chart hover, fixed map position across pages

src/lib/components/ElevationChart.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	let {
 		profile,
+		hoverD = null,
 		onhover,
 		onselect
 	}: {
 		profile: { d: number; ele: number }[];
+		/** shared hover distance controlled by the page, so charts stay in sync */
+		hoverD?: number | null;
 		onhover?: (d: number | null) => void;
 		onselect?: (d: number) => void;
 	} = $props();
@@ -49,22 +52,23 @@
 		`${linePath}L${x(totalDist).toFixed(1)},${height - pad.bottom}L${pad.left},${height - pad.bottom}Z`
 	);
 
-	let hover = $state<{ d: number; ele: number } | null>(null);
+	// snap the shared hover distance to this chart's nearest point
-
+	const hover = $derived.by(() => {
-	function onmove(event: PointerEvent) {
+		if (hoverD === null || profile.length === 0) return null;
-		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
-		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-		const target = frac * totalDist;
-		// binary search closest point
 		let lo = 0;
 		let hi = profile.length - 1;
 		while (hi - lo > 1) {
 			const mid = (lo + hi) >> 1;
-			if (profile[mid].d < target) lo = mid;
+			if (profile[mid].d < hoverD) lo = mid;
 			else hi = mid;
 		}
-		hover = target - profile[lo].d < profile[hi].d - target ? profile[lo] : profile[hi];
+		return hoverD - profile[lo].d < profile[hi].d - hoverD ? profile[lo] : profile[hi];
-		onhover?.(hover.d);
+	});
+
+	function onmove(event: PointerEvent) {
+		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
+		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		onhover?.(frac * totalDist);
 	}
 
 	const tooltipLeft = $derived(hover ? Math.min(Math.max(x(hover.d), 70), width - 70) : 0);
@@ -105,10 +109,7 @@
 			fill="transparent"
 			onpointermove={onmove}
 			onclick={() => hover && onselect?.(hover.d)}
-			onpointerleave={() => {
+			onpointerleave={() => onhover?.(null)}
-				hover = null;
-				onhover?.(null);
-			}}
 		/>
 	</svg>
 	{#if hover}

src/lib/components/MapSlot.svelte

@@ -1,23 +1,11 @@
 <script lang="ts">
 	import { mapState } from '$lib/map-state.svelte';
 
-	let { height = '440px' }: { height?: string } = $props();
+	// Marker component: pages render this to request the persistent map,
-	let el: HTMLDivElement;
+	// which the layout shows in its fixed spot below the topbar - the same
-
+	// position on every page, so navigation never moves it.
-	// move the persistent map into this page's slot; return it on leave
 	$effect(() => {
-		if (mapState.carrier && el) {
+		mapState.setWanted(true);
-			mapState.attach(el);
+		return () => mapState.setWanted(false);
-			return () => mapState.detach();
-		}
 	});
 </script>
-
-<div class="map-slot" bind:this={el} style:height></div>
-
-<style>
-	.map-slot {
-		width: 100%;
-		border-radius: 0.875rem;
-	}
-</style>

src/lib/components/SpeedChart.svelte

@@ -3,10 +3,13 @@
 
 	let {
 		timed,
+		hoverD = null,
 		onhover,
 		onselect
 	}: {
 		timed: { d: number; t: number }[];
+		/** shared hover distance controlled by the page, so charts stay in sync */
+		hoverD?: number | null;
 		onhover?: (d: number | null) => void;
 		onselect?: (d: number) => void;
 	} = $props();
@@ -82,21 +85,23 @@
 			: ''
 	);
 
-	let hover = $state<{ d: number; v: number } | null>(null);
+	// snap the shared hover distance to this chart's nearest point
-
+	const hover = $derived.by(() => {
-	function onmove(event: PointerEvent) {
+		if (hoverD === null || series.length === 0) return null;
-		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
-		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-		const target = frac * totalDist;
 		let lo = 0;
 		let hi = series.length - 1;
 		while (hi - lo > 1) {
 			const mid = (lo + hi) >> 1;
-			if (series[mid].d < target) lo = mid;
+			if (series[mid].d < hoverD) lo = mid;
 			else hi = mid;
 		}
-		hover = target - series[lo].d < series[hi].d - target ? series[lo] : series[hi];
+		return hoverD - series[lo].d < series[hi].d - hoverD ? series[lo] : series[hi];
-		onhover?.(hover.d);
+	});
+
+	function onmove(event: PointerEvent) {
+		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
+		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		onhover?.(frac * totalDist);
 	}
 
 	const tooltipLeft = $derived(hover ? Math.min(Math.max(x(hover.d), 70), width - 70) : 0);
@@ -144,10 +149,7 @@
 			fill="transparent"
 			onpointermove={onmove}
 			onclick={() => hover && onselect?.(hover.d)}
-			onpointerleave={() => {
+			onpointerleave={() => onhover?.(null)}
-				hover = null;
-				onhover?.(null);
-			}}
 		/>
 	</svg>
 	{#if hover}

src/lib/map-state.svelte.ts

@@ -13,6 +13,7 @@ let detailTrack = $state<MapTrack | null>(null);
 let hoverPoint = $state<{ lat: number; lon: number } | null>(null);
 let carrier = $state<HTMLElement | null>(null);
 let active = $state(false);
+let wanted = $state(false);
 
 let home: HTMLElement | null = null;
 let peakClickHandler: ((id: number) => void) | null = null;
@@ -42,6 +43,12 @@ export const mapState = {
 	get active() {
 		return active;
 	},
+	get wanted() {
+		return wanted;
+	},
+	setWanted(value: boolean) {
+		wanted = value;
+	},
 
 	setPeaks(value: MapPeak[]) {
 		peaks = value;

src/routes/+layout.svelte

@@ -9,11 +9,20 @@
 
 	let mapHome: HTMLDivElement;
 	let mapCarrier: HTMLDivElement;
+	let layoutSlot: HTMLDivElement;
 
 	$effect(() => {
 		if (mapCarrier && mapHome) mapState.registerCarrier(mapCarrier, mapHome);
 	});
 
+	// show the persistent map in its fixed spot whenever the page asks for it
+	$effect(() => {
+		if (mapState.wanted && layoutSlot && mapState.carrier) {
+			mapState.attach(layoutSlot);
+			return () => mapState.detach();
+		}
+	});
+
 	let mapComponent: Map | undefined = $state();
 	$effect(() => {
 		if (mapComponent) {
@@ -136,6 +145,11 @@
 </header>
 
 <main>
+	<div
+		class="layout-map-slot"
+		bind:this={layoutSlot}
+		style:display={mapState.wanted ? 'block' : 'none'}
+	></div>
 	{@render children()}
 </main>
 
@@ -378,4 +392,8 @@
 		width: 100%;
 		height: 100%;
 	}
+	.layout-map-slot {
+		height: min(440px, 52vh);
+		margin-bottom: 1.75rem;
+	}
 </style>

src/routes/+page.svelte

@@ -30,8 +30,7 @@
 	<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
 </div>
 
-<h2>Worldmap</h2>
+<MapSlot />
-<MapSlot height="440px" />
 
 <h2>Recent activities</h2>
 {#if data.activities.length === 0}

src/routes/activities/[id]/+page.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+  import { enhance } from "$app/forms";
-	import MapSlot from '$lib/components/MapSlot.svelte';
+  import MapSlot from "$lib/components/MapSlot.svelte";
-	import ElevationChart from '$lib/components/ElevationChart.svelte';
+  import ElevationChart from "$lib/components/ElevationChart.svelte";
-	import SpeedChart from '$lib/components/SpeedChart.svelte';
+  import SpeedChart from "$lib/components/SpeedChart.svelte";
-	import StatTile from '$lib/components/StatTile.svelte';
+  import StatTile from "$lib/components/StatTile.svelte";
-	import { mapState } from '$lib/map-state.svelte';
+  import { mapState } from "$lib/map-state.svelte";
-	import { fmtDate, fmtDistance, fmtDuration, fmtElevation, fmtSpeed } from '$lib/format';
+  import {
+    fmtDate,
+    fmtDistance,
+    fmtDuration,
+    fmtElevation,
+    fmtSpeed,
+  } from "$lib/format";
 
   let { data, form } = $props();
   const a = $derived(data.activity);
 
   const avgSpeed = $derived(
-		a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null
+    a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null,
   );
 
   let editing = $state(false);
@@ -30,7 +36,10 @@
     return data.latlngs[d - trackD[lo] < trackD[hi] - d ? lo : hi];
   }
 
+  let hoverD = $state<number | null>(null);
+
   function chartHover(d: number | null) {
+    hoverD = d;
     if (d === null) {
       mapState.setHoverPoint(null);
       return;
@@ -42,7 +51,7 @@
   // chart click -> fly the map to that spot
   function chartSelect(d: number) {
     const [lat, lon] = pointAt(d);
-		mapState.flyTo(lat, lon, 14.5);
+    mapState.flyTo(lat, lon);
   }
 
   // the persistent map keeps the overview visible, dims the rest,
@@ -55,7 +64,7 @@
       type: a.type,
       date: a.date,
       distance_m: a.distance_m,
-			latlngs: data.latlngs
+      latlngs: data.latlngs,
     });
     mapState.setHighlight(a.id);
     mapState.setPeaks(data.bagged);
@@ -80,12 +89,19 @@
         saving = true;
         return async ({ update, result }) => {
           saving = false;
-					if (result.type === 'success') editing = false;
+          if (result.type === "success") editing = false;
           await update();
         };
       }}
     >
-			<input class="edit-name" name="name" required maxlength="120" value={a.name} aria-label="Activity name" />
+      <input
+        class="edit-name"
+        name="name"
+        required
+        maxlength="120"
+        value={a.name}
+        aria-label="Activity name"
+      />
       <input
         class="edit-type"
         name="type"
@@ -96,12 +112,16 @@
         aria-label="Activity type"
       />
       <datalist id="activity-types">
-				{#each ['hike', 'run', 'ride', 'ski', 'climbing', 'walk', 'snowshoe'] as t (t)}
+        {#each ["hike", "run", "ride", "ski", "climbing", "walk", "snowshoe"] as t (t)}
           <option value={t}></option>
         {/each}
       </datalist>
-			<button class="btn" type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
+      <button class="btn" type="submit" disabled={saving}
-			<button class="btn ghost" type="button" onclick={() => (editing = false)}>Cancel</button>
+        >{saving ? "Saving…" : "Save"}</button
+      >
+      <button class="btn ghost" type="button" onclick={() => (editing = false)}
+        >Cancel</button
+      >
       {#if form?.error}<span class="edit-error">{form.error}</span>{/if}
     </form>
   {:else}
@@ -109,13 +129,20 @@
       <h1>
         {a.name}
         {#if data.canDelete}
-					<button class="edit-btn" title="Edit name and type" aria-label="Edit name and type" onclick={() => (editing = true)}>
+          <button
+            class="edit-btn"
+            title="Edit name and type"
+            aria-label="Edit name and type"
+            onclick={() => (editing = true)}
+          >
             ✎
           </button>
         {/if}
       </h1>
       <p class="page-sub">
-				<a class="who" href="/users/{a.username}">{a.username}</a> · {fmtDate(a.date)} ·
+        <a class="who" href="/users/{a.username}">{a.username}</a> · {fmtDate(
+          a.date,
+        )} ·
         <span class="type">{a.type}</span>
       </p>
     </div>
@@ -125,7 +152,10 @@
       method="POST"
       action="?/delete"
       use:enhance={({ cancel }) => {
-				if (!confirm('Delete this activity? Peaks it reached stay in your list.')) cancel();
+        if (
+          !confirm("Delete this activity? Peaks it reached stay in your list.")
+        )
+          cancel();
       }}
     >
       <button class="btn danger" type="submit">Delete</button>
@@ -135,11 +165,15 @@
 
 <div class="kpis">
   <StatTile label="Distance" value={fmtDistance(a.distance_m)} />
-	<StatTile label="Ascent" value={fmtElevation(a.elev_gain_m)} detail="↓ {fmtElevation(a.elev_loss_m)}" />
+  <StatTile
+    label="Ascent"
+    value={fmtElevation(a.elev_gain_m)}
+    detail="↓ {fmtElevation(a.elev_loss_m)}"
+  />
   <StatTile
     label="Moving time"
     value={fmtDuration(a.moving_s ?? a.duration_s)}
-		detail={a.duration_s ? `total ${fmtDuration(a.duration_s)}` : ''}
+    detail={a.duration_s ? `total ${fmtDuration(a.duration_s)}` : ""}
   />
   {#if avgSpeed}
     <StatTile label="Avg moving speed" value={avgSpeed} />
@@ -151,17 +185,24 @@
 {#if data.bagged.length > 0}
   <div class="card bagged">
     ⛰ Peaks reached:
-		{#each data.bagged as peak, i (peak.id)}{i > 0 ? ', ' : ' '}<strong>{peak.name}</strong> ({peak.elevation_m} m){/each}
+    {#each data.bagged as peak, i (peak.id)}{i > 0 ? ", " : " "}<strong
+        >{peak.name}</strong
+      >
+      ({peak.elevation_m} m){/each}
   </div>
 {/if}
 
-<h2>Map</h2>
+<MapSlot />
-<MapSlot height="440px" />
 
 {#if data.profile.length > 1}
   <h2>Elevation profile</h2>
   <div class="card chart">
-		<ElevationChart profile={data.profile} onhover={chartHover} onselect={chartSelect} />
+    <ElevationChart
+      profile={data.profile}
+      {hoverD}
+      onhover={chartHover}
+      onselect={chartSelect}
+    />
     <div class="chart-meta">
       <span>Low {fmtElevation(a.elev_min_m)}</span>
       <span>High {fmtElevation(a.elev_max_m)}</span>
@@ -172,7 +213,12 @@
 {#if data.timed.length > 2}
   <h2>Speed</h2>
   <div class="card chart">
-		<SpeedChart timed={data.timed} onhover={chartHover} onselect={chartSelect} />
+    <SpeedChart
+      timed={data.timed}
+      {hoverD}
+      onhover={chartHover}
+      onselect={chartSelect}
+    />
   </div>
 {/if}
 

src/routes/peaks/+page.svelte

@@ -158,7 +158,7 @@
 	Zoom in to reveal less prominent summits; click a peak to cross it off.
 </p>
 
-<MapSlot height="480px" />
+<MapSlot />
 
 <div class="search">
 	<input