Mapping historic Boston in the Mapbox Studio dataset editor

Yunjie Li
Thu, 25 Aug 2016 09:00:00 -0400

I recently created a historical map of Boston using the new Mapbox Studio dataset editor.

The geographic footprint of Boston has changed drastically over the past several hundred years. Luckily, there are many carefully drawn historical maps that have preserved the various stages of the changing landscape. In this map, I brought those historical coastlines back to life by overlaying them onto an interactive map of present day Boston.

View full-screen demo

Extract the coastlines

To make this map, I first extracted the coastline geometry from the map images. I used maps from 1788 and 1898 from the Harvard Geospatial Library that are georeferenced and in GeoTIFF format. After uploading them as tilesets in Mapbox Studio, I used the maps as reference tilesets in the dataset editor and traced the coastlines by hand.

To highlight the changing coastlines, I did a figure-ground flip to the traced land and island polygons using Turf.js, so the map shows historical waters flowing over streets and places of today.

Use the dataset in a map

Next, I converted my historical coastlines dataset into a tileset using the dataset editor and added them to a custom style in Mapbox Studio. I then added the map legend and slideshow interactivity using Mapbox GL JS.

As a final touch, I chose to highlight two streets in the second slide to tell a stronger story. To do this I went back to the dataset editor to trace the streets, but this time simply copied the GeoJSON object from the editor and pasted it into my JavaScript code.

Try it out

Head to Mapbox Studio to create your own dataset!

Check out our Get started with the Mapbox Studio dataset editor guide. If you make something awesome, be sure to share it with us on Twitter @Mapbox.