Andy Woodruff

FlightAware Map Design

As FlightAware, the leading flight tracking and aviation data company, begins to launch some new web designs and features in 2024, a bit of my work is seeing the light of day. One of their new features is a completely rebuilt flight-tracking map, for which I provided some consultation and base map design. You'll start seeing the map on their site and apps, but also if you fly with United or Alaska Airlines!


More airport detail

The old FlightAware map—still the main one on their website at the time that I write this—is a combination of raster map tiles (at distant zooms) and vector tiles (at closer zooms). The new map is entirely vector tiles, and, rather than do this through third-party hosted data and services, they decided to build their own dataset and map to suit their specific needs.

While the map includes a lot of overlays for tracking flights, weather, and more, where I came in was the base map of roads, place names, etc., and perhaps more importantly, airport features. The airport-level view is where a lot of upgrades have been made, with much more detail in both the airport facilities—terminals, gates, roads, and more—and overlaid information about aircraft on the ground and arriving or departing.

Screenshot of Chicago O'Hare airport in FlightAware's old map

O'Hare airport in the old map

Screenshot of Chicago O'Hare airport in FlightAware's new map

O'Hare airport in the new map


Sorting through OpenStreetMap

The map uses Natural Earth data for a few zoom levels, but most of the effort of building this map was working with OpenStreetMap (OSM) data. When crossing a certain zoom threshold, roads and other layers switch from Natural Earth to OpenStreetMap, in some cases with a noticeable difference in detail. I believe the in-progress new version of Natural Earth data is being developed with this kind of transition in mind.

FlightAware pulls in a custom subset of OSM data and processes it in a way that suits the layers and features of this map. The whole thing is based on Apache Baremaps. My role in all that was to provide consultation and advice on what data to use at what zoom level, ways of filtering or combining OSM tags into useful map layers, and other general issues with sorting through OSM data. Joe Polastre, with whom I worked most closely at FlightAware, built everything on the data side as well as scripts to generate style sheets from variables we could define and tweak.

Animation showing FlightAware map slightly zooming in and showing different road detail

The switch from Natural Earth to OSM roads


New vector styles

My job was to come up with those vector tile styles, at first working with a style editor GUI and later with Joe's scripts. It's not a wild redesign, as the overall style of the map is similar to the old map, but the FlightAware designers had some updated colors and requirements. Even so, since this was a totally new map, it still meant creating the style from scratch! The color scheme remains pretty dark and low-contrast, so it was a bit tricky to work with for a legible map, but we did our best to clearly show what's important.

The map design needed to facilitate two main things: general orientation when looking at a flight tracking map (as in, "the plane is over Ohio, heading toward the Great Lakes"), and understanding the surface situation at airports. This is a global map, but it is not a global street map. The map mostly omits detailed information outside of airports, in order to serve its purpose but also to cut way down on file sizes and data transfer so that this whole thing can be packaged into in-flight seatback displays. Notice the difference between O'Hare airport (in images above) and nearby downtown Chicago here.

Screenshot of downtown Chicago with sparse road information in FlightAware's new map

Chicago Loop: only a few main roadways and not much else. This isn't a city map!


The technical details of both the map style and the data processing are a bit dull for this page, but rest assured the project was full of many little interesting—and sometimes frustrating—challenges. OSM is amazing, but as a global project with thousands of contributors, its data can be... quirky.

For now, head to FlightAware's beta airport view to explore the new map, including the flight-tracking overlays which I've barely mentioned here. I'll depart with a series of screenshots below zooming into O'Hare, for a basic taste of the map style at different zoom levels.

Screenshot of FlightAware map showing North America Screenshot of FlightAware map zoomed to the US Midwest Screenshot of FlightAware map zoomed to the Chicago area with O'Hare airport starting to be visible Screenshot of FlightAware map zoomed to O'Hare with runways and some other detail starting to be visible Screenshot of FlightAware map showing a closer view of O'Hare along with icons for aircraft on the ground there Screenshot of FlightAware map showing a close view of O'Hare with buildings visible and labeled Screenshot of FlightAware map showing a closer view of O'Hare with gates labeled