embed maps via iframe on localhost

src/lib/components/navigation/weather-nav.svelte

@@ -14,17 +14,29 @@
 		{
 			title: '7-Day Forecast',
 			url: '/weather/week' as const,
-			icon: 'calendar'
+			iconPaths: [
+				'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'
+			]
 		},
 		{
 			title: 'Model Comparison',
 			url: '/weather/compare' as const,
-			icon: 'chart'
+			iconPaths: ['M13 7h8m0 0v8m0-8l-8 8-4-4-6 6']
 		},
 		{
 			title: '14-Day Forecast',
 			url: '/weather/14-day' as const,
-			icon: 'extended'
+			iconPaths: [
+				'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z'
+			]
+		},
+		{
+			title: 'Maps',
+			url: '/weather/maps' as const,
+			// Heroicons "map" outline icon
+			iconPaths: [
+				'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7'
+			]
 		}
 	];
 
@@ -106,49 +118,17 @@
 				onclick={onMobileClose}
 			>
 				<div class="flex h-5 w-5 shrink-0 items-center justify-center">
-					{#if link.icon === 'calendar'}
-						<svg
-							class="h-4.5 w-4.5"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-							stroke-width="1.75"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-							/>
-						</svg>
-					{:else if link.icon === 'chart'}
-						<svg
-							class="h-4.5 w-4.5"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-							stroke-width="1.75"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
-							/>
-						</svg>
-					{:else if link.icon === 'extended'}
-						<svg
-							class="h-4.5 w-4.5"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-							stroke-width="1.75"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
-							/>
-						</svg>
-					{/if}
+					<svg
+						class="h-4.5 w-4.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="1.75"
+					>
+						{#each link.iconPaths as d (d)}
+							<path stroke-linecap="round" stroke-linejoin="round" {d} />
+						{/each}
+					</svg>
 				</div>
 				{#if !collapsed}
 					<span class="ml-2.5 whitespace-nowrap">{link.title}</span>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	// Minimal page: no geolocation/state UI, just an embedded Open-Meteo map.
+	// const iframeSrc = 'https://maps.open-meteo.com/';
+	const iframeSrc = 'http://localhost:5173/';
+</script>
+
+<svelte:head>
+	<title>Weather Map | Open-Meteo.com</title>
+	<link rel="canonical" href="https://open-meteo.com/weather/maps" />
+	<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;"
+>
+	<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;"
+		sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+	></iframe>
+</div>

vite.config.ts

@@ -3,8 +3,34 @@ import tailwindcss from '@tailwindcss/vite';
 import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
+import type { IncomingMessage, ServerResponse } from 'http';
+import type { Plugin, PreviewServer, ViteDevServer } from 'vite';
+
+const addHeaders = (res: ServerResponse) => {
+	res.setHeader('Access-Control-Allow-Origin', '*');
+	res.setHeader('Access-Control-Allow-Methods', 'GET');
+	res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+	res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+};
+
+const viteServerConfig = (): Plugin => ({
+	name: 'add-headers',
+	configureServer: (server: ViteDevServer) => {
+		server.middlewares.use((_req: IncomingMessage, res: ServerResponse, next: () => void) => {
+			addHeaders(res);
+			next();
+		});
+	},
+	configurePreviewServer: (server: PreviewServer) => {
+		server.middlewares.use((_req: IncomingMessage, res: ServerResponse, next: () => void) => {
+			addHeaders(res);
+			next();
+		});
+	}
+});
+
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [tailwindcss(), sveltekit(), viteServerConfig()],
 
 	test: {
 		expect: { requireAssertions: true },