Refactor of map & other components

src/routes/predict/+page.svelte

@@ -1,26 +1,26 @@
-<script>
-    import Map from '../map.svelte';
+<script lang="ts">
+    import Map from '../Map.svelte';
     import ControlPanel from '../ControlPanel.svelte';
     import Navbar from '../Navbar.svelte';
-    // import BurstCalculator from './BurstCalculator.svelte';
+    import { onMount } from 'svelte';
+    import { latestPredictionParsed } from '$lib/stores';
+    import { Modal } from '@sveltestrap/sveltestrap';
 
-    let coordinates = {
-        lat: '56.3576',
-        lng: '39.8666'
-    }
+    let map: { plotData?: (prediction: any) => void } | null = null;
 
-    function handlePositionUpdate(event) {
-        coordinates.lat = event.detail.lat;
-        coordinates.lng = event.detail.lng;
-    }
+    onMount(() => {
+       latestPredictionParsed.subscribe((prediction) => {
+            if (prediction && map) {
+                map.plotData?.(prediction);
+            }
+        });
+    });
 </script>
 
 <main>
     <Navbar />
-    <Map bind:coordinates>
-        <ControlPanel 
-            {coordinates}
-            on:updatePosition={handlePositionUpdate}
+    <Map bind:this={map} mode="prediction">
+        <ControlPanel
         />
     </Map>
 </main>