From 02a15dc6555fea54baa5eea94601433f4887a768 Mon Sep 17 00:00:00 2001
From: luen <Luen@users.noreply.github.com>
Date: Wed, 11 Nov 2026 09:16:47 +1000
Subject: [PATCH 1/4] Charts: map shark moves between nurseries (#173)

/recaptures gets a map with one line per nursery pair and species
(width = moves, both directions pooled) over circles sized by
same-nursery recaptures; sharks with identity conflicts are left out.
Each shark's page joins consecutive captures at different nurseries
and lists capture numbers per site. Copy says the lines join capture
sites, not the route swum.

InteractiveMap gains toggleable line layers and MooreaMap draws lines
in the server-rendered fallback; both offer them as CSV.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/lib/components/InteractiveMap.svelte | 107 +++++++++++++++++++----
 src/lib/components/MooreaMap.svelte      |  52 +++++++++++
 src/routes/recaptures/+page.server.ts    |  58 ++++++++++++
 src/routes/recaptures/+page.svelte       |  30 +++++++
 src/routes/sharks/[id]/+page.server.ts   |  20 ++++-
 src/routes/sharks/[id]/+page.svelte      |  14 ++-
 6 files changed, 262 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/InteractiveMap.svelte b/src/lib/components/InteractiveMap.svelte
index 2fdeb6f..78aca48 100644
--- a/src/lib/components/InteractiveMap.svelte
+++ b/src/lib/components/InteractiveMap.svelte
@@ -1,5 +1,12 @@
 <script lang="ts" module>
-	import type { MapPoint } from './MooreaMap.svelte';
+	import type { MapLine, MapPoint } from './MooreaMap.svelte';
+
+	export interface MapLineLayer {
+		name: string;
+		/** CSS colour, applied through CSS so it follows the theme. */
+		color: string;
+		lines: MapLine[];
+	}
 
 	export interface MapLayer {
 		name: string;
@@ -41,6 +48,8 @@
 
 	let {
 		layers,
+		lineLayers = [],
+		lineLabel = '',
 		label,
 		valueLabel = '',
 		format = (v: number) => String(Math.round(v)),
@@ -49,6 +58,9 @@
 		fallback
 	}: {
 		layers: MapLayer[];
+		/** Lines drawn under the circles, width by value, one toggle per layer. */
+		lineLayers?: MapLineLayer[];
+		lineLabel?: string;
 		/** Accessible name of the map region. */
 		label: string;
 		valueLabel?: string;
@@ -64,18 +76,25 @@
 		columns: ['layer', 'name', 'lat', 'lon', valueLabel || 'value'],
 		rows: layers.flatMap((l) => l.points.map((p) => [l.name, p.label, p.lat, p.lon, p.value]))
 	}));
+	registerCsv(() => ({
+		columns: ['layer', 'line', 'from lat', 'from lon', 'to lat', 'to lon', lineLabel || 'value'],
+		rows: lineLayers.flatMap((g) =>
+			g.lines.map((l) => [g.name, l.label, l.from.lat, l.from.lon, l.to.lat, l.to.lon, l.value])
+		)
+	}));
 
 	let el = $state<HTMLDivElement>();
 	let ready = $state(false);
 
-	function popup(p: MapPoint) {
+	function popup(p: MapPoint | MapLine, unit = valueLabel) {
+		const href = 'href' in p ? p.href : undefined;
 		const box = document.createElement('div');
-		const title = document.createElement(p.href ? 'a' : 'strong');
+		const title = document.createElement(href ? 'a' : 'strong');
 		title.textContent = p.label;
-		if (p.href) (title as HTMLAnchorElement).href = p.href;
+		if (href) (title as HTMLAnchorElement).href = href;
 		box.append(title);
 		for (const line of [
-			p.value != null && valueLabel ? `${valueLabel}: ${format(p.value)}` : null,
+			p.value != null && unit ? `${unit}: ${format(p.value)}` : null,
 			p.sub ?? null
 		]) {
 			if (!line) continue;
@@ -89,7 +108,7 @@
 	let map = $state.raw<import('leaflet').Map>();
 	let leaflet: typeof import('leaflet') | undefined;
 	let drawn: {
-		groups: import('leaflet').LayerGroup[];
+		groups: { key: string; group: import('leaflet').LayerGroup }[];
 		control: import('leaflet').Control.Layers;
 	}[] = [];
 	let bases: Record<string, import('leaflet').TileLayer> = {};
@@ -137,17 +156,42 @@
 		const m = map;
 		const L = leaflet;
 		const current = layers;
+		const currentLines = lineLayers;
 		if (!m || !L || !el) return;
 		const hidden = new Set(
-			drawn.length
-				? current.map((l, i) => (drawn[0].groups[i] && !m.hasLayer(drawn[0].groups[i]) ? i : -1))
-				: []
+			drawn.flatMap((d) => d.groups.filter((g) => !m.hasLayer(g.group)).map((g) => g.key))
 		);
 		for (const d of drawn) {
-			d.groups.forEach((g) => g.remove());
+			d.groups.forEach((g) => g.group.remove());
 			d.control.remove();
 		}
 		const overlays: Record<string, import('leaflet').LayerGroup> = {};
+		const lineMax = Math.max(
+			1e-9,
+			...currentLines.flatMap((g) => g.lines.map((l) => l.value ?? 1))
+		);
+		const lineGroups = currentLines.map((g, i) => {
+			const group = L.layerGroup();
+			for (const l of g.lines)
+				L.polyline(
+					[
+						[l.from.lat, l.from.lon],
+						[l.to.lat, l.to.lon]
+					],
+					{
+						weight: 1.5 + 6 * Math.sqrt((l.value ?? 1) / lineMax),
+						className: `ps-line ps-line-${i}`,
+						lineCap: 'round'
+					}
+				)
+					.bindTooltip(l.label)
+					.bindPopup(() => popup(l, lineLabel))
+					.addTo(group);
+			const key = `line:${i}`;
+			if (!hidden.has(key)) group.addTo(m);
+			overlays[`<span class="ps-key ps-line-key ps-line-${i}"></span>${g.name}`] = group;
+			return { key, group };
+		});
 		const groups = current.map((layer, i) => {
 			const max = layer.max ?? Math.max(1e-9, ...layer.points.map((p) => p.value ?? 0));
 			const group = L.layerGroup();
@@ -166,17 +210,25 @@
 					.bindPopup(() => popup(p))
 					.addTo(group);
 			}
-			if (!hidden.has(i)) group.addTo(m);
+			const key = `layer:${i}`;
+			if (!hidden.has(key)) group.addTo(m);
 			overlays[`<span class="ps-key ps-layer-${i}"></span>${layer.name}`] = group;
-			return group;
+			return { key, group };
 		});
 		const control = L.control
-			.layers(bases, current.length > 1 ? overlays : {}, { collapsed: el.clientWidth < 560 })
+			.layers(bases, current.length + currentLines.length > 1 ? overlays : {}, {
+				collapsed: el.clientWidth < 560
+			})
 			.addTo(m);
-		drawn = [{ groups, control }];
+		drawn = [{ groups: [...lineGroups, ...groups], control }];
 	});
 
