Map coordinates selection

src/routes/predict/+page.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-    import Map from '../Map.svelte';
-    import ControlPanel from '../ControlPanel.svelte';
-    import Navbar from '../Navbar.svelte';
-    import { onMount } from 'svelte';
-    import { PredictionStore } from '$lib/stores';
-    import { Modal } from '@sveltestrap/sveltestrap';
-    import L from 'leaflet';
-
+    import Map from "../Map.svelte";
+    import ControlPanel from "../ControlPanel.svelte";
+    import Navbar from "../Navbar.svelte";
+    import { onMount } from "svelte";
+    import { PredictionStore } from "$lib/stores";
+    import { Modal } from "@sveltestrap/sveltestrap";
+    import { addToast, removeToast } from "../Toast.svelte"
+     import ToastContainer from '../Toast.svelte';
+    import L from "leaflet";
 
     let map: Map | null = null;
     let panel: ControlPanel | null = null;
+    let selectionToastId: string | null = null;
 
     onMount(() => {
         PredictionStore.subscribe((data) => {
@@ -17,7 +19,7 @@
                 map?.clearMapLayers();
             }
         });
-        console.log('ControlPanel mounted');
+        console.log("ControlPanel mounted");
         console.log(panel);
 
         if (panel) {
@@ -26,11 +28,42 @@
             L.DomEvent.disableScrollPropagation(element);
         }
     });
+
+    function handleClickSelectOnMap() {
+        if (map) {
+            map.startSelection();
+            console.log("Selection mode enabled");
+            if (!selectionToastId) {
+                selectionToastId = addToast({
+                    header: "Selection Mode",
+                    body: "Click on the map to select a position.",
+                    color: "info",
+                    persistent: true,
+                    onRemoveCallback: () => {
+                        selectionToastId = null;
+                        map?.stopSelection();
+                        console.log("Selection mode disabled");
+                    }
+                });
+            }
+        }
+    }
+
+    function handleCoordinateSelection(event: CustomEvent<{ lat: number; lng: number }>) {
+        const { lat, lng } = event.detail;
+        panel?.updateLaunchPosition(lat, lng);
+        console.log(`Selected coordinates: ${lat}, ${lng}`);
+        if (selectionToastId) {
+            removeToast(selectionToastId);
+            selectionToastId = null;
+        }
+    }
 </script>
 
 <main>
     <Navbar />
-    <Map bind:this={map} mode="prediction" bind:data={$PredictionStore}>
-        <ControlPanel bind:this={panel} />
+    <Map bind:this={map} mode="prediction" bind:data={$PredictionStore} on:coordinatesSelected={handleCoordinateSelection}>
+        <ControlPanel bind:this={panel} {handleClickSelectOnMap} />
+        <ToastContainer />
     </Map>
-</main>
+</main>