When I worked for Millenium Project at the University of Michigan, one of my assignments was building this map viewer. Anne Duderstadt (who has produced a considerable amount of research on the history of Ann Arbor and of the university) found these fascinating old maps hidden away in the library, and did the hard work of identifying and documenting all the buildings of interest. My role was to make a UI which could handle these very large map files and let users explore the historical building data.
Naturally I reached for Leaflet as a foundation for the UI. Just like its use for OpenStreetMap, it makes sense to split these large maps into tiles with various zoom levels, so the browser doesn’t have to download and render the entire image at once. Leaflet also works nicely on tablets, which was another goal of the project.
The interesting part was handling the building data. I wanted to make it easy for Anne to add data to the map, and I also wanted to avoid any special software on the server (for ease of deployment.)1 The Sheetrock library provided a very practical (if unconventional) solution: the map loads buildings from a Google Sheet. Although not perfectly user-friendly, it’s a familiar interface for entering names and years and URLs, and batch edits are straightforward. The building shapes have to be drawn in the map viewer2, which then produces a string of data to be copied back into the Google Sheet. After a small learning curve, this process worked quite smoothly.
As a compromise between showing click targets and letting users admire the maps, the highlighted building shapes appear when the map is scrolled, then quickly fade. It might’ve made sense to show them on any mouse movement, but this approach lets desktop and mobile behave identically.