refactor

src/routes/weather/maps/+page.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-	// Minimal page: no geolocation/state UI, just an embedded Open-Meteo map.
-	// const iframeSrc = 'https://maps.open-meteo.com/';
-	const iframeSrc = 'https://maps.open-meteo.com';
+	import { storedLocation } from '$lib/stores/settings';
+
+	// the embedded map understands maplibre's #zoom/lat/lng hash, so the iframe
+	// opens focused on the selected location; picking a new location while on
+	// this page recenters the map
+	const iframeSrc = $derived(
+		`https://maps.open-meteo.com/#8/${$storedLocation.latitude.toFixed(3)}/${$storedLocation.longitude.toFixed(3)}`
+	);
 </script>
 
 <svelte:head>
@@ -10,18 +15,15 @@
 	<meta name="description" content="Interactive weather map powered by Open-Meteo" />
 </svelte:head>
 
-<!-- Full-viewport map. No surrounding UI or location state. -->
-<div
-	style="position:relative; inset:0; margin:0; padding:0; height:100%; width:100%; background:#000;"
->
+<!-- Full-bleed map: the layout drops its padding for this route -->
+<div class="h-full w-full bg-black">
 	<iframe
 		src={iframeSrc}
 		title="Open-Meteo Interactive Map"
 		loading="lazy"
 		allowfullscreen
 		referrerpolicy="no-referrer"
-		class="map-iframe"
-		style="border:0; width:100%; height:100%; display:block;"
+		class="block h-full w-full border-0"
 		sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
 	></iframe>
 </div>