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(() => {
-
![]()
+
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();