122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import * as maplibregl from 'maplibre-gl';
|
|
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
import { pitchForZoom } from '@/lib/camera';
|
|
|
|
const EUROPE_CENTER: [number, number] = [10, 52];
|
|
const INITIAL_ZOOM = 4;
|
|
const OPENFREEMAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
|
|
const TERRAIN_TILES = ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'];
|
|
|
|
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;
|
|
|
|
const terrainEnabled =
|
|
new URLSearchParams(window.location.search).get('terrain') !== '0' &&
|
|
process.env.NEXT_PUBLIC_TERRAIN !== '0';
|
|
|
|
// 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,
|
|
pitch: 0,
|
|
});
|
|
// Dev/e2e hook so tests can project coordinates to screen space.
|
|
(window as unknown as Record<string, unknown>).__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(
|
|
`<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>
|
|
<span data-testid="airport-count">
|
|
{airportCount === null ? 'loading airports…' : `${airportCount} EU airports`}
|
|
</span>
|
|
</header>
|
|
<div ref={containerRef} data-testid="map" className="map-container" />
|
|
</div>
|
|
);
|
|
}
|