diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 2d48b733..24a4cd75 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -117,15 +117,15 @@
 		mapContext.map.on('load', () => {
 			zoom = mapContext.map?.getZoom();
 			center = mapContext.map?.getCenter();
-			pitch = mapContext.map?.getPitch();
-			bearing = mapContext.map?.getBearing();
+			pitch = mapContext.map?.getPitch() || 0;
+			bearing = mapContext.map?.getBearing() || 0;
 		});
 
 		mapContext.map.on('moveend', () => {
 			zoom = mapContext.map?.getZoom();
 			center = mapContext.map?.getCenter();
-			pitch = mapContext.map?.getPitch();
-			bearing = mapContext.map?.getBearing();
+			pitch = mapContext.map?.getPitch() || 0;
+			bearing = mapContext.map?.getBearing() || 0;
 		});
 
 		if (onmoveend) {
@@ -178,7 +178,7 @@
 		}
 	});
 
-	const debugValues = $derived(Object.entries({ zoom, pitch, 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;
@@ -188,7 +188,7 @@
 	};
 	const handleDebugCopyLocationClick = (e: MouseEvent) => {
 		if (e.target) {
-			const s = JSON.stringify({ lng: center?.lng, lat: center?.lat, zoom, pitch });
+			const s = JSON.stringify({ lng: center?.lng, lat: center?.lat, zoom, pitch, bearing });
 			navigator.clipboard.writeText(s);
 		}
 	};
diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
index d325fc6d..05013937 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.stories.svelte
@@ -23,7 +23,7 @@
 				<Map showDebug style={SWRDataLabDark()} initialLocation={locations.germany}>
 					<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 					<AttributionControl position="bottom-left" />
-					<NavigationControl />
+					<NavigationControl showCompass />
 				</Map>
 			</div>
 		</div>