-	const style = $derived(layers.map((l, i) => `--ps-layer-${i}: ${l.color}`).join('; '));
+	const style = $derived(
+		[
+			...layers.map((l, i) => `--ps-layer-${i}: ${l.color}`),
+			...lineLayers.map((l, i) => `--ps-line-${i}: ${l.color}`)
+		].join('; ')
+	);
 </script>
 
 {#if ready}
@@ -189,7 +241,14 @@
 	></div>
 	<p class="hint">Drag to pan, use + / − to zoom. Select a circle for details.</p>
 {:else}
-	<MooreaMap points={fallback ?? layers[0]?.points ?? []} {valueLabel} {format} csv={false} />
+	<MooreaMap
+		points={fallback ?? layers[0]?.points ?? []}
+		lines={lineLayers.flatMap((g) => g.lines.map((l) => ({ ...l, color: g.color })))}
+		{lineLabel}
+		{valueLabel}
+		{format}
+		csv={false}
+	/>
 {/if}
 
 <style>
@@ -246,6 +305,22 @@
 		font-weight: 650;
 		color: #1d5fb8;
 	}
+	.map :global(.leaflet-interactive.ps-line) {
+		stroke-opacity: 0.75;
+	}
+	.map :global(.ps-line-key) {
+		border-radius: 2px;
+		height: 4px;
+		vertical-align: 2px;
+	}
+	.map :global(.ps-line-0) {
+		stroke: var(--ps-line-0);
+		background: var(--ps-line-0);
+	}
+	.map :global(.ps-line-1) {
+		stroke: var(--ps-line-1);
+		background: var(--ps-line-1);
+	}
 	.map :global(.ps-layer-0) {
 		fill: var(--ps-layer-0);
 		background: var(--ps-layer-0);
diff --git a/src/lib/components/MooreaMap.svelte b/src/lib/components/MooreaMap.svelte
index f8da3c6..eabaf3c 100644
--- a/src/lib/components/MooreaMap.svelte
+++ b/src/lib/components/MooreaMap.svelte
@@ -9,6 +9,18 @@
 		href?: string;
 		sub?: string;
 	}
+
+	/** A straight line between two places, e.g. a shark's move between nurseries. */
+	export interface MapLine {
+		id: string;
+		label: string;
+		from: { lat: number; lon: number };
+		to: { lat: number; lon: number };
+		/** Sets the line width (relative to the largest). */
+		value?: number;
+		color?: string;
+		sub?: string;
+	}
 </script>
 
 <script lang="ts">
@@ -18,6 +30,8 @@
 
 	let {
 		points,
+		lines = [],
+		lineLabel = '',
 		valueLabel = '',
 		format = (v: number) => String(Math.round(v)),
 		showLabels = true,
@@ -25,6 +39,9 @@
 		csv = true
 	}: {
 		points: MapPoint[];
+		/** Drawn under the circles; width by value. */
+		lines?: MapLine[];
+		lineLabel?: string;
 		valueLabel?: string;
 		format?: (v: number) => string;
 		showLabels?: boolean;
@@ -37,6 +54,12 @@
 		columns: ['name', 'lat', 'lon', valueLabel || 'value'],
 		rows: csv ? points.map((p) => [p.label, p.lat, p.lon, p.value]) : []
 	}));
+	registerCsv(() => ({
+		columns: ['line', 'from lat', 'from lon', 'to lat', 'to lon', lineLabel || 'value'],
+		rows: csv
+			? lines.map((l) => [l.label, l.from.lat, l.from.lon, l.to.lat, l.to.lon, l.value])
+			: []
+	}));
 
 	let width = $state(640);
 	const lat0 = -17.53;
@@ -91,7 +114,22 @@
 		});
 	});
 
+	const lineMax = $derived(Math.max(1e-9, ...lines.map((l) => l.value ?? 1)));
+	const lineW = (v: number | undefined) => 1.5 + 6 * Math.sqrt((v ?? 1) / lineMax);
+
 	let tip = $state<TipState | null>(null);
