106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import * as maplibregl from 'maplibre-gl';
|
|
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
import pkg from '../package.json';
|
|
|
|
const EUROPE_CENTER: [number, number] = [10, 52];
|
|
const INITIAL_ZOOM = 4;
|
|
// Flat 2D view only. Max zoom ≈ ~100 km across a typical desktop viewport width at
|
|
// European latitudes (~47 m/px at z11, 52°N); street-level zoom has no gameplay value.
|
|
export const MIN_ZOOM = 3;
|
|
export const MAX_ZOOM = 11;
|
|
const OPENFREEMAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
|
|
|
|
function escapeHtml(s: string): string {
|
|
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
|
|
export default function Map() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [airportCount, setAirportCount] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
|
|
// Bundlers (Turbopack) break MapLibre's derived worker URL, so point it at a
|
|
// route that serves the worker script (and its relative imports) from node_modules.
|
|
maplibregl.setWorkerUrl('/api/mlworker/maplibre-gl-worker.mjs');
|
|
|
|
const map = new maplibregl.Map({
|
|
container: containerRef.current,
|
|
style: OPENFREEMAP_STYLE,
|
|
center: EUROPE_CENTER,
|
|
zoom: INITIAL_ZOOM,
|
|
minZoom: MIN_ZOOM,
|
|
maxZoom: MAX_ZOOM,
|
|
});
|
|
// Dev/e2e hook so tests can project coordinates to screen space.
|
|
(window as unknown as Record<string, unknown>).__flightMap = map;
|
|
|
|
// Airports are GeoJSON, so they don't depend on basemap tiles: initialize as soon
|
|
// as the style is applied ('styledata') rather than waiting for 'load', which also
|
|
// requires all tile sources to finish.
|
|
let initialized = false;
|
|
const init = async () => {
|
|
if (initialized) return;
|
|
initialized = true;
|
|
try {
|
|
const res = await fetch('/api/airports');
|
|
if (!res.ok) return;
|
|
const data = (await res.json()) as { features: unknown[] };
|
|
setAirportCount(data.features.length);
|
|
|
|
map.addSource('airports', { type: 'geojson', data });
|
|
map.addLayer({
|
|
id: 'airports-circles',
|
|
type: 'circle',
|
|
source: 'airports',
|
|
paint: {
|
|
'circle-radius': 3,
|
|
'circle-color': '#e11d48',
|
|
'circle-stroke-width': 1,
|
|
'circle-stroke-color': '#ffffff',
|
|
},
|
|
});
|
|
|
|
map.on('click', 'airports-circles', (e) => {
|
|
const f = e.features?.[0];
|
|
if (!f) return;
|
|
const p = f.properties as { name: string; icao: string };
|
|
new maplibregl.Popup({ offset: 10 })
|
|
.setLngLat(f.geometry.coordinates as [number, number])
|
|
.setHTML(
|
|
`<div data-testid="airport-popup"><strong>${escapeHtml(p.name)}</strong><br/>${escapeHtml(p.icao)}</div>`,
|
|
)
|
|
.addTo(map);
|
|
});
|
|
} catch (err) {
|
|
console.error('failed to initialize map layers', err);
|
|
}
|
|
};
|
|
|
|
if (map.isStyleLoaded()) void init();
|
|
else map.on('styledata', () => void init());
|
|
|
|
return () => {
|
|
delete (window as unknown as Record<string, unknown>).__flightMap;
|
|
map.remove();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="map-wrap">
|
|
<header data-testid="app-header" className="app-header">
|
|
<h1>Flight Ops</h1>
|
|
<small>v{pkg.version}</small>
|
|
<span data-testid="airport-count">
|
|
{airportCount === null ? 'loading airports…' : `${airportCount} EU airports`}
|
|
</span>
|
|
</header>
|
|
<div ref={containerRef} data-testid="map" className="map-container" />
|
|
</div>
|
|
);
|
|
}
|