14

Well, this project was a memorable one, mainly because I started to really use casalib’s library. I was able to leverage casalib’s casasprite and a few other features. Loading data is a breeze, and the distribution class is awesome, really saves a ton of time.

As for the project itself, Versus wanted to create some ‘feel’ behind their TourDeFrance push that year and so it became a test project to create an interactive map. Main focus to just deliver additional information for each route and let the actual event become the content. The only tricky part I came up with was allowing the detail screen to position itself over the area of the map that is chosen. So….if you chose route 4, the detail screen would give you the additional data for route 4 but also visually show you the route.

We planned that if this project went over well, we would revisit the idea next year. So that being said, I’m currently working on the 2010 version. Always a pure joy to do work and have your client return for more. It’s always great working with the Versus.com team and hope to continue for a long time. Some screenshots below and a demo link to follow.

Once the interactive tour map went live, a feature went live on the homepage:

Standard view of the map. This image shows the map with stage 5 as the current stage. You can see the routes in their proper state (past, current, future)

I just really liked this logo (I had nothing to do with it’s design but I fought to keep it in the map). It ended up not making the final version but  I thought it had style. Kudos to whoever created it.

tour logo that was never used

This view is how the application would display if a user selected a stage route. The detail view takes over the entire page and shows more detailed information on the stage’s city, anything interesting about the stage route, and an image for the route. I was able to leverage some nice casalib utils in this view. For example the stage number count, each number is active and pressing it would show that stage’s information. To add the listeners to each number was all taken care of by creating a casaLib distribution object.

Here’s a link to a live demo