We recently implemented a new feature on top of BASSTrakk, (provided by B.A.S.S, BASSmaster.com) that maps out the location of all angler’s positions and catches on the lake during a tournament.  The underlying goal of this new feature is to further engage spectators in the sport of bass fishing and provide additional coverage and statistics beyond what can be acquired through typical televised coverage.

Image may be NSFW.
Clik here to view.

To achieve this, we needed a solution that is performant under heavy traffic, provides rich interactivity with the data gathered from the tournament, and is also highly maintainable for future enhancements and adjustments.   The success of this solution would depend on choosing the right map vendor.

Choosing a vendor to fuel pieces of functionality on your site is kind of like marriage.  It is a very difficult decision, and once you say yes, it is often very hard to get out.  While some features are relatively simple to swap out without too much sweat (e.g. traffic tracking services like Google Analytics and Chartbeats), other vendors require a huge game plan if you need to switch over to a competitor.

Map vendors provide their own unique API interface to allow developers to use their map layers and plot markers, labels, shapes and other objects on the page elegantly without too much custom work.  However, the problem I saw with this is that, when it comes time to migrate to another source, you will also have to convert the code you custom-tailored to that vendor, as well, making the transition expensive.  If there’s a chance that the vendor experiences downtime or fails at some point in the future, you’ll be forced to make the transition whether you have the time and resources when it happens.

OpenLayers to the Rescue

Enter OpenLayers, a client-side, open source javascript library with a rich API for displaying maps using various map sources.  This project has been around for over six years, and is still actively maintained to stay compatible with most map vendors, including Mapquest, Yahoo!, Bing, and Google Maps.  In addition to its elegant ability to switch map sources on the fly, it also has a rich set of mapping tools at your disposal.  Since the project is open source and can be easily hosted on your server, it’s also very easy to extend the core code to add your own functionality.

OpenLayers itself does not provide the map tiles.  It is more of an abstraction layer that adds functionality to map tiles.  Regardless of what source you use, you still have to load libraries provided by the map vendors.  Beyond that, there is no need to refer to their API to add markers, lines, objects, and more on the map as such functionality can be developed broadly across all sources within OpenLayers.

 Image may be NSFW.
Clik here to view.

Mapbox for High Traffic Loads and Beautifying Map Tiles

For this project, we decided to use Mapbox (developed by Development Seed) to provide custom-designed maps to the end user, even under heavy traffic.  Some custom development may be done in Mapbox (e.g. removing labels on the map, changing the texture and colors of map objects) within the account. 

However, the major advantage Mapbox has over most other vendors is that it allows developers to design the map however they would like (want to make the water purple?  Remove all lakes and ponds from the map?  Change the font of the labels?).  This can be done using TileMill, an application that lets you design your layers locally.  You can use your creation in TileMill to serve maps within your Mapbox account.

Image may be NSFW.
Clik here to view.

The End Result?

The map was presented to spectators during the BASSmaster Classics, the sport’s biggest event of the year.  Despite competitor’s concerns over the new feature, public engagement in the sport increased dramatically.  The new feature allowed spectators away from the event to locate their star angler’s current location as well as the location of the catches versus their competitors.  This is more coverage than what BASSTrakk previously provided, which was a consolidated count of each angler’s fish count.

Mapbox held up to serving over a million map views every day during the tournament without failure.  That, and the ability to modify the map layers easily during the final stages of the project gave us bandwidth to focus on more important features rather than going through third party documentation and potentially having to contact the map vendors themselves for a solution.  Taking the time to find the right map vendor for our project was well worth

For a demo, be on the lookout for the next major fishing tournament covered by bassmaster.com.