Featuring photography with Mapbox
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
© 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”.

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.