Plot Multiple Activities from Garmin Connect on a Single Map

For many months, I have been attempting to figure out how to go about plotting multiple activities on a single map. An activity to me is a run – I run a fair bit, and the lengths of the runs that I do tend to range from 6 miles up to 18 miles. I live in Edinburgh, and aside from three races I’ve run outside of the city, all of my training runs take place in the city itself, generally starting from and finishing near my house.

What I wanted to do is to plot on a single Google Map every run I’ve done. I use a Garmin Forerunner 405, and I’ve recently purchased a Garmin Forerunner 910xt, and I use the standard Garmin Connect utility which stores all of my training runs. This therefore means I can see each run on Garmin Connect and see the plot of where I’ve been. One run at a time.

But I want them all on one map.

I had tried for many months to figure out how to plot these runs on Google Maps, and it turns out I was always searching for the wrong thing. Rather than bore you with where I went wrong, I’ll tell you how I did it. And it was pretty easy (isn’t everything easy when you know how?).

Ultimately, you want to plot multiple polylines on a single map. Each polyline is a single activity, so in my case, each polyline was a single run.

[ edit: I’ve since created a web application which means you can now get this functionality without having to run any scripts on your own computer – more on that at the end of the article… this next bit is therefore fairly redundant if you use the web app ]

The runs I exported as TCX files from Garmin Connect. Now, I had 139 runs to export, so that took a few minutes, but not the end of the world.

I’ll explain how to go about creating your map, but first, here’s mine:

You’ll need to have vaguely capable HTML skills, and a basic knowledge of Javascript; you might get away with zero knowledge of Javascript I suppose, but it wouldn’t hurt to have the most basic knowledge if you’re going to try this.

What you therefore need to do is create a single page with a <div>, so if you look at my page, you can see down the bottom, I have one with an id of ‘map_canvas’. The body tag calls the initialize() Javascript method, and you can find that in js/std.js. If you take a look at that file, it creates three variables; myLatLng just creates a point which will be used as the centre of the map, myOptions tells it the zoom level to start with (the higher the number, the more zoomed in it is) and the map type (TERRAIN and ROADMAP are the most useful, afaiac), and then the map variable creates the Map object. Nothing too difficult there.

Next, there are dozens of calls to methods which each pass in the map variable. These methods, such as initialize_46521721(), are held in separate files. They don’t need to be, but I found it easier to do this as I had a basic Perl script which transformed the TCX files into Javascript files; more on that later. If you take a look at js/46521721.js, you will see the function initialize_46521721() and all that each of these files are doing is creating an array of coords with each latitude/longitude point, which came from the TCX files. In other words, the TCX file shows all of the GPS points that I ran along, and I’m just creating a line (a polyline) from these GPS points. If you look down the very bottom of the js/46521721.js file, you’ll see a flightPath variable being created and a call to setMap(); these bits are the same in every single initialize_123() type method.

That’s actually all there is to it. You just need to make sure that your HTML page contains references to each of these Javascript files, that your Javascript files exist in the format I’ve mentioned, that you have the std.js file which has the main initialize() method which calls all of the other initialize_123() methods, and it’ll display fine. Clearly, you want to set the centre of your map to wherever is more sensible for you – I doubt you live in Edinburgh.

All that’s left is to convert your TCX files to the Javascript. To do that, I wrote a bunch of Perl scripts to convert the TCX files and automatically generate the HTML. However, I figure you might not want to do that and instead just want some way of converting your TCX files to the Javascript such as what I did, so I stripped that bit out of my set of scripts and it’s available as a simple webapp here:

All you do is upload your TCX files one at a time and it’ll generate your Javascript scripts for you. That just leaves you needing to create your std.js and HTML page.

Hope this helps someone…

[ edit – and here’s the info about the web application ]

So I ended up deciding to create a web application, mainly to make it easier for me to upload new activities without having to re-run the scripts on my machine. This web application is also built so anyone can use it and see their own multiple activities on their own map. It’s not finished yet, but it does work and I’ll be continuing to make updates to it regularly until it reaches a point of being fully functional, configurable and looks vaguely half decent. The web app is here:

It’s free, your password is stored securely (SHA1 hashed, if you’re interested) and I won’t send you spam or sell your email to anyone, honest.

2 thoughts on “Plot Multiple Activities from Garmin Connect on a Single Map

  1. This is exactly what i was looking for. Great work! However, when I tried to use your cgi script it failed… I want to use it for bike rides, which would have more waypoints i guess, hope that does not cause the issue (time-out?).

    if you have a clue… :-)

  2. Hi, yeah, if it is a long bike ride it probably wouldn’t work, but I have since found why. However, what I have been doing the last few days is writing a web application so you can do it all online. It’s still a work in progress, but I will send you a link so you can try it out. That one doesn’t time out on large activities ;)

Leave a Reply