The map is not the territory, it's a photo

On Monday, in The map is not the territory, it's a painting, I looked at how mapping platforms can be used to provide an interactive interface to explore paintings in fine detail. Of course if you are interested in using mapping platforms to explore pictorial representations you aren't confined to using paintings. You can also create interactive maps from photographs.


Bjørn Sandvik has written a neat Leaflet plugin (code available on GitHub) which allows you to create a Leaflet map from a photo. Showing Zoomify Images with Leaflet explains how you can create map tiles from a photograph using Zoomify.

Using Bjørn's Leaflet plugin all you need to do to create an interactive photo map is Zoomify your photograph and provide the url to the Zoomify image folder. The result is a Leaflet map of your photograph which you can pan and zoom like any other map.

Of course once you have created your map from a photo you can add other interactivity as well. For example you can add map markers or bounding boxes on the mapped photo. A good example of this is the Boston Globe's One Year, One City mapped photograph.


One year after the tragic bomb explosion at the Boston Marathon, The Boston Globe invited survivors, police, firefighters, EMTs, doctors, nurses and runners back to the finish line on Boylston Street to pose for a group photo.

The newspaper then used the Leaflet mapping platform to provide an interactive graphic of survivors of the bombing of the Boston Marathon, using the photo.

The resulting One Year, One City  mapped photo is a powerful testimony to the resilience of the people of Boston. By using the Leaflet mapping platform the Boston Globe has created an interactive photo which you can pan around and in which you can zoom in on individuals in the picture. You can even click on the people in the photo to learn a little more about their experience during last year's tragic events.


If you want to create your own photo map tiles for the Google Maps API you can use Photoshop with Bramus Van Damme's Photoshop Google Maps Tile Cutter Script. With the script you can automatically cut a very large image in Photoshop into tiles which you can immediately use with the Google Maps API.

The script is available for download on Github. There is also an example map on Github (screenshot above) with tiles created using the Photoshop Google Maps Tile Cutter Script.