Sats

client/src/components/MapView.vue

@@ -32,11 +32,13 @@ const showWind = ref(false)
 const windSrc = ref('')
 
 const OVERLAYS = [
+	{ id: 'traffic', label: 'Traffic', icon: '✈️' },
+	{ id: 'sats', label: 'Sats', icon: '🛰️' },
 	{ id: 'rain', label: 'Rain', icon: '🌧️' },
 	{ id: 'wind', label: 'Wind', icon: '💨' },
 ]
 
-const activeOverlays = ref<Set<string>>(new Set(['rain']))
+const activeOverlays = ref<Set<string>>(new Set(['traffic', 'rain']))
 const overlayLayers: { [key: string]: any } = {}
 
 let map: Map
@@ -108,20 +110,21 @@ async function refreshRain() {
 	map.addLayer(layer)
 }
 
-function toggleAT() {
-	if (atActive.value) {
-		aisLayer.hide()
-		airTraffic.hide()
-		range.hide()
-	} else {
-		aisLayer.show()
-		airTraffic.show()
-		range.show()
-	}
-	atActive.value = !atActive.value
-}
-
 function toggleOverlay(id: string) {
+	if (id === 'traffic') {
+		if (activeOverlays.value.has('traffic')) {
+			activeOverlays.value.delete('traffic');
+			aisLayer.hide()
+			airTraffic.hide()
+			range.hide()
+		} else {
+			activeOverlays.value.add('traffic');
+			aisLayer.show()
+			airTraffic.show()
+			range.show()
+		}
+	}
+
 	if (id === 'wind') {
 		if (activeOverlays.value.has('wind')) {
 			activeOverlays.value.delete('wind')
@@ -340,9 +343,6 @@ watch(() => props.dark, dark => {
 		/>
 
 		<div class="overlay-toggles desktop">
-			<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
-				✈️ Traffic
-			</button>
 			<button
 				v-for="o in OVERLAYS" :key="o.id"
 				class="overlay-btn"
@@ -358,9 +358,6 @@ watch(() => props.dark, dark => {
 				⚙️ Layers
 			</button>
 			<div v-if="showOverlays" class="layers-dropdown">
-				<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
-					✈️ Traffic
-				</button>
 				<button
 					v-for="o in OVERLAYS" :key="o.id"
 					class="overlay-btn"