Interactive maps of SFO from 1930 to 2021 (and beyond) at the T2 SkyTerrace

This is a blog post by aaron cope that was published on November 19, 2021 . It was tagged maps and skyterrace.

The recently opened Mills Field and the San Francisco Airport exhibition in the SkyTerrace observation deck in Terminal 2 includes an interactive map installation that allows visitors to view the history of SFO by browsing over three dozen aerial maps from 1930 to 2021. Orginally designed as a touch-based interactive application, designed to work entirely offline, it was updated earlier this year to allow visitors to control the map using their personal mobile devices. The installation displays a QR code that a visitor can scan which will launch a “controller” application that relays instructions from their mobile device to the application running in the SkyTerrace. After 5 minutes a new QR code will be displayed allowing another visitor to browse the map collection.

All of this builds on work the Museum has been doing, since 2018, to make these maps available online on the Mills Field website. These maps reflect the growth and changes at the airport over the years and decades and you can see them online at: https://millsfield.sfomuseum.org/map/

There are maps available from 1930 to 2021 drawing on the Museum’s own collection, the Special Collections Library at the University of California Santa Barbara and the airport’s GIS department.

Our goal is to have aerial map imagery for every year since the airport’s inception. We haven’t quite gotten there yet but there is at least one map for every decade since the airport opened (and year-over-year maps since 2012).

The interactive map allows visitors to change the viewport to see the airport relative to the greater Bay Area and to hide or show the present-day airport’s footprint to better understand the scale and velocity of changes that have been made to the airport campus.

Every part of the SFO terminal complex, with the exception of the pre-security common area in Terminal 2, has changed since 1954. In 1997 there were cars driving through what is now the International Terminal.

The more recent maps, from 2015 onwards, are so detailed that you can get up close to individual planes as they taxi out to the runways.

In 2020, because of COVID-19, there was a little less taxi-ing than usual.

This is what the first version of the SkyTerrace interactive looked like. As mentioned the installation was originally designed as a touch-based interactive using an iPad attached to an external monitor. Under the hood it’s a simple web application wrapped in a native iOS application. In a blog post I wrote about making some of that work available as open-source software I said:

Our goal is to treat this as a fast, cheap and reusable template for building interactive installations. I am fond of telling people that we have developed a system for interactive displays with minimal hardware and stable costs, that work both online and offline, and that we can deploy to any four-by-four foot space at the airport. The only question should be: What do we want the next interactive to do?

We haven’t yet made any of the tools that allow the map to be controlled from a visitor’s mobile device available as open-source software but we hope to soon.

What follows are images and screenshots documenting the earliest prototypes to the installation now on view in Terminal 2. This is the very first iteration of the application showing some early ideas for design elements. In these early versions of the application the QR code would link to the same map on the Mills Field website allowing a visitor to share a link to the map they were browsing in the SkyTerrace.

In this version you can see the outlines of the final interface. You can also see that the display on the iPad is simply being mirrored to the external display. The decision to prevent this from happening, to have a single application with multiple screens each showing different content, is one reason we would eventually settle on developing a native iOS application that wraps a simple web application.

The first versions of the application also used a very detailed, but ultimately distracting, cartography to depict the present day airport and surrounding Bay Area.

Once the decision was made to refactor the touch-based application in to something could be controlled remotely I also took the opportunity to revisit the cartographic elements that frame the historical maps. To start, the detailed road networks of the San Francisco Bay Area were de-emphasized in favour of the Bay itself.

A similar approach was taken with the airport campus itself focusing only on those features of the airport that passengers are likely to interact with when flying in and out of SFO. We are grateful for the help and assistance that the airport’s GIS department provided in making these data available enabling us to develop systems that will track changes to the airport’s physical footprint over time.

The switch to a network-enabled application with multiple users necessitated a lot of juggling of different states and ensuring relevant feedback for different scenarios. Here’s an example of a message that a passenger would see if their interactive session has expired and someone else’s device is now controlling the map.

This image shows the design and interaction elements starting to settle in to what’s on display today, as well as a hint of the volume of debugging information the application produces off to the side.

This is a screenshot of the mobile “controller” application which is designed to mirror, as much as possible, the interactive itself. Here you can see that stripes used to represent the San Francisco Bay have been replaced by a solid colour and some outstanding layout issues for creditlines displayed on a mobile device.

The geometry for the San Francisco Bay coastline was sourced from the OpenStreetMap project and required a little extra GIS processing to line up with the airport’s own geometry for the airport campus.

Many of the aerial maps needed to be “georectified” to match the map projection used by web-based applications. This is done by making a table of latitude and longitude coordinates in a target projection that correspond with x and y pixel coordinates in a source image. These are the red dots in the image above. Once that mapping has been done it can be used to warp the source image. It doesn’t always work especially for images taken at an angle, as you can see here.

Here’s another example of aerial imagery from 1930 where the North-South axis of the airport is displayed right to left rather than top to bottom. Because the photographs were taken from an airplane flying directly overhead the warping operation is much more successful.

This is what it looks like, after being warped, with aerial imagery from 2020 overlayed. This map is now on view in the SkyTerrace.

The installation will be continuously updated as new maps become available. Earlier this month we added aerial imagery of the airport from August, 2021 and if you look closely you can see the repairs to runway 28R underway. The SkyTerrace observation deck in Terminal 2 is open to the general public from 10AM to 6PM Thursday through Friday and we hope that you are able to stop by for a visit!

As mentioned all of the work for the Sky Terrace interactive builds on a work the Museum has been doing around historical maps since 2018. If you’d like to read more these blog posts (sometimes highly technical) describe some of that work: