Building a geo-aware travel blog
Cos every good travel blog needs a map
TL;DR — see the map-centric travel blog at http://www.steveandglo.com or read on for more information on why and how I wrote it
This is my wife Gloria and me somewhere in Washington state. I’m from Australia and she’s from the UK, and we met while backpacking through Canada in 2001. We’ve been travelling together ever since — sometimes for weekends away, occasionally for months at at time.
I’ve always loved taking travel photos, so long before Facebook and Instagram were an option I set up a travel blog on Tumblr to share our travel photos.
Tumblr is very easy to set up and post pictures to, but it doesn’t have a lot of options for customisation.
Last year we had the opportunity to take off 12 months to travel the world with our two girls — one of the perks of being a GIS developer running your own company is that you can negotiate to work remotely.
I wanted to update the old Tumblr blog so I started looking around at other travel blogs for inspiration. I noticed that all of them used a similar approach of an alphabetical listing of places. Even if they were beautifully designed, they all shared the limitation of being text based.
Looking back at my old Tumblr blog, I could see that the information required to make it map-aware was already there, in the form of place names embedded in every post.
So like many fools and optimists before me, I decided to solve the problem myself and write my own geo-aware travel blog. I wanted it to be simple to use, with the map serving as the navigation mechanism, secondary to the posts and the photos.
I chose Ruby On Rails as my development language as I’m a big fan of its inbuilt MVC framework, which makes it easy to write the entire application from the front end to the back end, with the ability to embed JavaScript for custom functionality (required for the interactive maps).
The first task was to geocode the posts, so that each post had a latitude and longitude. For this I used the Rails geocoder gem, which takes in a place-name and returns its coordinates. Using Rails it’s easy to hook this up so that each post is automatically geocoded when its location is initially set, or changed.
After doing this I now had a table containing every blog post, with a title, content, photos and now latitude/longitude.
For the blog itself, I built a standard blog containing a series of posts sorted in reverse chronological order, with a big widescreen photo at the top of each post and the rest of the images displayed below. The usual Previous-Next links are available to navigate between blog posts. Watch an overview of it below:
Because each post knows its location, I was able to include a Leaflet mini-map on each blog post’s page. The map is interactive, so it serves as a secondary (and more intuitive) mechanism for navigating to other blog posts. When opening a new blog post, the mini-map subtly animates to the location, which helps to draw the user’s attention to it.
From the mini-map there is an option to open up a full-sized map. The full-sized map is a natural mechanism for browsing and discovering the blog post locations (far more so than an alphabetical listing of destinations).
The main map and mini-map work by requesting the post location data in JSON format, from the Rails app’s JSON endpoint. This JSON data is built into a standard Leaflet GeoJSON layer, which is in turn fed into a cluster layer. Clicking on a cluster zooms the map to its constituent points, while clicking on a point shows its post thumbnail and gives the option of opening that post’s entry.
Cookies are used to maintain the map’s position each time it opens — the latitude, longitude and zoom level are set each time the map moves, and are used each time the map re-opens.
Conclusions
Geocoding each blog post via the Rails geocoder gem means that the posts can be discovered and visualised via a map interface, which is far more intuitive than an alphabetic listing. This geo-awareness allows the travel blog to be map-centric, with a large map for finding posts and a smaller map showing the context of each blog post. But the maps remain secondary to the main function of the travel blog, which is to display travel memories and photos.
If you like this map-centric travel blog you can view it live at http://steveandglo.com/ and download the source code at https://github.com/slead/travelblog
