Applied Vitals

adventure : training : racing

Making Interactive Maps For Adventure Tracking

Have you been looking for a way to share your adventure racing routes, data and media through a dynamic online map?  Advances in web-based technology and mapping have made creating and posting interactive maps and data a cinch.

Well actually, not all methods are a cinch.  While some are truly as simple as pushing a button, other mapping methods require bringing together several technologies with a bit of programming and configuration yourself.

The path you choose to starting mapping will depend upon on number of factors like the type and location or your data, presentation features that you need, your technical skill set and tools, and—the often overlooked—availability of personal time to setup and manage your maps going forward.

Also consider if you are attempting to make an interactive map that has stagnant data points created once and then left alone or if you need to pull in live information that is continually updating the map dynamically.

Below are several services and ways to start mapping your adventure race data:

Free and Pay Mapping Services:

Race Tracker delivers a premium mapping and communication service to the adventure sport community. They have a couple services including RacTracker Pro, Team and Event – depending on your need. The high polished brandable design serves the professional, corporate sponsorship and event promotion markets well.

TrackMe360 is an interesting service that mixes GPS equipment rental along with corresponding mapping presentation.  TrackMe360 powered Untamed Adventure‘s recent Untamed Switzerland adventure race. The embed code is provide to plug into your own webpage to display that map and data being served from TrackMe360′s web servers.

UMapper offers both free and paid services to create and manage interactive maps. I use a free UMapper account to build maps and post them on the Applied Vitals blog – this example of adventure race gps data adds markers that contain some information and photos from different points along my race route.  To build this map, I imported the KML file created by my Garmin Forerunner 310xt gps unit and then used UMapper’s user interface to add markers and upload images.  The portable embed code was generated automatically for me to then add to the blog post.  To make things even easier, there is a UMapper plugin for WordPress that allows you to create, embed and manage maps directly from within the WordPress admin. (read more about WordPress, the platform for this adventure racing website)

GeoMarker is an aggregator and filter tool that extracts geographic information from web sources or rss feeds, plots them on a map and produces the code for you to embed within your site.  The output from the free service appears to be a snapshot of the source data rather than an ongoing, self-updating or manageable map.  In the following screenshot, I simply entered Applied Vitals rss feed address, went through the 3 step wizard and had a dynamic map in about 10 seconds, start to finish.

Garmin Connect is a free service to Garmin GPS device owner, of which I am one, that automatically syncs data from a Garmin gps unit to the Garmin web servers.  My Garmin Forerunner 310xt gps unit goes with me everywhere, gathering location data as well as heart rate information.  After each adventure race or training session, I simply sync the data and Garmin Connect posts an activity detail page in my Garmin Connect account and creates a corresponding snippet of code to embed a map widget on my site, showing a summary of the activity.

Wayfaring appears to offer a slick map building tool that allows for the addition of photos and video to your custom interactive map. I actually experienced errors on the website though and was never able to create an account.  Check it out yourself to see if it’s up and running.

Do It Yourself Mapping Tools and Technology:

Map API’s (application programming interface) ( Goolge Maps API , Yahoo Maps API) allows you to begin customizing interactive maps on your own.  The above services that utilize Google, Yahoo and other maps are actually doing the coding for you in the background, while giving you a smooth user interface to simply push buttons and select options to produce the final output code.  If you learn to work with the respective maps API’s directly however, a whole new world of possibility will open up to you.

Using a combination of tools, you can build your own map.

In this following example, I pulled entries from my Google Calendar feed through Yahoo Pipes, to tie in geo tagging services that assign coordinates for each entry and then overlays them on a map.  Yahoo Maps is being used in this example, but any of the mapping services can be used.

Using this same method of aggregating a data feed, filtering, pair geo data and then displaying over a map – you can pull information from multiple sources such as a blog, a calendar and twitter and overlay all the information on a map.

Some considerations here are effectively filtering so that only relevant points and information end up on the maps, as well as where the information links out to.  In the above example, using Google Calendar as the source, links point back to the respective evens on the calendar, which don’t provide any further information than what was already included on the map.

The above scenario creates a poor user experience with useless dead ends.  A solution here would be to remove the links or pull in only a brief summary.  Even better, taking into consideration the data being presented and the intended usefulness to the end user, would be to add more interactivity to effectively display both event location and time line.

This next example by MapsTraction does exactly this by providing a user-controlled slider that filters markers on an interactive map based on time range. An application of this interactive map could be to display upcoming adventure races in a region over a period of time.  Or perhaps to allow users to filter markers representing racer locations over the course of a race.

Another very useful interactive feature is radius filtering.  In this next MapsTraction example, a user-controlled slider filters markers on an interactive map based radium from a center point. This one I love! In planning out my race season, it would be nice to see all the races within driving distance from where I live in Charleston, SC. I’m actually working on creating a version of this map now and will post it live when it’s ready to go.

Interactive Map Examples and Additional Information:

A bit more information on geo location and mapping in this Smashing Magazine article: Entering The Wonderful World of Geo Location

Interactive map by National Geographic on America’s Best Adventures

Before and after composite image overlay to  illustrate destruction in Port-au-Prince following the January 10, 2010 earthquake

Look up latitude and longitude for any US address with Geocoder

Do you have any great interactive map examples from the adventure racing community?  How about tips and tricks for creating your own maps?

Leave your feedback, examples and tips in the comments section below.

Tagged as: , ,

Leave a Response