- 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
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”.