Featuring photography with Mapbox

Making interactive maps to enhance photography metadata on this site.

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

view it live view project source

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:

Designing a visual style to match my site’s color palette in Mapbox Studio.
Fundamental Mapbox GL JS features like configuring and rendering a map, styling markers, and drawing points from GeoJSON data.
Controlling map interactivity like scrolling behavior, flying interactions, popups, and cursor styles.
Visualizing map points as clusters.
Generating GeoJSON data from Jekyll collections and page metadata.

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

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.