Complete Map and Popup

src/routes/[qrcode]/Map.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
   import * as L from 'leaflet';
   import 'leaflet/dist/leaflet.css';
-  import { onMount } from "svelte";
+  import { onMount, type Snippet } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
 
   type Props = {
     x: number,
     y: number,
+    children?: Snippet,
   } & SvelteHTMLElements['div']
 
-  let { x, y, ...rest }: Props = $props();
+  let { x, y, children, ...rest }: Props = $props();
 
   let mapDiv: HTMLDivElement;
+  let popupDiv: HTMLDivElement;
   let map: L.Map;
 
   onMount(() => {
@@ -20,9 +22,16 @@
       maxZoom: 19,
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     }).addTo(map);
-    L.marker([x, y]).addTo(map);
+    const marker = L.marker([x, y]).addTo(map);
+    if (children !== undefined)
+      marker.bindPopup(popupDiv, { closeOnClick: false }).openPopup();
   });
 </script>
 
 <div bind:this={mapDiv} {...rest}>
+</div>
+<div class="hidden">
+  <div bind:this={popupDiv} class="h-full w-full">
+    {@render children?.()}
+  </div>
 </div>