Featuring photography with Mapbox

Making interactive maps to enhance photography metadata on this site.

This project was originally completed and worked on from 2016-03 to 2016-10.

With the goal of learning how the Mapbox GL JavaScript API works, I designed and developed interactive maps for my website to provide more context for my photography. This involved working with a few features of Mapbox GL and Jekyll:

All photos mapped globally

Zoom in or out to see individual photos or clusters by location.

This map appears on the site’s photography index page. The index shows all of the photo posts on the site, but I wanted to design a map to enable browsing by location. I added geographic coordinates for each photo and created a GeoJSON data file that included other metadata like a thumbnail image for previewing the image and a hyperlink to each item.

The map visualizes frequency by clustering points at different zoom levels, uncovering single points when zoomed close enough to distinguish those points. As I add more photos to my archive, the map will show where I have traveled.

Single photos mapped locally

© Mapbox, © OpenStreetMap contributors.

These maps appear on every photo metadata page where single photos are featured and shown in detail. The example shown here represents the location of the photo “Chichester sky”.

example of photo metadata which accompanies individual photos and maps, showing that the camera used is an iPhone and what camera settings were used

Location, photographic metadata, and notes accompany every photo on the site, in addition to interactive maps.

It was surprising to be able to work on this project almost entirely from Mapbox’s documentation without having to look further than MDN’s JavaScript Web API reference for guidance. My only previous experience building with Mapbox had been making a photo map prototype with Mapbox JS a couple of years earlier. I am looking forward to building more interactive maps after this initial exploration.