wind-global

src/routes/map.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import * as L from 'leaflet';
     import 'leaflet/dist/leaflet.css';
+    import VelocityLayer from './velocity.svelte';
     import { distHaversine } from '../lib/mathutil.ts';
 
     import { latestPredictionParsed } from '../lib/prediction.ts';
@@ -15,6 +16,16 @@
     let mouseLng = 0;
     let inputLat = '56.3576';
     let inputLng = '39.8666';
+    let mapContainer;
+    let velocityOptions = {
+        displayValues: true,
+        displayOptions: {
+            velocityType: 'Global Wind',
+            position: 'bottomleft',
+            emptyString: 'No velocity data',
+        },
+        data: null, // здесь будут ваши данные
+    };
     /**
         * @type {null}
     */
@@ -56,13 +67,17 @@
             map.setView([lat, lng], map.getZoom());
     };
   
-    onMount(() => {
+    onMount(async () => {
         map = L.map('map').setView([51.505, -0.09], 13);
     
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
+        // Загрузка данных для velocity (пример)
+        const response = await fetch('src/routes/testVelo.json');
+        velocityOptions.data = await response.json();
+
         map.on('mousemove', (e) => {
             mouseLat = e.latlng.lat.toFixed(6);
             mouseLng = e.latlng.lng.toFixed(6);
@@ -218,6 +233,11 @@
         <slot></slot>
     </div>
 </div>
+<div bind:this={mapContainer} style="width: 100%; height: 100vh;">
+  {#if map}
+    <VelocityLayer {map} {velocityOptions} />
+  {/if}
+</div>
 
 <style>
     .map-container {