First Layout with Leaflet map and centered slot for overlays

src/routes/[qrcode]/Map.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import * as L from 'leaflet';
+  import 'leaflet/dist/leaflet.css';
+  import { onMount } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  type Props = {
+    x: number,
+    y: number,
+  } & SvelteHTMLElements['div']
+
+  let { x, y, ...rest }: Props = $props();
+
+  let mapDiv: HTMLDivElement;
+  let map: L.Map;
+
+  onMount(() => {
+    map = L.map(mapDiv).setView([x, y], 13);
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+    L.marker([x, y]).addTo(map);
+  });
+</script>
+
+<div bind:this={mapDiv} {...rest}>
+</div>