From c407fe8c67417ab583a45cd95eb9e8d8324a20fc Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 12 Jun 2026 18:31:32 +0200
Subject: [PATCH 1/5] implement feature

---
 components/src/maplibre/Map/Map.svelte | 50 +++++++++++++++++---------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 24a4cd75..5cdfc28b 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -31,6 +31,7 @@
 		center?: maplibre.LngLat;
 		pitch?: number;
 		bearing?: number;
+		bounds?: LngLatBounds;
 		loading?: boolean;
 		projection?: ProjectionSpecification;
 		showDebug?: boolean;
@@ -59,6 +60,7 @@
 		center = $bindable(),
 		pitch = $bindable(0),
 		bearing = $bindable(0),
+		bounds = $bindable(),
 		loading = $bindable(true),
 		projection = { type: 'mercator' },
 		allowPan = true,
@@ -85,7 +87,7 @@
 	// 2. initialLocation prop
 	// 3. initialLocation context (notably set by <WithLinkLocation/>)
 
-	let contextLocation: Location = getContext('initialLocation');
+	let contextLocation: Partial<Location> = getContext('initialLocation');
 
 	let initialLocation = $derived({
 		lat: 51.3,
@@ -119,6 +121,7 @@
 			center = mapContext.map?.getCenter();
 			pitch = mapContext.map?.getPitch() || 0;
 			bearing = mapContext.map?.getBearing() || 0;
+			bounds = mapContext.map?.getBounds();
 		});
 
 		mapContext.map.on('moveend', () => {
@@ -126,6 +129,7 @@
 			center = mapContext.map?.getCenter();
 			pitch = mapContext.map?.getPitch() || 0;
 			bearing = mapContext.map?.getBearing() || 0;
+			bounds = mapContext.map?.getBounds();
 		});
 
 		if (onmoveend) {
@@ -178,7 +182,9 @@
 		}
 	});
 
-	const debugValues = $derived(Object.entries({ zoom, pitch, bearing, allowZoom, allowPan, allowRotation }));
+	const debugValues = $derived(
+		Object.entries({ zoom, pitch, bearing, allowZoom, allowPan, allowRotation })
+	);
 	const handleDebugValueClick = (e: MouseEvent) => {
 		if (e.target) {
 			const t = e.target as HTMLElement;
@@ -192,6 +198,12 @@
 			navigator.clipboard.writeText(s);
 		}
 	};
+	const handleDebugCopyBoundsClick = (e: MouseEvent) => {
+		if (e.target) {
+			const s = JSON.stringify(bounds.toArray());
+			navigator.clipboard.writeText(s);
+		}
+	};
 </script>
 
 <div bind:this={container} class="container" data-testid="map-container">