+	function showLine(e: PointerEvent, l: MapLine) {
+		const wrap = (e.currentTarget as Element).closest('.wrap')!.getBoundingClientRect();
+		tip = {
+			x: e.clientX - wrap.left,
+			y: e.clientY - wrap.top,
+			title: l.label,
+			lines: [
+				...(l.value != null && lineLabel ? [{ label: lineLabel, value: format(l.value) }] : []),
+				...(l.sub ? [{ value: l.sub }] : [])
+			]
+		};
+	}
 	function show(e: PointerEvent, p: MapPoint) {
 		const wrap = (e.currentTarget as Element).closest('.wrap')!.getBoundingClientRect();
 		tip = {
@@ -118,6 +156,20 @@
 	>
 		<rect {width} height={h} fill="var(--accent-wash)" rx="10" />
 		<path d={path} fill="var(--surface)" stroke="var(--axis)" stroke-width="1" />
+		{#each lines as l (l.id)}
+			<line
+				x1={px(l.from.lon)}
+				y1={py(l.from.lat)}
+				x2={px(l.to.lon)}
+				y2={py(l.to.lat)}
+				stroke={l.color ?? 'var(--series-1)'}
+				stroke-width={lineW(l.value)}
+				stroke-linecap="round"
+				stroke-opacity="0.7"
+				role="presentation"
+				onpointermove={(e) => showLine(e, l)}
+			/>
+		{/each}
 		{#each sorted as p (p.id)}
 			{@const x = px(p.lon)}
 			{@const y = py(p.lat)}
diff --git a/src/routes/recaptures/+page.server.ts b/src/routes/recaptures/+page.server.ts
index b2eb722..889b204 100644
--- a/src/routes/recaptures/+page.server.ts
+++ b/src/routes/recaptures/+page.server.ts
@@ -40,6 +40,61 @@ export const load: PageServerLoad = () =>
 			const k = Math.cos((sa.lat * Math.PI) / 180);
 			return Math.hypot((sa.lat - sb.lat) * 110.574, (sa.lon - sb.lon) * 111.32 * k);
 		};
+		// Moves drawn on the map (#173): one line per nursery pair and species, both directions
+		// pooled. Sharks with identity conflicts are left out.
+		const conflicts = new Set(d.individuals.filter((i) => i.conflict).map((i) => i.id));
+		const place = (id: string | null) => {
+			const s = id ? d.siteById.get(id) : null;
+			return s?.lat != null && s.lon != null ? { lat: s.lat, lon: s.lon } : null;
+		};
+		const moveLines = (['Cm', 'Na'] as const).map((sp) => {
+			const byPair = new Map<string, { a: string; b: string; ab: number; ba: number }>();
+			for (const p of moved) {
+				if (p.species !== sp || conflicts.has(p.id)) continue;
+				const [a, b] = [p.a.siteId!, p.b.siteId!].sort();
+				const e = byPair.get(`${a}|${b}`) ?? { a, b, ab: 0, ba: 0 };
+				if (p.a.siteId === a) e.ab++;
+				else e.ba++;
+				byPair.set(`${a}|${b}`, e);
+			}
+			return {
+				species: sp,
+				lines: [...byPair.values()].flatMap((e) => {
+					const from = place(e.a);
+					const to = place(e.b);
+					if (!from || !to) return [];
+					const [na, nb] = [siteName(d, e.a), siteName(d, e.b)];
+					return [
+						{
+							id: `${sp}-${e.a}-${e.b}`,
+							label: `${na} ↔ ${nb}`,
+							from,
+							to,
+							value: e.ab + e.ba,
+							sub: `${na} → ${nb}: ${e.ab} · ${nb} → ${na}: ${e.ba} · ${round(dist(e.a, e.b), 1)} km`
+						}
+					];
+				})
+			};
+		});
+		const stayed = nurseries.flatMap((id) => {
+			const at = place(id);
+			if (!at) return [];
+			const n = pairs.filter(
+				(p) => p.a.siteId === id && p.b.siteId === id && !conflicts.has(p.id)
+			).length;
+			const out = moved.filter((p) => p.a.siteId === id && !conflicts.has(p.id)).length;
+			return [
+				{
+					id,
+					label: siteName(d, id),
+					...at,
+					value: n,
+					href: `/nurseries/${id}`,
+					sub: `${n} recaptured at the same nursery, ${out} next caught elsewhere`
+				}
+			];
+		});
 		const longest = moved
 			.map((p) => ({
 				id: p.id,
@@ -112,6 +167,9 @@ export const load: PageServerLoad = () =>
 			bySpecies: rateBy((c) => c.species, ['Cm', 'Na']),
 			nurseryNames: nurseries.map((id) => siteName(d, id)),
 			matrix,
+			moveLines,
+			stayed,
+			conflictsLeftOut: moved.filter((p) => conflicts.has(p.id)).length,
 			fidelity: pairs.length ? round(same / pairs.length, 3) : null,
 			pairs: pairs.length,
 			medianDays: median(pairs.map((p) => p.days)),
diff --git a/src/routes/recaptures/+page.svelte b/src/routes/recaptures/+page.svelte
index 1620976..fd614a6 100644
--- a/src/routes/recaptures/+page.svelte
+++ b/src/routes/recaptures/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChartCard from '#lib/components/ChartCard.svelte';
 	import DataTable from '#lib/components/DataTable.svelte';
+	import InteractiveMap from '#lib/components/InteractiveMap.svelte';
 	import StatTile from '#lib/components/StatTile.svelte';
 	import BarChart from '#lib/components/charts/BarChart.svelte';
 	import Heatmap from '#lib/components/charts/Heatmap.svelte';
@@ -95,6 +96,35 @@
 		</ChartCard>
 	</section>
 
+	<section class="section">
+		<ChartCard
+			title="Moves between nurseries on the map"
+			papers={['bouyoucos2020homerange']}
+			subtitle="Lines join the nurseries where a shark was caught one time and the next, both directions pooled; thicker is more moves. Circles: recaptures at the same nursery."
+			note={`Lines join capture sites; they are not the route a shark swam. A shark can pass other nurseries, or move and come back, between two captures.${data.conflictsLeftOut ? ` ${num(data.conflictsLeftOut)} moves by sharks with conflicting records are left out.` : ''}`}
+		>
+			<InteractiveMap
+				label="Map of recaptured sharks' moves between nurseries"
+				valueLabel="Same-nursery recaptures"
+				lineLabel="Moves"
+				height={480}
+				layers={[
+					{
+						name: 'Same-nursery recaptures',
+						color: 'var(--series-3)',
+						sized: true,
+						points: data.stayed
+					}
+				]}
+				lineLayers={data.moveLines.map((m) => ({
+					name: `${speciesName(m.species)} moves`,
+					color: SPECIES[m.species].color,
+					lines: m.lines
+				}))}
+			/>
+		</ChartCard>
+	</section>
+
 	<section class="section">
 		<ChartCard
 			title="Where recaptured sharks move"
diff --git a/src/routes/sharks/[id]/+page.server.ts b/src/routes/sharks/[id]/+page.server.ts
index 06a9e20..05f2474 100644
--- a/src/routes/sharks/[id]/+page.server.ts
+++ b/src/routes/sharks/[id]/+page.server.ts
@@ -43,6 +43,23 @@ export const load: PageServerLoad = ({ params }) => {
 			relMass: l.relMassKg,
 			notes: l.notes
 		})),
+		// Consecutive captures at different nurseries, in order (#173).
+		moves: caps.flatMap((c, i) => {
+			const prev = caps[i - 1];
+			if (!prev || !prev.siteId || !c.siteId || prev.siteId === c.siteId) return [];
+			const a = d.siteById.get(prev.siteId);
+			const b = d.siteById.get(c.siteId);
+			if (a?.lat == null || a.lon == null || b?.lat == null || b.lon == null) return [];
+			return [
+				{
+					id: `move-${i}`,
+					label: `${a.name} → ${b.name}`,
+					from: { lat: a.lat, lon: a.lon },
+					to: { lat: b.lat, lon: b.lon },
+					sub: `Capture ${i} to ${i + 1}: ${prev.date ?? '?'} → ${c.date ?? '?'}`
+				}
+			];
+		}),
 		map: sites
 			.map((s) => d.siteById.get(s)!)
 			.filter((s) => s?.lat != null)
@@ -52,7 +69,8 @@ export const load: PageServerLoad = ({ params }) => {
 				lat: s.lat!,
 				lon: s.lon!,
 				value: caps.filter((c) => c.siteId === s.id).length,
-				href: `/nurseries/${s.id}`
+				href: `/nurseries/${s.id}`,
+				sub: `Capture ${caps.flatMap((c, i) => (c.siteId === s.id ? [i + 1] : [])).join(', ')}`
 			}))
 	};
 };
