There are several popular flight tracking web apps that overlay current traffic on Google Maps or OpenStreetMap. The UI of these interfaces comes off as skeuomorphic unlike the design of traditional aeronautical charts or professional ATC software.
With this post I wanted to investigate some basic components required for a web-based aircraft tracking chart that reproduces some elements of the design and function of professional aircraft tracking software.
Data Source
ADSBexchange.com aggregates ADS-B feeds worldwide and provides access to this data via a Virtual Radar Server (VRS) merged JSON feed.
Mapping
Projection
The Lambert conformal conic projection (LCC) is a standard map projection used in aeronautical charts because straight lines drawn on this projection approximate the great-circle route between endpoints.
d3-geo-projection includes the LCC. Be mindful of choosing a set of parallel latitudes in order to reduce deviations in scale between the parallels (area of interest).
Country Boundaries
The country boundaries used in the chart are generated from the Natural Earth dataset using world-atlas to download and generate the resulting TopoJSON files. Natural Earth offers 3 different scales for boundary data at 1:10m, 1:50m and 1:110m.
Aircraft
Filtering by Map Bounds
VRS supports a variety of query string parameters including latitude/longitude bounds for filtering aircraft outside of the area of interest to reduce the total size of the response.
Data Tag
There is no standard format for displaying data tags in aircraft plotting software so I examined the tags from PlanePlotter, ADSBexchange.com, Globe-S, adsbScope, EuroScope and FlightAware as inspiration for a suitable format.
The tag should include some basic information such as registration, callsign, altitude and speed.
Source: https://github.com/csbrandt/ads-b-map
Demo: https://csbrandt.github.io/ads-b-map/