ADSB images

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 -->

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();