From 54c53a5822a0c0e67a9374670608cc8fbe91a9cc Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Sat, 4 Jul 2026 22:04:12 -0400
Subject: [PATCH] ADSB images

---
 client/src/components/Aircraft.vue |  2 +-
 client/src/components/MapView.vue  | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Aircraft.vue b/client/src/components/Aircraft.vue
index 38330ec..08928fb 100644
--- a/client/src/components/Aircraft.vue
+++ b/client/src/components/Aircraft.vue
@@ -241,7 +241,7 @@ const navball = computed(() => {
 
 		<!-- Photo -->
 		<div v-if="photoUrl" class="ap-photo-wrap">
-			<img class="ap-photo" :class="{ 'ap-photo--sil': isSil }" :src="photoUrl" :alt="callsign" />
+			<img class="ap-photo" :class="{ 'ap-photo--sil': isSil }" :src="'/api/adsb-image/' + plane.icao" :alt="callsign" />
 		</div>
 
 		<!-- Body -->
diff --git a/client/src/components/MapView.vue b/client/src/components/MapView.vue
index 0368f52..088796f 100644
--- a/client/src/components/MapView.vue
+++ b/client/src/components/MapView.vue
@@ -3,6 +3,8 @@ import { AirTrafficLayer } from '@/services/adsb.ts'
 import { AISLayer } from '@/services/ais.ts'
 import {api} from '@/services/api.ts';
 import {RangeLayer} from '@/services/range.ts';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import VectorTileSource from 'ol/source/VectorTile';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import Map from 'ol/Map'
 import View from 'ol/View'
@@ -128,12 +130,13 @@ function toggleOverlay(id: string) {
 }
 
 function buildBaseLayer(dark: boolean) {
-	return new TileLayer({
-		source: new XYZ({
+	return new VectorTileLayer({
+		source: new VectorTileSource({
 			url: dark
-				? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
-				: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
-			attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
+			? 'https://tiles.zakscode.com/data/osm/{z}/{x}/{y}.pbf'
+			: 'https://tiles.zakscode.com/styles/light/512/{z}/{x}/{y}.png',
+				// ? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
+				// : 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
 		}),
 	})
 }
@@ -175,8 +178,9 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
 }
 
 onMounted(async () => {
-	await fetchRadarFrames()
-	radarFrameIndex.value = nowcastStartIndex.value - 1
+	fetchRadarFrames().then(() => {
+		radarFrameIndex.value = nowcastStartIndex.value - 1
+	});
 
 	const position = await api.position();