Fixed rain radar and aircraft path

client/src/components/MapView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { AirTrafficLayer } from '@/services/airtraffic.ts'
 import {api} from '@/services/api.ts';
-import {AuroraLayer} from '@/services/aurora.ts';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import Map from 'ol/Map'
 import View from 'ol/View'
@@ -72,14 +71,26 @@ async function fetchRadarFrames() {
 	const nowcast = data.radar.nowcast ?? []
 	radarFrames.value = [...past, ...nowcast]
 	nowcastStartIndex.value = past.length
-	radarFrameIndex.value = past.length - 1
+}
+
+function buildRainSource(url: string): XYZ {
+	return new XYZ({
+		url,
+		attributions: '',
+		maxZoom: 7,
+		tileLoadFunction: (tile: any, src: string) => {
+			const img = tile.getImage()
+			img.onerror = () => tile.setState(3)
+			img.src = src
+		},
+	})
 }
 
 function seekRadar(index: number) {
 	radarFrameIndex.value = index
 	const layer = overlayLayers['rain']
 	if (layer) {
-		layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url(), maxZoom: 7 }))
+		layer.setSource(buildRainSource(OVERLAYS.find(o => o.id === 'rain')!.url()))
 	}
 }
 
@@ -143,7 +154,7 @@ function buildBaseLayer(dark: boolean) {
 function buildOverlayLayer(id: string): TileLayer<XYZ> {
 	const def = OVERLAYS.find(o => o.id === id)!
 	return new TileLayer({
-		source: new XYZ({ url: def.url(), attributions: '', maxZoom: 7 }),
+		source: buildRainSource(def.url()),
 		opacity: 0.2,
 		zIndex:  5,
 	})
@@ -178,6 +189,8 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
 
 onMounted(async () => {
 	await fetchRadarFrames()
+	radarFrameIndex.value = nowcastStartIndex.value - 1
+
 	const position = await api.position();
 
 	const lat = position?.latitude || 0
@@ -192,9 +205,6 @@ onMounted(async () => {
 		controls: [],
 	})
 
-	const aurora = new AuroraLayer(map)
-	aurora.show();
-
 	airTraffic = new AirTrafficLayer(map)
 	airTraffic.show()
 
@@ -205,17 +215,14 @@ onMounted(async () => {
 		map.addLayer(layer)
 	}
 
-	// Sync windy src when OL map finishes moving
 	map.on('moveend', () => {
 		if (showWind.value) syncWindSrc()
 	})
 
 	radarInterval = setInterval(async () => {
 		await fetchRadarFrames()
-		const layer = overlayLayers['rain']
+		radarFrameIndex.value = nowcastStartIndex.value - 1
-		if (layer) {
+		seekRadar(radarFrameIndex.value)
-			layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url() }))
-		}
 	}, 5 * 60 * 1000)
 })
 
@@ -421,30 +428,6 @@ input[type='range'] {
 			allowfullscreen
 		/>
 
-		<!-- Radar Timeline -->
-<!--			<div class="slider-wrap">-->
-<!--				<div class="slider-ticks">-->
-<!--					<div-->
-<!--						v-for="i in hourTickIndices" :key="i"-->
-<!--						class="tick"-->
-<!--						:class="{ nowcast: i >= nowcastStartIndex }"-->
-<!--						:style="{ left: tickPercent(i) + '%' }"-->
-<!--					>-->
-<!--						<div class="tick__line" />-->
-<!--						<span class="tick__label">{{ hourLabel(radarFrames[i]) }}</span>-->
-<!--					</div>-->
-<!--				</div>-->
-<!--				<input-->
-<!--					type="range"-->
-<!--					:min="0"-->
-<!--					:max="radarFrames.length - 1"-->
-<!--					:value="radarFrameIndex"-->
-<!--					@input="onSliderInput"-->
-<!--				/>-->
-<!--			</div>-->
-<!--			<span class="timeline-label">{{ frameLabel(radarFrames[radarFrameIndex]) }}</span>-->
-<!--		</div>-->
-
 		<!-- Desktop toggles -->
 		<div class="overlay-toggles desktop">
 			<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">

server/src/airtraffic.mjs

@@ -25,7 +25,7 @@ export async function getAirTraffic() {
 		const key = a.hex.toLowerCase()
 		if (!history.has(key)) history.set(key, [])
 		const trail = history.get(key)
-		trail.push({ latitude: a.lat, longitude: a.lon, altitude: a.alt_baro || 0, ts: Date.now() })
+		trail.unshift({ latitude: a.lat, longitude: a.lon, altitude: a.alt_baro || 0, ts: Date.now() })
 		if(trail.length > MAX_HISTORY) trail.shift()
 	}