).__flightMap = map;
+
+ map.on('move', () => {
+ const target = pitchForZoom(map.getZoom());
+ if (Math.abs(map.getPitch() - target) > 0.05) {
+ map.setPitch(target);
+ }
+ });
+
+ // 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 {
+ if (terrainEnabled) {
+ map.addSource('dem', {
+ type: 'raster-dem',
+ tiles: TERRAIN_TILES,
+ encoding: 'terrarium',
+ tileSize: 256,
+ });
+ map.setTerrain({ source: 'dem', exaggeration: 1.4 });
+ }
+
+ 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(
+ `${escapeHtml(p.name)}
${escapeHtml(p.icao)}
`,
+ )
+ .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).__flightMap;
+ map.remove();
+ };
+ }, []);
+
+ return (
+
+
+ Flight Ops
+
+ {airportCount === null ? 'loading airports…' : `${airportCount} EU airports`}
+
+
+
+