diff --git a/src/routes/sharks/[id]/+page.svelte b/src/routes/sharks/[id]/+page.svelte
index 6920bd5..e2b3e3d 100644
--- a/src/routes/sharks/[id]/+page.svelte
+++ b/src/routes/sharks/[id]/+page.svelte
@@ -52,8 +52,18 @@
 			</ChartCard>
 		{/if}
 		{#if data.map.length}
-			<ChartCard title="Where it was caught" subtitle="Circle size = number of captures">
-				<MooreaMap points={data.map} maxR={12} valueLabel="Captures" />
+			<ChartCard
+				title="Where it was caught"
+				subtitle={data.moves.length
+					? 'Circle size = number of captures. Lines join consecutive captures at different nurseries (not the route swum).'
+					: 'Circle size = number of captures'}
+			>
+				<MooreaMap
+					points={data.map}
+					lines={data.moves.map((m) => ({ ...m, color: speciesColor(ind.species) }))}
+					maxR={12}
+					valueLabel="Captures"
+				/>
 			</ChartCard>
 		{/if}
 	</section>

From 912275eb3dba2675b6868233592c63c9c3146d5a Mon Sep 17 00:00:00 2001
From: luen <Luen@users.noreply.github.com>
Date: Wed, 11 Nov 2026 09:44:17 +1000
Subject: [PATCH 2/4] Charts: play each shark's captures on its map (#173)

A shark that moved between nurseries now gets an interactive map with
Play and a capture slider: lines appear as it moves and a dot glides
from one capture site to the next, with the date, site and length of
each capture. Sharks that stayed put keep the static map.

On /recaptures the same-nursery circles are smaller and grey so the
move lines stand out. InteractiveMap gains maxRadius, a fixed lineMax
and an animated traveller (placed without motion under reduced motion).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/lib/components/InteractiveMap.svelte |  64 ++++++++++++-
 src/routes/recaptures/+page.svelte       |   5 +-
 src/routes/sharks/[id]/+page.server.ts   |   7 ++
 src/routes/sharks/[id]/+page.svelte      | 117 +++++++++++++++++++++--
 4 files changed, 179 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/InteractiveMap.svelte b/src/lib/components/InteractiveMap.svelte
index 78aca48..b659ae1 100644
--- a/src/lib/components/InteractiveMap.svelte
+++ b/src/lib/components/InteractiveMap.svelte
@@ -19,6 +19,8 @@
 		radius?: number;
 		/** Value that gets the largest circle; fix it to keep sizes comparable as points change. */
 		max?: number;
+		/** Radius in px of the largest sized circle (default 18). */
+		maxRadius?: number;
 	}
 
 	/** Base maps (#29). Hosts must match img-src in vite.config.ts. */
@@ -50,6 +52,8 @@
 		layers,
 		lineLayers = [],
 		lineLabel = '',
+		lineMax: fixedLineMax,
+		traveller,
 		label,
 		valueLabel = '',
 		format = (v: number) => String(Math.round(v)),
@@ -61,6 +65,15 @@
 		/** Lines drawn under the circles, width by value, one toggle per layer. */
 		lineLayers?: MapLineLayer[];
 		lineLabel?: string;
+		/** Value that gets the widest line; fix it so widths don't jump as lines are added. */
+		lineMax?: number;
+		/** A dot that glides from `from` to `to` whenever `key` changes (a Play button). */
+		traveller?: {
+			key: string | number;
+			from: { lat: number; lon: number };
+			to: { lat: number; lon: number };
+			color: string;
+		};
 		/** Accessible name of the map region. */
 		label: string;
 		valueLabel?: string;
