One day awhile back, I saw someone post on Twitter that they had created an interactive travel log that combined a regular blog-style overview of a number of trips with a map that automatically flew to and then zoomed in on the place the person was writing about. It looked pretty cool, and the person who created it — Lauren Hallden, a product designer with Stitch — made the code open-source by putting it on Github. So since I’ve been playing around on a test server I have, I decided to see if I could replicate what she did, and I think I’ve gotten it working pretty well. I liked it so much I created a second one focused solely on our trips to Italy, including our time in Turin, Venice, Cinque Terre and the Amalfi Coast: Travelog: Italy.
In a nutshell, it uses a relatively small amount of CSS and JavaScript, combined with a map API from MapBox, which is free to use as long as you don’t make a lot of calls to the database. Lauren did a really good job of marking up the code and explaining it on Github, so it’s obvious where to input your API key, where and how to add the GPS co-ordinates (naturally, Google’s GPS co-ordinates are the opposite of the way that MapBox does it, so that takes some manual editing) and where to put your images. I had an issue with permissions on my pics, but once I got that sorted out it was dead easy to put together and I think it looks pretty cool.
Best part of doing this was it forced me to go back through all of my photos from our various trips last year, and that reminded me of how many amazing places we had been and how much fun it all was. I’m thinking I might make other travel logs for individual trips. Thanks for doing this, Lauren, and for allowing others to re-use your code.
