I love it when more than one of my hobbies come together in a small, contained project. This time it was biking, photography, urban exploration, and programming. I am not extremely good or talented at any of them, but doing and enjoying lots of different things and being okay at them is a good way to roll. You never know when things will intersect in interesting ways!
I like to get out on my bike or on foot and just explore the city. You see so much more using slow modes of transport than you do driving around. I am particularly interested in observing and documenting how places are changing. Over the years I have developed a bit of a sixth sense for places that will look very different a few years from now. Sometimes, imminent change is obvious:
But often, not so much:
Anyway, I like exploring and documenting the not-so-remarkable places in my city. I created an instagram account to post some of my photos, but I am not on instagram often, and I wanted a way to share photos in a way that I can better control. I wanted a page that has a map showing the locations of the photos I took on during bike ride, that let you click the photo locations to show the photo and perhaps some information about them.
Curiously enough, I did not find a great way to make a page like that. So I took it as an opportunity to hack something together. And a day later, I have something I am happy with! It's called
geotagged-photos-to-webpage takes a directory of photos in jpg format as input:
...and outputs an HTML page with a nice interactive map!
This is one of the hackier things I put together in recent times. The script basically works like this:
- Iterate over a directory of jpg files
- For each file, read EXIF location tags
- Generate a GeoJSON string from all photo locations
- Inject this GeoJSON into a HTML template file
- Save HTML and move images into place
Here's an example map page. Happy with it!