Follow an aircraft into Newark.
Axis is my Newark Airport Traffic and Procedure Explorer. It brings live positions, the airport surface, and procedure context into one place for people (like me) who want to study how an airport moves.
THE IDEA, IN MOTION
One study workspace.
Scroll into the film. Playback begins when this frame enters view.
Enter the film to begin
Controllable demo
Follow an inbound aircraft from the arrival route to runway 22L. Select other aircraft to inspect their flight details.
Choose how to begin
The preview is paused until you choose an option.
Implementation
The live application runs in Next.js, with a Node.js route between the aircraft provider and the browser. React manages aircraft selection. MapLibre draws each new position over the airport’s GeoJSON layers.
- Aircraft providerPosition reports within 45 NM of EWR
- Node.js API routeValidate reports and retain a shared snapshot
- React clientPoll the snapshot and update selection details
- MapLibre mapRender aircraft positions and the selected trail
Aircraft API and server polling
A Node.js route fetches ADSB.fi positions, waiting 1.25 seconds between requests. All browsers share one server snapshot, so extra tabs do not increase provider requests. Incoming coordinates are checked, and positions over 60 seconds old are discarded.
Failed requests and stale positions
Failed requests leave the last aircraft positions visible, marked stale. The server increases the retry delay up to 60 seconds. Before the first successful response, it returns HTTP 503. Browser polling pauses when the tab is hidden.
React state and flight-trail storage
React stores the selected aircraft’s ID so the map and detail panel show the same flight. Its trail stays in browser memory for up to 15 minutes or 240 reports. Gaps over 15 seconds break the line. Reloading clears the history.
Airport geometry and FAA references
Airport geometry comes from OpenStreetMap and is stored as GeoJSON. Validation checks runway references and terminal ordering against the FAA diagram. Procedure coordinates come from FAA records checked against charts. The demo combines PHLBO FOUR and ILS 22L with a separately authored connecting path.
Map updates and rendering cost
MapLibre updates aircraft positions without rebuilding the map. Selecting an aircraft changes its highlight without reloading the aircraft data. React avoids rerendering unchanged list rows, and the browser skips drawing rows outside the visible area.
Controllable demo and shared components
The demo feeds prewritten aircraft movements into the live app’s dashboard and map. Positions update once a second. At 9.8× speed, the main flight lands in about 4 minutes 41 seconds. Each flight repeats independently, and the transcript follows the same instructions that drive its movement.
Verification and deployment constraints
Tests check failed requests and trail gaps. Eleven demo tests cover flight behavior and aircraft recycling. The live app needs one persistent Node.js process because its shared snapshot lives in that process’s memory. This portfolio demo deploys as static files; background map tiles load over the network.