For years, I’ve been geotagging my photos, preferably while I’m out shooting, but, on occasion, once I get back to the office if I didn’t remember to create a GPS track. I did a write up a few years ago on my workflow and, while it’s changed a bit and I probably should either update that old article or write a new one, the fundamental takeaway is that every photo I take and thus publish has GPS coordinates of where it was shot embedded in its ITPC data.
A few years ago, I started displaying a small map on every photo on 75CentralPhotography of where that photo was taken (barring any “fuzzing” as outlined in my geotagging policy). This has allowed me to share with my readers where I’ve taken every photo I’ve published:
Recently, however, I was thinking idle thoughts and thought “it would be cool if I had a map that showed every photo I’ve ever published’s location”. Apple Photos does something similar with all the photos you’ve taken/imported (assuming you’re an Apple person like myself):
As does Flickr (though it’s kind of janky):
And so does Google Photos (though only on the app and not in the desktop version at photos.google.com):
So, thinking about what I wanted to accomplish (a map with all my photos’ locations), I started considering how I could accomplish this.
I had the essential building blocks to make it happen:
- GPS coordinates for every photo on 75CentralPhotography in the site’s database.
and - A mapping infrastructure already in place with Leaflet.js and the MapBox API.
So the question became “how do I merge these two items together to accomplish my goal?”
After a bit of coding and the addition of the Leaflet.markerCluster add-on, I was able to build a page with a map with clustered markers for every photo:
It’s super-experimental, not very performative and is still in what we in the software business call an “Alpha” state, but it works. You can see a cluster of markers for every general location where photos were taken and you can zoom in to see either smaller clusters or individual photos:
Clicking on a cluster will “spiderfy” it into individual markers:
And clicking a marker will show you the title of the photo:
Finally, clicking the title will open the photo for viewing.
Like I said, it works, but is more of a “proof-of-concept” at this point, but I invite you to take a look at it and explore a bit. You can test it out and explore by clicking the “Photo Map” link up top in the header or by going to 75centralphotography.com/photo-map.
I’ve started building a “product roadmap” for the map going forward that includes these items:
- Better incorporation into the site’s back-end framework
Refined cluster and marker styling- Better load times/performance
Photo thumbnails included in marker
If you have any suggestions for improvements, please let us know at on our contact form.