added kepler-map web-component

src/routes/+layout.svelte

@@ -5,11 +5,16 @@
   let { children } = $props();
 </script>
 
-<nav>
+<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+
+<div class="flex h-[95vh] flex-col">
+  <nav>
     <a href="/">Home</a>
     <a href="/wa">Kepler Map</a>
     <a href="/devops">CalChat Download</a>
-</nav>
+  </nav>
 
-<svelte:head><link rel="icon" href={favicon} /></svelte:head>
-{@render children()}
+  <main class="flex flex-1 flex-col">
+    {@render children()}
+  </main>
+</div>

src/routes/wa/+page.svelte

@@ -1 +1,29 @@
-<h1 class="text-4xl font-bold">This is where the kepler.gl based Project will be shown</h1>
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let ready = $state(false);
+
+  onMount(() => {
+    const script = document.createElement("script");
+    script.src = "/kepler-map.umd.cjs";
+    script.onload = () => {
+      ready = true;
+    };
+    script.onerror = (e) => console.error("Script load error:", e);
+    document.body.appendChild(script);
+
+    return () => script.remove();
+  });
+</script>
+
+<h1 class="mb-4 text-4xl font-bold">Kepler.gl Map</h1>
+
+{#if ready}
+  <div class="relative flex-1">
+    <div class="absolute inset-0">
+      <kepler-map latitude="52.52" longitude="13.405" zoom="4" map-style="maptiler-dark"></kepler-map>
+    </div>
+  </div>
+{:else}
+  <p>Loading map...</p>
+{/if}