Saturday, January 24, 2015

How to Create Interactive Vintage Maps

Today I was going to sit down and write a tutorial on how I created the New York Vintage Map using Leaflet.js and old historical map tiles from the New York Public Library. However I saved myself a couple of hours of work when I came across this excellent tutorial From Paper Maps to the Web on the library's own NYPL Labs site.

The tutorial is a step-by-step guide explaining how to create an interactive map from one of the New York Public Library's vintage maps using Leaflet.js. Before looking at the tutorial have a look at the finished map, Mapa. The map is a 1891 map of Bogotá, Colombia overlaid with pop-ups containing information about some of the city's prominent politicians at the time (mapped to their home addresses).

The NYPL tutorial was written by Mauricio Giraldo Arteaga. By some strange coincidence Mauricio has also been playing around with some of the same vintage maps of Lower Manhattan which I used in my New York Vintages Maps collection.

His ScrollNYC is a visualization of vintage New York city maps from 1660 through to 1921. Each of the historical maps has been overlaid on top of a static Mapbox modern map of New York. As you scroll down the page each static map is replaced by an older map in reverse chronological order.