Map updates, 2019 - 2020

The 747 in this picture is not really a "proposed museum extension". Personally I would love it if it were but so far there's only one other person around here who supports the idea (and they think the museum should have two airplanes!)

This was originally published on the SFO Museum Mills Field weblog, in January 2020.

We've updated the historical aerial maps section of the Mills Field website to include imagery from 2019. Like 2017 and 2018 this is imagery that goes all the way down to zoom level 20 so the detail is pretty great.

Here's the recently opened observation deck on the G side of the International Terminal:

This imagery was produced during the first half of 2019, before construction on the new hotel or the new Terminal 1 was completed.

We've made some user interface and user experience improvements to the map by moving "controllers" on to the map itself. These include the controls for selecting which year to show and whether to foreground or background that imagery.

These changes allow the map itself to be larger without pushing the controls for changing the map's state to a place where you need to scroll to access them. This is especially important in a mobile context. There are still some improvements to be made for smaller devices but overall these changes represent a big improvement especially for tablet-sized devices.

We've added two new map controls as well: One to display the map in your web browser's fullscreen mode and another to generate a static image of whatever is in the map's viewport.

Technically, the second control has been present since we updated the map in late 2019 but that version was a rough prototype and this version is designed to play nicely with Leaflet (the code that handles drawing the map) so it seems fair to call it "new".

Here's a picture of SFO in 2016 shown in fullscreen mode, along with the output of that view rendered as a static image:

Fullscreen mode on large displays is great fun and fullscreen mode on small displays is incredibly useful since screen space is at a premium. The ability to screenshot the map is also great fun and an incredibly useful tool for focused investigation and capturing details.

All of the heavy-lifting generating static images is handled by Mapbox's leaflet-image and Eli Gray's FileSaver.js JavaScript libraries. We've written a Leaflet.Control handler for quickly adding screenshot functionality to any map like this:

var map = L.map("mapid");

var image_opts = {
	    
    on_success: function(map, canvas) {
		
	var name = "map-1280.png";

	canvas.toBlob(function(blob) {
	    saveAs(blob, name);
	});
    }
    
};
	
var image_control = new L.Control.Image(image_opts);
map.addControl(image_control);

The source code is available from our GitHub account and we'd welcome any feedback or contributions.

To wrap up, here are a couple screenshots of some related work that is both in-progress and hiding in plain sight if you know where to look...