April 18th, 2011 by Josh

Meet The Ghostly Map

We recently contacted Ghostly International about creating a clean visualisation related to their artists tour date schedules. What originally started as a side project ended up getting deployed to their live site a couple of weeks later. Now that the dusts settled we thought we'd talk briefly about the project.

The application itself is a simple Rails 3 application. It's deployed on Heroku and pulls its data from an API provided by Ghostly. To keep API caching outside of the request cycle dates are refreshed every day using a Rake task scheduled using Cron.

To ensure the application remains snappy under load we also cache artist and tour data in memory. Should we ever need to alter this strategy we can easily swap it out for Memcached or something more heavy weight thanks to Rails' cache store API.

The client is a simple Javascript application powered by jQuery. If we were to build the application again we would go with something like Backbone or Spine for a little more structure. This became evident as development progressed as a lot of the logic revolved around the actual data, and was not particularly bound to the DOM.

All of the dynamic views (such as the artist information panel) are built from Underscore Templates and are compiled when required by the application. Keeping all of the data local helped make everything more responsive, and although there are obvious costs involved (when the application initially loads) we think it's a good cost to pay considering the performance thereafter.

Artist tour dates are plotted on the map by the latitude and longitude of the venue. This is figured out using a logging function powered by GeoKit. We use a couple of attributes from a date listing to attempt to locate the venue, falling back to a rough approximation if the exact location of the tour date cannot be found.

Of course, all this wouldn't be possible without Google's excellent Maps API, which does the heavy lifting when rendering, plotting and tweening tour date locations on the map.

To make the interface even more useful we allowed filtering of artist performances by passing in a URL parameter. This would find the nearest tour date for a given artist (disregarding previously played dates). This allowed each artist to be linked to from the artists page on the Ghostly site.

Although the application should work fine in any browser we payed particular attention to Webkit based browsers, especially Mobile Safari. The application renders beautifully on an iPad, and we're looking at optimising it for iPhone in future releases. There's plenty of room for optimisation though, the first of which would be looking at using something like Local Storage to actually cache the tour dates entirely on the client.

This is the first of many side projects we're hoping to release in the coming months. There's tonnes of new technology we want to get our hands on, and with new API's coming out all the time we're definitely not short of ideas.