A Minimal Flight Tracking Map

Day 11 of the #30DayMapChalenge is to create a Minimal Map. For this task my Minimal London flight-tracking map strips away everything but the essentials - a bold black canvas, a clean blue river, crisp white bridges, and the silent drift of planes crossing the city in real-time.

🗺 What the Map Shows

  • At its heart, the map visualizes:
  • The River Thames, rendered as a smooth, blue line cutting through the dark void of London.
  • London’s iconic bridges, appearing as thin white strokes - each connecting the banks of the Thames with quiet precision.
  • Real-time aircraft, shown as small white dots that glide across the map’s surface, constantly updated from live air traffic data.
  • No labels, no basemap, no noise. Just London reduced to geometry, motion, and rhythm.

✈️ Live Plane Data from the OpenSky Network

The tiny white dots aren’t random - they represent real planes currently flying over and around London. The data is sourced from the OpenSky Network API, a public ADS-B data platform that collects live air traffic positions from volunteer receivers worldwide.

Every 10 seconds, the map fetches the latest aircraft positions within the current map bounds using:

https://opensky-network.org/api/states/all

The coordinates of each plane are extracted and smoothly animated between updates, so the dots appear to glide rather than jump.

⚙️ How the Map Works

The map was built using MapLibre GL JS, an open-source mapping library.

Here’s a simplified breakdown of how it works under the hood:

  • Initialize an empty black map
  • The map starts with no basemap - just a black background and an empty vector style definition.
  • Load the Thames and bridges using a custom GeoJSON file.
  • The river is styled in blue, and the bridges in white.
  • Add the “LDN” label overlay
  • Fetch live plane data
  • Every 10 seconds, the OpenSky API is queried for aircraft within the current map bounds. 
  • Animate the planes between API updates, interpolating between their previous and next reported positions, creating a continuous sense of motion across the dark sky.

Comments

Popular Posts