Complete Map and Popup

src/lib/icons/ConnType2.svelte

@@ -0,0 +1,22 @@
+<svg
+        id="Calque_1"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 101 92"
+        style="enable-background: new 0 0 101 92"
+        xml:space="preserve"
+>
+    <path d="M15,40c0,5.5,4.5,10,10,10s10-4.5,10-10s-4.5-10-10-10S15,34.5,15,40z M20,40c0-2.8,2.2-5,5-5s5,2.2,5,5s-2.2,5-5,5
+      S20,42.8,20,40z M27,62c0,5.5,4.5,10,10,10s10-4.5,10-10s-4.5-10-10-10S27,56.5,27,62z M32,62c0-2.8,2.2-5,5-5s5,2.2,5,5s-2.2,5-5,5
+      S32,64.8,32,62z M53,62c0,5.5,4.5,10,10,10s10-4.5,10-10s-4.5-10-10-10S53,56.5,53,62z M58,62c0-2.8,2.2-5,5-5s5,2.2,5,5s-2.2,5-5,5
+      S58,64.8,58,62z M40,40c0,5.5,4.5,10,10,10s10-4.5,10-10s-4.5-10-10-10S40,34.5,40,40z M45,40c0-2.8,2.2-5,5-5s5,2.2,5,5s-2.2,5-5,5
+      S45,42.8,45,40z M65,40c0,5.5,4.5,10,10,10s10-4.5,10-10s-4.5-10-10-10S65,34.5,65,40z M70,40c0-2.8,2.2-5,5-5s5,2.2,5,5s-2.2,5-5,5
+      S70,42.8,70,40z M55,23c0,4.4,3.6,8,8,8s8-3.6,8-8s-3.6-8-8-8S55,18.6,55,23z M60,23c0-1.7,1.3-3,3-3s3,1.3,3,3s-1.3,3-3,3
+      S60,24.7,60,23z M30,23c0,4.4,3.6,8,8,8s8-3.6,8-8s-3.6-8-8-8S30,18.6,30,23z M35,23c0-1.7,1.3-3,3-3s3,1.3,3,3s-1.3,3-3,3
+      S35,24.7,35,23z M0,41.5C0,69.4,22.6,92,50.5,92S101,69.4,101,41.5c0-12.8-5.3-24.1-12.7-33.4C82,0.3,70.8,0,70.8,0H30.7
+      c-2.8,0-11.8,0.2-17.9,7.8C4.9,16.7,0,28.5,0,41.5z M9,42.4C9,32,13,22.5,19.5,15.3C24.4,9.2,31.7,9,34,9h32.5c0,0,9,0.2,14.2,6.5
+      C86.7,23,91,32.1,91,42.4C91,64.8,72.6,83,50,83S9,64.8,9,42.4z"/>
+  </svg>

src/routes/[qrcode]/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { page } from '$app/state';
   import type { LayoutProps } from './$types';
+  import ConnType2 from "$lib/icons/ConnType2.svelte";
+  import Icon from "@iconify/svelte";
 
   let { data, children }: LayoutProps = $props();
   const cc = $derived(data.chargecontroller);
@@ -29,7 +31,23 @@
       </div>
     </div>
     {#await import('./Map.svelte') then { default: Map }}
-      <Map class="grow h-10 -z-20" x={cc['latitude']} y={cc['longitude']}/>
+      <Map class="grow h-10 -z-20" x={cc['latitude']} y={cc['longitude']}>
+        <div class="flex flex-col gap-1">
+          <div class="inline-flex items-center gap-2">
+            <p class="!m-0">Informations</p>
+            <div class="tooltip" data-tip="Type 2">
+              <div class="w-5 h-5">
+                <ConnType2/>
+              </div>
+            </div>
+          </div>
+          <div class="w-full border-b border-b-gray-300"></div>
+          <div class="inline-flex items-center gap-2">
+            <Icon class="h-5 w-5 text-success" icon="mdi:checkbox-marked-circle"/>
+            <p class="!m-0">Disponibile</p>
+          </div>
+        </div>
+      </Map>
     {/await}
   </div>
   <div class="z-20 mt-16 grow pointer-events-none">

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>