Add initial plotting

src/routes/map.svelte

@@ -2,9 +2,12 @@
     import { onMount } from 'svelte';
     import * as L from 'leaflet';
     import 'leaflet/dist/leaflet.css';
+    import { distHaversine } from '../lib/mathutil.ts';
+
+    import { latestPredictionParsed } from '../lib/prediction.ts';
 
     /**
-        * @type {{ removeLayer: (arg0: any) => void; setView: (arg0: number[], arg1: any) => void; getZoom: () => any; on: (arg0: string, arg1: (e: any) => void) => void; }}
+        * @type {L.Map}
     */
     let map;
     let mouseLat = 0;
@@ -70,7 +73,80 @@
             <b>Launch Point</b><br>, Lat: ${marker.getLatLng().lat.toFixed(6)}<br>, Long: ${marker.getLatLng().lng.toFixed(6)}<br>
             `;
         });
+
+        latestPredictionParsed.subscribe((prediction) => {
+            if (prediction) {
+                plotPrediction(prediction);
+            }
+        });
     });
+
+    const plotPrediction = (prediction) => {
+        console.log("Flight data parsed, creating map plot...");
+
+        // Clear existing map items
+        if (marker) {
+            map.eachLayer((layer) => {
+                if (layer instanceof L.Marker || layer instanceof L.Polyline) {
+                    map.removeLayer(layer);
+                }
+            });
+        }
+
+        const { launch, landing, burst, flight_path, flight_time } = prediction;
+
+        // Calculate range and time of flight
+        const range = distHaversine(launch.latlng, landing.latlng, 1);
+        const f_hours = Math.floor(flight_time / 3600);
+        const f_minutes = Math.floor(((flight_time % 86400) % 3600) / 60).toString().padStart(2, '0');
+        const flighttime = `${f_hours}hr${f_minutes}`;
+        console.log(`Range: ${range}, Flight Time: ${flighttime}`);
+
+        // Create custom icons
+        const launchIcon = L.icon({
+            iconUrl: 'target-blue.png',
+            iconSize: [10, 10],
+            iconAnchor: [5, 5],
+        });
+
+        const landIcon = L.icon({
+            iconUrl: 'target-red.png',
+            iconSize: [10, 10],
+            iconAnchor: [5, 5],
+        });
+
+        const burstIcon = L.icon({
+            iconUrl: 'pop-marker.png',
+            iconSize: [16, 16],
+            iconAnchor: [8, 8],
+        });
+
+        // Add markers to the map
+        const launchMarker = L.marker(launch.latlng, {
+            title: `Launch (${launch.latlng.lat.toFixed(4)}, ${launch.latlng.lng.toFixed(4)}) at ${launch.datetime.toUTCString()}`,
+            icon: launchIcon,
+        }).addTo(map);
+
+        const landMarker = L.marker(landing.latlng, {
+            title: `Landing (${landing.latlng.lat.toFixed(4)}, ${landing.latlng.lng.toFixed(4)}) at ${landing.datetime.toUTCString()}`,
+            icon: landIcon,
+        }).addTo(map);
+
+        const burstMarker = L.marker(burst.latlng, {
+            title: `Burst (${burst.latlng.lat.toFixed(4)}, ${burst.latlng.lng.toFixed(4)} at altitude ${burst.latlng.alt.toFixed(0)}) at ${burst.datetime.toUTCString()}`,
+            icon: burstIcon,
+        }).addTo(map);
+
+        // Add flight path polyline
+        const pathPolyline = L.polyline(flight_path, {
+            weight: 3,
+            color: "#000000",
+        }).addTo(map);
+
+        // Center the map on the launch point
+        map.setView(launch.latlng, 8);
+    };
+
 </script>
 
 <div class="map-container">