@@ -201,19 +213,24 @@
 		{/if}
 	{/if}
 	{#if showDebug}
-		<ul class="debug">
-			<li>
-				[{center?.lat.toFixed(2)}, {center?.lng.toFixed(2)}]
-			</li>
-			{#each debugValues as [key, value]}
+		<div class="debug">
+			<ul>
 				<li>
-					{key}=<button onclick={handleDebugValueClick}
-						>{value?.toLocaleString('en', { maximumSignificantDigits: 6 })}</button
-					>
+					[{center?.lat.toFixed(2)}, {center?.lng.toFixed(2)}]
 				</li>
-			{/each}
-			<li><button onclick={handleDebugCopyLocationClick}>[Copy Location]</button></li>
-		</ul>
+				{#each debugValues as [key, value]}
+					<li>
+						{key}=<button onclick={handleDebugValueClick}
+							>{value?.toLocaleString('en', { maximumSignificantDigits: 6 })}</button
+						>
+					</li>
+				{/each}
+			</ul>
+			<ul>
+				<li><button onclick={handleDebugCopyLocationClick}>Copy Location</button></li>
+				<li><button onclick={handleDebugCopyBoundsClick}>Copy Bounds</button></li>
+			</ul>
+		</div>
 	{/if}
 </div>
 
@@ -227,17 +244,16 @@
 		position: absolute;
 		top: 0;
 		background: rgba(0, 0, 0, 0.75);
-		color: white;
+		color: #eee;
 		z-index: 1000;
-		padding: 2px;
+		padding: 4px;
 		font-size: 10px;
 		font-family: monospace;
 		display: flex;
 		flex-flow: column;
 		@media (min-width: 600px) {
-			gap: 1em;
+			gap: 0.5em;
 			right: 0;
-			flex-flow: row;
 		}
 		li {
 			list-style: none;

From 5d800acfd6afc479d8ddf7382e856ccddf836696 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 12 Jun 2026 18:46:11 +0200
Subject: [PATCH 2/5] Add tests

---
 .../src/maplibre/Map/Map.stories.svelte       | 58 ++++++++++++++++++-
 components/src/maplibre/Map/Map.svelte        |  4 +-
 2 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index dc4001fc..1019b484 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect, userEvent, fn } from 'storybook/test';
+	import { within, expect, userEvent, fn, spyOn } from 'storybook/test';
 
 	import Map from './Map.svelte';
 	import ScaleControl from '../ScaleControl/ScaleControl.svelte';
@@ -142,7 +142,6 @@
 	name="Toggle zoom and pan"
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
 		const toggleZoomButton = canvas.getByTestId('toggle-zoom');
 		const togglePanButton = canvas.getByTestId('toggle-pan');
 
@@ -231,6 +230,7 @@
 		</DesignTokens>
 	</div>
 </Story>
+
 <Story asChild name="initialBounds">
 	<div class="container">
 		<DesignTokens theme="light">
@@ -242,6 +242,60 @@
 	</div>
 </Story>
 
+<Story
+	asChild
+	name="Debug overlay"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const containerEl = canvas.getByTestId('map-container');
+
+		await step('debug overlay renders', async () => {
+			const el = containerEl.querySelector('.debug');
+			expect(el).toBeTruthy();
+		});
+		await step('shows correct location', async () => {
+			const el = containerEl.querySelector('.debug-location');
+			expect(el).toHaveTextContent('[51.30, 10.20]');
+		});
+		await step('shows correct zoom', async () => {
+			const el = containerEl.querySelector('.debug-zoom');
+			expect(el).toHaveTextContent('zoom=5');
+		});
+		await step('shows correct bearing', async () => {
+			const el = containerEl.querySelector('.debug-bearing');
+			expect(el).toHaveTextContent('bearing=0');
+		});
+		await step('shows correct pitch', async () => {
+			const el = containerEl.querySelector('.debug-pitch');
+			expect(el).toHaveTextContent('pitch=0');
+		});
+		await step('copy location button yields correct result', async () => {
+			const spy = spyOn(navigator.clipboard, 'writeText');
+			const el = canvas.getByText('Copy Location');
+			el.click();
+			expect(spy).toHaveBeenCalledTimes(1);
+			expect(spy).toHaveBeenCalledWith('{"lng":10.2,"lat":51.3,"zoom":5,"pitch":0,"bearing":0}');
+		});
+		await step('copy bounds button yields correct result', async () => {
+			const spy = spyOn(navigator.clipboard, 'writeText');
+			const el = canvas.getByText('Copy Bounds');
+			el.click();
+			expect(spy).toHaveBeenCalledTimes(1);
+			expect(spy).toHaveBeenCalledWith(
+				'[[-2.763867187498761,46.99180980708053],[23.163867187501523,55.2386838776998]]'
+			);
+		});
+	}}
+>
+	<div class="container">
+		<DesignTokens theme="light">
+			<Map showDebug style={SWRDataLabLight()} initialLocation={{ lat: 51.3, lng: 10.2, zoom: 5 }}>
+				<AttributionControl />
+			</Map>
+		</DesignTokens>
+	</div>
+</Story>
+
 <Story asChild name="Alternate Style">
 	<div class="container">
 		<DesignTokens theme="dark">
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 5cdfc28b..63453d55 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -215,11 +215,11 @@
 	{#if showDebug}
 		<div class="debug">
 			<ul>
-				<li>
+				<li class="debug-location">
 					[{center?.lat.toFixed(2)}, {center?.lng.toFixed(2)}]
 				</li>
 				{#each debugValues as [key, value]}
-					<li>
+					<li class={`debug-${key}`}>
 						{key}=<button onclick={handleDebugValueClick}
 							>{value?.toLocaleString('en', { maximumSignificantDigits: 6 })}</button
 						>

From e00d8873bb466a974e41f5b94ec930d3dc12d481 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 12 Jun 2026 18:51:48 +0200
Subject: [PATCH 3/5] round bounds

---
 components/src/maplibre/Map/Map.stories.svelte | 4 +---
 components/src/maplibre/Map/Map.svelte         | 5 ++++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 1019b484..40b04791 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -281,9 +281,7 @@
 			const el = canvas.getByText('Copy Bounds');
 			el.click();
 			expect(spy).toHaveBeenCalledTimes(1);
-			expect(spy).toHaveBeenCalledWith(
-				'[[-2.763867187498761,46.99180980708053],[23.163867187501523,55.2386838776998]]'
-			);
+			expect(spy).toHaveBeenCalledWith('[["-2.76387","46.99181"],["23.16387","55.23868"]]');
 		});
 	}}
 >
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 63453d55..9d0853c0 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import maplibre, {
 		type LngLatBoundsLike,
+		type LngLatLike,
 		type MapLibreEvent,
 		type ProjectionSpecification,
 		type StyleSpecification
@@ -200,7 +201,9 @@
 	};
 	const handleDebugCopyBoundsClick = (e: MouseEvent) => {
 		if (e.target) {
-			const s = JSON.stringify(bounds.toArray());
+			const s = JSON.stringify(
+				bounds.toArray().map((ll: [number, number]) => ll.map((c: number) => c.toFixed(5)))
+			);
 			navigator.clipboard.writeText(s);
 		}
 	};