@@ -166,10 +179,9 @@
 			d.control.remove();
 		}
 		const overlays: Record<string, import('leaflet').LayerGroup> = {};
-		const lineMax = Math.max(
-			1e-9,
-			...currentLines.flatMap((g) => g.lines.map((l) => l.value ?? 1))
-		);
+		const lineMax =
+			fixedLineMax ??
+			Math.max(1e-9, ...currentLines.flatMap((g) => g.lines.map((l) => l.value ?? 1)));
 		const lineGroups = currentLines.map((g, i) => {
 			const group = L.layerGroup();
 			for (const l of g.lines)
@@ -200,7 +212,9 @@
 				const r = empty
 					? 5
 					: layer.sized
-						? 5 + 13 * Math.sqrt(Math.min(1, Math.max(0, p.value ?? 0) / max))
+						? 5 +
+							((layer.maxRadius ?? 18) - 5) *
+								Math.sqrt(Math.min(1, Math.max(0, p.value ?? 0) / max))
 						: (layer.radius ?? 5);
 				L.circleMarker([p.lat, p.lon], {
 					radius: r,
@@ -223,6 +237,41 @@
 		drawn = [{ groups: [...lineGroups, ...groups], control }];
 	});
 
+	// Glide a dot along the traveller's line; reduced motion (#32) just places it at the end.
+	let dot: import('leaflet').CircleMarker | undefined;
+	$effect(() => {
+		const m = map;
+		const L = leaflet;
+		const t = traveller;
+		if (!m || !L) return;
+		dot?.remove();
+		dot = undefined;
+		if (!t) return;
+		const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const at = (f: number): [number, number] => [
+			t.from.lat + (t.to.lat - t.from.lat) * f,
+			t.from.lon + (t.to.lon - t.from.lon) * f
+		];
+		const marker = L.circleMarker(at(still ? 1 : 0), {
+			radius: 7,
+			className: 'ps-traveller',
+			interactive: false
+		}).addTo(m);
+		(marker.getElement() as SVGElement | undefined)?.style.setProperty('fill', t.color);
+		dot = marker;
+		if (still) return;
+		const start = performance.now();
+		let frame = 0;
+		const step = (now: number) => {
+			const f = Math.min(1, (now - start) / 800);
+			const eased = f < 0.5 ? 2 * f * f : 1 - (-2 * f + 2) ** 2 / 2;
+			marker.setLatLng(at(eased));
+			if (f < 1) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
+	});
+
 	const style = $derived(
 		[
 			...layers.map((l, i) => `--ps-layer-${i}: ${l.color}`),
@@ -305,6 +354,11 @@
 		font-weight: 650;
 		color: #1d5fb8;
 	}
+	.map :global(.ps-traveller) {
+		stroke: #fff;
+		stroke-width: 2px;
+		fill-opacity: 1;
+	}
 	.map :global(.leaflet-interactive.ps-line) {
 		stroke-opacity: 0.75;
 	}
diff --git a/src/routes/recaptures/+page.svelte b/src/routes/recaptures/+page.svelte
index fd614a6..0f6afce 100644
--- a/src/routes/recaptures/+page.svelte
+++ b/src/routes/recaptures/+page.svelte
@@ -100,7 +100,7 @@
 		<ChartCard
 			title="Moves between nurseries on the map"
 			papers={['bouyoucos2020homerange']}
-			subtitle="Lines join the nurseries where a shark was caught one time and the next, both directions pooled; thicker is more moves. Circles: recaptures at the same nursery."
+			subtitle="Lines join the nurseries where a shark was caught one time and the next, both directions pooled; thicker is more moves. Grey circles: recaptures at the same nursery. Each shark's own page can play its moves one by one."
 			note={`Lines join capture sites; they are not the route a shark swam. A shark can pass other nurseries, or move and come back, between two captures.${data.conflictsLeftOut ? ` ${num(data.conflictsLeftOut)} moves by sharks with conflicting records are left out.` : ''}`}
 		>
 			<InteractiveMap
@@ -111,8 +111,9 @@
 				layers={[
 					{
 						name: 'Same-nursery recaptures',
-						color: 'var(--series-3)',
+						color: 'var(--muted)',
 						sized: true,
+						maxRadius: 10,
 						points: data.stayed
 					}
 				]}
diff --git a/src/routes/sharks/[id]/+page.server.ts b/src/routes/sharks/[id]/+page.server.ts
index 05f2474..85d8bec 100644
--- a/src/routes/sharks/[id]/+page.server.ts
+++ b/src/routes/sharks/[id]/+page.server.ts
@@ -53,6 +53,7 @@ export const load: PageServerLoad = ({ params }) => {
 			return [
 				{
 					id: `move-${i}`,
+					at: i,
 					label: `${a.name} → ${b.name}`,
 					from: { lat: a.lat, lon: a.lon },
 					to: { lat: b.lat, lon: b.lon },
@@ -60,6 +61,12 @@ export const load: PageServerLoad = ({ params }) => {
 				}
 			];
 		}),
+		// Every capture with a place, in order, for the map's Play button.
+		track: caps.flatMap((c, i) => {
+			const s = c.siteId ? d.siteById.get(c.siteId) : null;
+			if (s?.lat == null || s.lon == null) return [];
+			return [{ n: i + 1, date: c.date, site: s.name, lat: s.lat, lon: s.lon, tl: c.tlMm }];
+		}),
 		map: sites
 			.map((s) => d.siteById.get(s)!)
 			.filter((s) => s?.lat != null)
diff --git a/src/routes/sharks/[id]/+page.svelte b/src/routes/sharks/[id]/+page.svelte
index e2b3e3d..c22777d 100644
--- a/src/routes/sharks/[id]/+page.svelte
+++ b/src/routes/sharks/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChartCard from '#lib/components/ChartCard.svelte';
 	import DataTable from '#lib/components/DataTable.svelte';
+	import InteractiveMap from '#lib/components/InteractiveMap.svelte';
 	import MooreaMap from '#lib/components/MooreaMap.svelte';
 	import LineChart from '#lib/components/charts/LineChart.svelte';
 	import { toDay } from '#lib/components/charts/scale';
@@ -11,6 +12,33 @@
 	let { data }: PageProps = $props();
 	const ind = $derived(data.ind);
 	const growth = $derived(data.captures.filter((c) => c.date && c.tl != null));
+
+	// Play this shark's captures in order (#173): lines appear as it moves, a dot glides along.
+	const stops = $derived(data.track.length);
+	let step = $state(Number.MAX_SAFE_INTEGER);
+	const at = $derived(Math.min(step, stops));
+	const current = $derived(at < stops ? data.track[at] : null);
+	const previous = $derived(at > 0 && at < stops ? data.track[at - 1] : null);
+	const color = $derived(speciesColor(ind.species));
+	const shownMoves = $derived(
+		current ? data.moves.filter((m) => m.at + 1 <= current.n) : data.moves
+	);
+	let timer: ReturnType<typeof setInterval> | undefined;
+	let playing = $state(false);
+	function stop() {
+		clearInterval(timer);
+		playing = false;
+	}
+	function play() {
+		if (playing) return stop();
+		if (at >= stops - 1) step = 0;
+		playing = true;
+		timer = setInterval(() => {
+			if (step >= stops - 1) stop();
+			else step = Math.min(step, stops) + 1;
+		}, 1400);
+	}
+	$effect(() => stop);
 </script>
 
 <div class="container">
@@ -55,15 +83,64 @@
 			<ChartCard
 				title="Where it was caught"
 				subtitle={data.moves.length
-					? 'Circle size = number of captures. Lines join consecutive captures at different nurseries (not the route swum).'
+					? 'Circle size = number of captures. Lines join consecutive captures at different nurseries (not the route swum). Play steps through the captures in order.'
 					: 'Circle size = number of captures'}
 			>
-				<MooreaMap
-					points={data.map}
-					lines={data.moves.map((m) => ({ ...m, color: speciesColor(ind.species) }))}
-					maxR={12}
-					valueLabel="Captures"
-				/>
+				{#if data.moves.length}
+					<div class="player">
+						<button type="button" class="play" onclick={play} aria-pressed={playing}>
+							{playing ? 'Pause' : 'Play'}
+						</button>
+						<label for="capture-slider">Capture</label>
+						<input
+							id="capture-slider"
+							type="range"
+							min="0"
+							max={stops}
+							step="1"
+							value={at}
+							oninput={(e) => {
+								stop();
+								step = Number(e.currentTarget.value);
+							}}
+							aria-valuetext={current
+								? `Capture ${current.n}: ${current.site}, ${date(current.date)}`
+								: 'All captures'}
+						/>
+						<output for="capture-slider" aria-live="polite">
+							{#if current}
+								<strong>Capture {current.n} of {ind.nCaptures}</strong>
+								· {date(current.date)} · {current.site}{current.tl != null
+									? ` · ${num(current.tl)} mm`
+									: ''}{previous && previous.site !== current.site
+									? ` (moved from ${previous.site})`
+									: ''}
+							{:else}
+								<strong>All captures</strong>
+							{/if}
+						</output>
+					</div>
+					<InteractiveMap
+						label={`Map of where shark ${ind.id} was caught`}
+						valueLabel="Captures"
+						height={340}
+						layers={[
+							{ name: 'Capture sites', color, sized: true, maxRadius: 12, points: data.map }
+						]}
+						lineLayers={[{ name: 'Moves', color, lines: shownMoves }]}
+						lineMax={4}
+						traveller={current
+							? {
+									key: at,
+									from: previous ?? current,
+									to: current,
+									color
+								}
+							: undefined}
+					/>
+				{:else}
+					<MooreaMap points={data.map} maxR={12} valueLabel="Captures" />
+				{/if}
 			</ChartCard>
 		{/if}
 	</section>
@@ -109,6 +186,32 @@
 </div>
 
 <style>
+	.player {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 8px 12px;
+		margin-bottom: 12px;
+		font-size: 0.9rem;
+	}
+	.player input {
+		flex: 1 1 140px;
+		accent-color: var(--series-1);
+	}
+	.player output {
+		flex: 1 1 100%;
+		min-height: 1.5em;
+		color: var(--ink);
+	}
+	.play {
+		font: inherit;
+		padding: 4px 12px;
+		border-radius: 999px;
+		border: 1px solid var(--hairline);
+		background: var(--surface-2);
+		color: var(--ink);
+		cursor: pointer;
+	}
 	.id {
 		font-weight: 400;
 		color: var(--ink-2);

From d542257a1287d67fdde3f58988b5bf32df4d8221 Mon Sep 17 00:00:00 2001
From: luen <Luen@users.noreply.github.com>
Date: Wed, 11 Nov 2026 10:35:00 +1000
Subject: [PATCH 3/4] fix: keep move labels literal and stop playback across
 unknown sites

---
 src/lib/components/InteractiveMap.svelte | 2 +-
 src/routes/sharks/[id]/+page.svelte      | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/InteractiveMap.svelte b/src/lib/components/InteractiveMap.svelte
index 6fe72af..a5b5026 100644
--- a/src/lib/components/InteractiveMap.svelte
+++ b/src/lib/components/InteractiveMap.svelte
@@ -202,7 +202,7 @@
 						lineCap: 'round'
 					}
 				)
-					.bindTooltip(l.label)
+					.bindTooltip(tooltip(l.label))
 					.bindPopup(() => popup(l, lineLabel))
 					.addTo(group);
 			const key = `line:${i}`;
diff --git a/src/routes/sharks/[id]/+page.svelte b/src/routes/sharks/[id]/+page.svelte
index c22777d..a9ea060 100644
--- a/src/routes/sharks/[id]/+page.svelte
+++ b/src/routes/sharks/[id]/+page.svelte
@@ -18,7 +18,10 @@
 	let step = $state(Number.MAX_SAFE_INTEGER);
 	const at = $derived(Math.min(step, stops));
 	const current = $derived(at < stops ? data.track[at] : null);
-	const previous = $derived(at > 0 && at < stops ? data.track[at - 1] : null);
+	// An unlocated capture breaks the path: do not animate across that unknown stop.
+	const previous = $derived(
+		current && at > 0 && data.track[at - 1].n === current.n - 1 ? data.track[at - 1] : null
+	);
 	const color = $derived(speciesColor(ind.species));
 	const shownMoves = $derived(
 		current ? data.moves.filter((m) => m.at + 1 <= current.n) : data.moves

From bbb7442e03868686a2df487d36d10a330d0bc652 Mon Sep 17 00:00:00 2001
From: luen <Luen@users.noreply.github.com>
Date: Thu, 12 Nov 2026 10:08:48 +1000
Subject: [PATCH 4/4] fix: make shark move maps keyboard accessible

---
 AGENTS.md                                |  1 +
 e2e/map-keyboard.spec.ts                 | 48 ++++++++++++++++++++
 src/lib/components/InteractiveMap.svelte | 58 ++++++++++++++++++++----
 src/lib/components/MooreaMap.svelte      | 39 ++++++++++------
 4 files changed, 122 insertions(+), 24 deletions(-)
 create mode 100644 e2e/map-keyboard.spec.ts

diff --git a/AGENTS.md b/AGENTS.md
index 943ce04..0e6fb14 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -236,3 +236,4 @@ Questions for the lab go to Dr Jodie Rummer (`@JodieRummer`) on GitHub: label th
 
 - Security scans (#144): use Snyk CLI >=1.1308.3 with `test --all-projects --dev` for the pnpm 12 multi-document lockfile. Remaining upstream advisories and mitigations are tracked in docs/dev/SNYK-144.md.
 - Leaflet treats string tooltips as HTML. Pass a DOM element populated with `textContent` for workbook-derived point and move labels, including when rebuilding overlays.
+- Leaflet polylines are pointer-only by default. Keep move paths keyboard-focusable, with focus tooltips and Enter/Space popup handlers; the SVG fallback uses the shared chart `markKeys` contract.
diff --git a/e2e/map-keyboard.spec.ts b/e2e/map-keyboard.spec.ts
new file mode 100644
index 0000000..72d8764
--- /dev/null
+++ b/e2e/map-keyboard.spec.ts
@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+test('move lines expose their details to the keyboard after overlay toggles', async ({ page }) => {
+	await page.route(/server\.arcgisonline\.com|tile\.openstreetmap\.org/, (route) => route.abort());
+	await page.goto('/recaptures');
+	const map = page.getByRole('region', {
+		name: "Map of recaptured sharks' moves between nurseries"
+	});
+	const line = map.locator('.ps-line-0[role="button"]').first();
+	await expect(line).toBeVisible();
+	const label = await line.getAttribute('aria-label');
+	await line.focus();
+	await expect(map.locator('.leaflet-tooltip').last()).toHaveText(label!);
+	await line.press('Enter');
+	await expect(map.locator('.leaflet-popup-content')).toContainText(label!);
+	await line.press('Escape');
+	await expect(map.locator('.leaflet-popup-content')).toHaveCount(0);
+	// Re-adding an overlay creates another path element: it must retain the handlers.
+	const toggle = map.getByRole('checkbox', { name: /Blacktip.*moves/i });
+	await toggle.uncheck();
+	await toggle.check();
+	await line.focus();
+	await line.press('Space');
+	await expect(map.locator('.leaflet-popup-content')).toContainText(label!);
+});
+
+test('SVG map fallback supports the shared arrow-key chart controls', async ({ page }) => {
+	// Keep the hydrated SVG fallback by preventing the lazy Leaflet module from loading.
+	await page.route('**/*.js', async (route) => {
+		const response = await route.fetch();
+		const body = await response.text();
+		if (body.includes('Leaflet') && body.includes('1.9.4')) await route.abort();
+		else await route.fulfill({ response, body });
+	});
+	await page.goto('/recaptures');
+	const map = page.locator('.chart-card').filter({
+		has: page.getByRole('heading', { name: 'Moves between nurseries on the map', exact: true })
+	});
+	const svg = map.locator('svg[role="application"]');
+	await expect(svg).toBeVisible();
+	await svg.focus();
+	await svg.press('Home');
+	await expect(map.locator('.tip')).toContainText('Moves');
+	await svg.press('End');
+	await expect(map.locator('.tip')).toContainText('Same-nursery recaptures');
+	await svg.press('Escape');
+	await expect(map.locator('.tip')).toHaveCount(0);
+});
diff --git a/src/lib/components/InteractiveMap.svelte b/src/lib/components/InteractiveMap.svelte
index a5b5026..86afa1d 100644
--- a/src/lib/components/InteractiveMap.svelte
+++ b/src/lib/components/InteractiveMap.svelte
@@ -105,6 +105,37 @@
 		return span;
 	}
 
+	// Leaflet paths have pointer handlers but are not keyboard controls by default.
+	function keyboardLine(line: import('leaflet').Polyline, label: string) {
+		line.on('add', () => {
+			const path = line.getElement() as SVGElement | undefined;
+			if (!path) return;
+			path.setAttribute('tabindex', '0');
+			path.setAttribute('role', 'button');
+			path.setAttribute('aria-label', label);
+			path.onfocus = () => line.openTooltip();
+			path.onblur = () => line.closeTooltip();
+			path.onkeydown = (e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					e.stopPropagation();
+					if (e.key === 'Enter') line.openPopup();
+				} else if (e.key === 'Escape') {
+					line.closePopup();
+					line.closeTooltip();
+				}
+			};
+			path.onkeyup = (e) => {
+				if (e.key === ' ') {
+					e.preventDefault();
+					e.stopPropagation();
+					line.openPopup();
+				}
+			};
+		});
+		return line;
+	}
+
 	function popup(p: MapPoint | MapLine, unit = valueLabel) {
 		const href = 'href' in p ? p.href : undefined;
 		const box = document.createElement('div');
@@ -191,16 +222,19 @@
 		const lineGroups = currentLines.map((g, i) => {
 			const group = L.layerGroup();
 			for (const l of g.lines)
-				L.polyline(
-					[
-						[l.from.lat, l.from.lon],
-						[l.to.lat, l.to.lon]
-					],
-					{
-						weight: 1.5 + 6 * Math.sqrt((l.value ?? 1) / lineMax),
-						className: `ps-line ps-line-${i}`,
-						lineCap: 'round'
-					}
+				keyboardLine(
+					L.polyline(
+						[
+							[l.from.lat, l.from.lon],
+							[l.to.lat, l.to.lon]
+						],
+						{
+							weight: 1.5 + 6 * Math.sqrt((l.value ?? 1) / lineMax),
+							className: `ps-line ps-line-${i}`,
+							lineCap: 'round'
+						}
+					),
+					l.label
 				)
 					.bindTooltip(tooltip(l.label))
 					.bindPopup(() => popup(l, lineLabel))
@@ -368,6 +402,10 @@
 	.map :global(.leaflet-interactive.ps-line) {
 		stroke-opacity: 0.75;
 	}
+	.map :global(.ps-line:focus-visible) {
+		outline: 2px solid var(--ink);
+		outline-offset: 4px;
+	}
 	.map :global(.ps-line-key) {
 		border-radius: 2px;
 		height: 4px;
diff --git a/src/lib/components/MooreaMap.svelte b/src/lib/components/MooreaMap.svelte
index eabaf3c..43ef31c 100644
--- a/src/lib/components/MooreaMap.svelte
+++ b/src/lib/components/MooreaMap.svelte
@@ -27,6 +27,7 @@
 	import outline from '#lib/moorea-outline.json';
 	import Tip, { type TipState } from './charts/Tip.svelte';
 	import { registerCsv } from './charts/csv';
+	import { KEYS_HINT, markAt, markKeys, pointerIn } from './charts/marks';
 
 	let {
 		points,
@@ -118,11 +119,9 @@
 	const lineW = (v: number | undefined) => 1.5 + 6 * Math.sqrt((v ?? 1) / lineMax);
 
 	let tip = $state<TipState | null>(null);
-	function showLine(e: PointerEvent, l: MapLine) {
-		const wrap = (e.currentTarget as Element).closest('.wrap')!.getBoundingClientRect();
+	function showLine(at: { x: number; y: number }, l: MapLine) {
 		tip = {
-			x: e.clientX - wrap.left,
-			y: e.clientY - wrap.top,
+			...at,
 			title: l.label,
 			lines: [
 				...(l.value != null && lineLabel ? [{ label: lineLabel, value: format(l.value) }] : []),
@@ -130,11 +129,9 @@
 			]
 		};
 	}
-	function show(e: PointerEvent, p: MapPoint) {
-		const wrap = (e.currentTarget as Element).closest('.wrap')!.getBoundingClientRect();
+	function show(at: { x: number; y: number }, p: MapPoint) {
 		tip = {
-			x: e.clientX - wrap.left,
-			y: e.clientY - wrap.top,
+			...at,
 			title: p.label,
 			lines: [
 				...(p.value != null ? [{ label: valueLabel, value: format(p.value) }] : []),
@@ -142,21 +139,33 @@
 			]
 		};
 	}
+	let svg = $state<SVGSVGElement>();
+	const keys = markKeys({
+		count: () => lines.length + sorted.length,
+		show: (i) =>
+			markAt(svg, i, (at) => {
+				if (i < lines.length) showLine(at, lines[i]);
+				else show(at, sorted[i - lines.length]);
+			}),
+		hide: () => (tip = null),
+		href: (i) => sorted[i - lines.length]?.href
+	});
 </script>
 
 <div class="wrap" bind:clientWidth={width}>
 	<svg
+		bind:this={svg}
 		class="chart-svg"
 		viewBox={`0 0 ${width} ${h}`}
 		{width}
 		height={h}
-		role={points.some((p) => p.href) ? 'group' : 'img'}
-		aria-label={`Map of Moorea${valueLabel ? ` showing ${valueLabel}` : ''}`}
+		{...keys}
+		aria-label={`Map of Moorea${valueLabel ? ` showing ${valueLabel}` : ''}. ${KEYS_HINT}`}
 		onpointerleave={() => (tip = null)}
 	>
 		<rect {width} height={h} fill="var(--accent-wash)" rx="10" />
 		<path d={path} fill="var(--surface)" stroke="var(--axis)" stroke-width="1" />
-		{#each lines as l (l.id)}
+		{#each lines as l, i (l.id)}
 			<line
 				x1={px(l.from.lon)}
 				y1={py(l.from.lat)}
@@ -167,10 +176,11 @@
 				stroke-linecap="round"
 				stroke-opacity="0.7"
 				role="presentation"
-				onpointermove={(e) => showLine(e, l)}
+				data-mark={i}
+				onpointermove={(e) => showLine(pointerIn(e), l)}
 			/>
 		{/each}
-		{#each sorted as p (p.id)}
+		{#each sorted as p, i (p.id)}
 			{@const x = px(p.lon)}
 			{@const y = py(p.lat)}
 			<svelte:element
@@ -188,7 +198,8 @@
 					stroke="var(--surface)"
 					stroke-width="2"
 					role="presentation"
-					onpointermove={(e) => show(e, p)}
+					data-mark={lines.length + i}
+					onpointermove={(e) => show(pointerIn(e), p)}
 				/>
 			</svelte:element>
 		{/each}