Making Vintage Panoramic Maps

The Buffalo News has created a nice interactive map from an 1880 panoramic map of Buffalo, created by E.H. Hutchinson. The Buffalo News interactive version of the map allows you to zoom-in and explore this vintage oblique view of the city in close detail.

The map includes a number of map markers which provide information about some of the landmarks shown on the map and some historical photos of the same landmarks. Each of these information windows also includes a link to a Buffalo News article on the selected location, from the newspaper's weekly series on how the city has changed over the last 138 years.

From 1880 to Today is a Leaflet.js version of a panoramic map from the Library of Congress collection. The Library of Congress owns over 1,500 vintage panoramic maps of towns and cities across the United States. You can create your own interactive map from any of these Library of Congress panoramic maps using the IIIF manifest provided for each map and the Leaflet-IIIF plug-in for Leaflet.js.


Leaflet-IIIF is a simple to use plug-in for creating a Leaflet based browser for IIIF manifests or images shared using the IIIF Image API. Using this plug-in you can make interactive maps from tens of thousands of manuscripts, paintings and other images held by some of the best known global art galleries, museums and universities. And the Library of Congress.

I used the Leaflet-IIIF plug-in to create a Leaflet.js map of another vintage panoramic map from the Library of Congress. This Sherbrooke Panoramic Map shows a 1881 panoramic map of the southern Quebec city. I worked out the latitude and longitude of individual buildings on the map by using the Leaflet-Hash plug-in to create a dynamic URL for the map with the latitude and longitude shown in the URL for what ever is at the center of the map.


You can also create a simple interactive map from any of the Library of Congress vintage panoramic maps using the antirubbersheeter tool. Antirubbersheeter is a new web service which can help you create a Leaflet.js map of any image, with its own co-ordinate system. The problem with using an IIIF manifest as your background map is that you then need to work out how to geocode points on your map if you want to add markers. Antirubbersheeter does all this for you by creating a unique co-ordinate system for your uploaded image.

This means that you can easily use Leaflet.js to make interactive maps from vintage maps, fantasy maps, game world maps or from any image that you want to use. It is really easy to use Antirubbersheeter. Just upload your image. Add a list of places you want to geocode on your image. Antirubbersheeter then allows you to simply click on your image to geocode the list of places where you want to add markers.

When you've finished added locations to your image Antirubbersheeter outputs the JSON of your geocoded locations, providing you with the co-ordinates for each of the places you want to mark on your very own Leaflet.js map.

Antirubbersheeter includes a demo map which you can view to see how this all works in practice. I've also created a slightly simpler demo map which you might find a little easier to work from.