Fixed map

client/src/components/MapView.vue

@@ -71,9 +71,10 @@ function buildBaseLayer(dark: boolean) {
 	return new TileLayer({
 		source: new XYZ({
 			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://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+				: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+			attributions: '© OpenStreetMap © CARTO',
+			maxZoom: 19,
 		}),
 		zIndex: 0,
 	})
@@ -95,7 +96,7 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
 	const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
 
 	// Rings at 50, 100, 150, 200 nm
-	for (const nm of [100, 200, 300]) {
+	for (const nm of [50, 100, 150, 200]) {
 		const ring = new Feature(new CircleGeom(center, nm * NM))
 		ring.setStyle(new Style({
 			stroke: new Stroke({ color: ringStroke, width: 1, lineDash: [6, 4] }),
@@ -143,7 +144,7 @@ onMounted(() => {
 	map = new Map({
 		target:   mapEl.value!,
 		layers:   [buildBaseLayer(props.dark), stationLayer],
-		view:     new View({ center: fromLonLat([lon, lat]), zoom: 7 }),
+		view:     new View({ center: fromLonLat([lon, lat]), zoom: 8 }),
 		controls: [],
 	})