From b51ccc0ed7fd93227cdf8cbf2914916057a0a689 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 12 Jun 2026 18:56:24 +0200
Subject: [PATCH 4/5] Fix test

---
 components/src/maplibre/Map/Map.stories.svelte | 4 ++--
 components/src/maplibre/Map/Map.svelte         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 40b04791..01a01263 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -281,11 +281,11 @@
 			const el = canvas.getByText('Copy Bounds');
 			el.click();
 			expect(spy).toHaveBeenCalledTimes(1);
-			expect(spy).toHaveBeenCalledWith('[["-2.76387","46.99181"],["23.16387","55.23868"]]');
+			expect(spy).toHaveBeenCalledWith('[["3.60820","48.46959"],["16.79180","53.96605"]]');
 		});
 	}}
 >
-	<div class="container">
+	<div class="container" style:width="600px" style:height="400px">
 		<DesignTokens theme="light">
 			<Map showDebug style={SWRDataLabLight()} initialLocation={{ lat: 51.3, lng: 10.2, zoom: 5 }}>
 				<AttributionControl />
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 9d0853c0..c5456f09 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -202,7 +202,7 @@
 	const handleDebugCopyBoundsClick = (e: MouseEvent) => {
 		if (e.target) {
 			const s = JSON.stringify(
-				bounds.toArray().map((ll: [number, number]) => ll.map((c: number) => c.toFixed(5)))
+				bounds.toArray().map((ll: [number, number]) => ll.map((c: number) => c.toFixed(3)))
 			);
 			navigator.clipboard.writeText(s);
 		}

From e38107cb5a89342bec3e68d04fc4b24b15ec695e Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 12 Jun 2026 18:59:36 +0200
Subject: [PATCH 5/5] fix test

---
 components/src/maplibre/Map/Map.stories.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 01a01263..a4b1a42b 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -281,7 +281,7 @@
 			const el = canvas.getByText('Copy Bounds');
 			el.click();
 			expect(spy).toHaveBeenCalledTimes(1);
-			expect(spy).toHaveBeenCalledWith('[["3.60820","48.46959"],["16.79180","53.96605"]]');
+			expect(spy).toHaveBeenCalledWith('[["3.608","48.470"],["16.792","53.966"]]');
 		});
 	}}
 >