GPSing The Music City Bikeway!

I recently took the opportunity to ride my bike down to the Music City Bikeway! I was honestly expecting not many people to be down there, but it’s so awesome to see greenspaces being used in this car driven city.

I actually didn’t feel like I was in the states or even a city at all. Starting off the trail at Shelby Bottoms I almost made all the way to Opryland and isn’t it refreshing that you can ride a bike that far in this city? That is for anyone who doesn’t know quite far!

The pedestrian bridge over The Cumberland River heading towards Opry Mills was pretty epic and full of cyclists too! Of course getting there on the bike without an SUV proved a little challenging but I was able to explore our neighborhood. Passing by Five Points and also the Eastland area.


It seriously doesn’t feel like a city, let alone an automotive driven American City down there. It’s pretty much like a greenway in England too!

Well you might not think you were in America until you came across the epic railroad bridges!

Well you might not think you were in America until you came across the epic railroad and pedestrian bridges!


Animated Maps!

In the previous map based post, The Nashville Zoo I had mentioned it should be relatively easy to animate the SVG. Well it is and it isn’t. Ha! … It’s all about the type of data in the SVG.

Well I eventually got the animation working by injecting the inline CSS to do the animation via PHP. Here is the stunning result of all that hacking! Only the right hand part of the map is the actual bikeway, I had to cycle there and back too! IF for whatever reason you’re not seeing this awesomeness, here is a direct link to the SVG animation script.

Ok and here is how I hacked this together!

Because this bike ride was mapped using My Tracks (Google Play Link), I was able to get my GPS dump into KMZ files off Google Drive. For whatever reason My Tracks ended up doing three split recordings of the journey … but it actually produced a really cool effect. Following this article (How SVG Line Animation Works) on CSS tricks I found paths are great for animating! But the GPS Visualizer website I normally use to make the SVG, gave me an SVG without paths, it was a series of one pixel lines that were basically dots with pixel co-ordinates.

I somehow had to get an SVG with paths in it and the Indie Mapper App let me do exactly that, albeit after converting the KMZ dump from Google Drive via GPS Visualizer into a GPX file that Indie Mapper could read.

It is doable and there may be different ways to craft this art, but I’m pretty happy with the animation I came out with. After playing with My Tracks for a little while, I think I’ll go back to Endomondo as it is a fully featured fitness app designed for this type of thing.

Why ‘GPS Art’?

Because GPS-Art it is a lot of effort for a pretty simple result you might wonder, well why do this? Well it’s cool, it looks cool and you don’t have to include highly personal data such as where you were on a given day. I also got to learn a lot that could be useful to a future project. Mostly it’s just darn cool! I’m pretty pumped about being able to animate this stuff now, that just takes it to another level!

My GPS art hacking initially got kicked off back in 2011 in this post – Cycling GPS when I merged quite a lot of data to see what a map of my movements around Walsall Town Center would look like as an art project.

That very first GPS art which combined cycling and walking collected from Endomondo had to be drawn with pencil thin lines because of the amount of repetitive data being displayed. It was very laborious and I didn’t know how it would turn out! The online tools for joe public to take geographic data and plot it in an image that can fit into a browser window or be printed onto a poster really was just getting started back then.

These images of America’s GPS traces are stunning. Or you know you could draw penises everywhere if that’s what you wanted to do, many have!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>