I have long wanted to be able to post visual stories where I can show a map of a place with specific pictures. If you go to the “Map View” of iOS Photos, or the “Map” view in Adobe Lightroom Classic, you can see sort of what I was looking for. There are many ways to view geo-tagged photos on a map, but not as many to be able to create a map for sharing.

What I wanted was to be able to tell a visual story, like a hike or travel day, and have it displayed in context. I wanted to be able to place this in a blog (perhaps even here!?). I wanted it to be easy: throw a few geo-tagged photos into a directory, run a script, and get my annotated map and scaled images. I saw there are WordPress plugins that will do this available for purchase, but they all rely on Leaflet or Google Maps and involve a lot of view-time dependencies. Furthermore, I don’t like Google Maps because anyone who views my story would be tracked and analyzed by the evil advertising algorithm.

The WordPress plugins are also more interactive than I need. I don’t necessarily want the ability to zoom, or scroll away from my specified region, or list all of the restaurants within the view.

So, to make a long story short, I’ve started to write the script I want. It’s an ugly PHP script that reads the geographical data from a folder full of JPGs. It uses a free account at MapBox to download map tiles and assembles the background. Then it draws the locations of each photo along with a direction indicator (also extracted from the EXIF data of the photos), ordering them by the time the picture was taken. It scales the images to a web-appropriate size, then it slaps together a primitive web page with the labeled map and just enough Javascript to display the photos in a “lightbox” effect when you click on the location. Once it’s generated, there are no external dependencies and the entire thing fits in about 4 kilobytes (not including the images).

Here’s an example in Ventura, California, and another in Mar Vista, California.

These raw outputs are fine, but if I wanted, the HTML is easy to edit to make more friendly. For example, I could replace the filenames in that right-hand column with descriptions.

There are some interesting challenges. It turns out the coordinates that the iPhone injects into the EXIF data are usually pretty accurate, but when I wandered around a small park and took pictures, in some cases the coordinates were off by a dozen meters or so. The compass direction tends to be more accurate, except in rare cases where it’s completely way the heck off. I don’t know if it’s magnetic interference, the fact that the orientation of the phone changes when one lifts it to take a picture, or what is the cause.

I should probably come up with a better strategy for overlapping photo points. It might be nice to anti-alias the circle that’s drawn. I could also potentially avoid drawing on the map at all, but rather use CSS to draw the locations within the web page. That would allow easier visual customization (at the expense of bigger file sizes and more complexity).

At some point, I should also get over my embarrassment, and open source the code.