Build a Flight Tracker
Build a browser-based CesiumJS flight tracker that animates real FlightRadar24 data from San Francisco to Copenhagen across 3D terrain and buildings. The tutorial progresses from static radar samples to a time-interpolated, camera-tracked glTF airplane.
Build a Flight Tracker
Author: Cesium | Published: Unknown | Generated: 2026-03-04 | Domain: cesium.com
Tags: ‘#CesiumJS’ ‘#3DGeospatial’ ‘#FlightTracking’ ‘#JavaScript’ ‘#glTF’
TLDR
This CesiumJS tutorial builds an interactive 3D visualization of SAS flight SK936 from San Francisco to Copenhagen using FlightRadar24 position data. It configures a Cesium ion-backed globe with World Terrain and OSM Buildings, converts longitude/latitude/ellipsoid-height data into ECEF Cartesian coordinates, then uses
SampledPositionPropertyto interpolate movement at assumed 30-second intervals. A glTF airplane model is uploaded to Cesium ion, oriented usingVelocityOrientationProperty, and tracked by the camera.
Key Takeaways
- Set up a CesiumJS viewer: Import CesiumJS and its widget CSS, configure a Cesium ion access token, and create
Cesium.Viewerin a web-hosted Glitch project. - Add global context layers:
Cesium.Terrain.fromWorldTerrain()supplies terrain with up to 1 m accuracy, while Cesium OSM Buildings provides more than 350 million OpenStreetMap-derived buildings; Bing aerial imagery is included by default. - Convert and inspect radar samples: Each radar sample is rendered as a Cesium entity using
Cartesian3.fromDegrees(longitude, latitude, height), which converts geographic coordinates to Earth-centered, Earth-fixed (ECEF) positions. - Account for vertical datum differences: The flight data is preprocessed from feet relative to mean sea level into meters relative to the WGS84 ellipsoid, which is the height reference CesiumJS expects.
- Animate the flight path: Starting at
2020-03-09T23:10:00Z, samples are assumed to be 30 seconds apart;SampledPositionProperty, aTimeIntervalCollection, and a 50× clock multiplier animate and constrain the aircraft entity. - Attach a moving 3D aircraft: Upload a glTF airplane to Cesium ion, retrieve it with
IonResource.fromAssetId, and derive its heading automatically withVelocityOrientationProperty.
Images & Media
- Cesium ion access-token screen — Shows where to copy the default Cesium ion access token.
- Glitch app preview instructions — Demonstrates opening the hosted application alongside the code editor.
- Flight tracker radar-sample path — Visualizes the complete sequence of radar points from gate to Copenhagen landing.
- 3D versus Web Mercator flight route — Compares the largely straight 3D route with its curved appearance on a Web Mercator map.
- Cesium ion asset ID location — Identifies where to find the uploaded airplane model’s Cesium ion asset ID.
Referenced Links
- FlightRadar24 flight-data context — Background on FlightRadar24 data used in the tutorial.
- Raw SK936 radar data CSV — Downloadable source data for the San Francisco-to-Copenhagen flight.
- Cesium Glitch starter template — Browser-based starter project used to host the app.
- Cesium World Terrain — Global terrain layer used by the viewer.
- SampledPositionProperty API — CesiumJS API for storing timestamped positions and interpolating movement.
- Airplane glTF model — Downloadable 3D model uploaded to Cesium ion for the animated aircraft.