pre heatmap

src/routes/map.svelte

@@ -3,7 +3,7 @@
     import * as L from "leaflet";
     import type { Map as LeafletMap, LayerGroup } from "leaflet";
     import "leaflet/dist/leaflet.css";
-    import VelocityLayer from "./velocity.svelte";
+    import WindVisualization from './WindVisualisation.svelte';
     import { distHaversine } from "../lib/mathutil.ts";
     import type { PredictionData, TelemetryData } from "../lib/types.ts";
 
@@ -22,15 +22,7 @@
     let mouseLng = 0;
     let isSelecting = false;
 
-    let velocityOptions = {
-        displayValues: true,
-        displayOptions: {
-            velocityType: "Global Wind",
-            position: "bottomleft",
-            emptyString: "No velocity data",
-        },
-        data: null,
-    };
+    let windData;
 
     const dispatch = createEventDispatcher<{ coordinatesSelected: { lat: number; lng: number } }>();
 
@@ -45,7 +37,7 @@
         }).addTo(map);
 
         const response = await fetch("src/routes/testVelo.json");
-        velocityOptions.data = await response.json();
+        windData = await response.json();
 
         map.on("mousemove", (e: any) => {
             mouseLat = e.latlng.lat;
@@ -156,7 +148,7 @@
     <div class="panel-container">
         <slot />
     </div>
-    {#if map}
-        <VelocityLayer {map} {velocityOptions} />
+    {#if map && windData}
+        <WindVisualization {map} windData={windData} />
     {/if}
 </div>