Radio sonde on map

client/src/components/MapView.vue

@@ -20,6 +20,7 @@ import {fromLonLat, toLonLat} from 'ol/proj';
 import {Style, Fill, Stroke, Circle as CircleStyle} from 'ol/style';
 import {applyStyle} from 'ol-mapbox-style';
 import {Aurora} from '@/services/aurora.ts';
+import {SondesLayer} from '@/services/sondes.ts';
 import 'ol/ol.css';
 
 const current = ref({latitude: 0, longitude: 0});
@@ -40,6 +41,7 @@ const OVERLAY_GROUPS = [
 			{id: 'aircraft', label: 'Aircraft', icon: '✈️'},
 			{id: 'marine', label: 'Marine', icon: '🚢'},
 			{id: 'satellites', label: 'Satellites', icon: '🛰️'},
+			{id: 'sondes', label: 'Weather Balloons', icon: '️🎈'},
 		],
 	},
 	{
@@ -84,6 +86,7 @@ let airTraffic: AirTrafficLayer;
 let aisLayer: AISLayer;
 let range: RangeLayer;
 let sats: SatsLayer;
+let sondes: SondesLayer;
 let aurora: Aurora;
 
 const autoMode = ref(false);
@@ -273,6 +276,14 @@ function toggleOverlay(id: string) {
 			activeOverlays.value.add('satellites');
 			sats.show();
 		}
+	} else if (id === 'sondes') {
+		if(activeOverlays.value.has('sondes')) {
+			activeOverlays.value.delete('sondes');
+			sondes.hide();
+		} else {
+			activeOverlays.value.add('sondes');
+			sondes.show();
+		}
 	} else if (id === 'aurora') {
 		if (activeOverlays.value.has('aurora')) {
 			activeOverlays.value.delete('aurora');
@@ -669,6 +680,7 @@ onMounted(async () => {
 	aisLayer = new AISLayer(map);
 	airTraffic = new AirTrafficLayer(map);
 	sats = new SatsLayer(map);
+	sondes = new SondesLayer(map);
 	aurora = new Aurora(map);
 	range = new RangeLayer(map);
 
@@ -692,6 +704,7 @@ onUnmounted(() => {
 	airTraffic?.hide();
 	aisLayer?.hide();
 	sats?.hide();
+	sondes?.hide();
 	aurora?.hide();
 	range?.hide();
 });