Update May 2014: As Strava’s ride pages have changed format significantly, Giro-Your-Strava no longer works. The good news is that Mesmeride does rides — but unfortunately not routes as yet.
After a comment from Mike on my previous Giro-Your-Strava post asking if the bookmarklet could support Strava’s new Routes feature, I took a few minutes over breakfast to spelunk and found it wouldn’t be too hard.
Firebug’s DOM explorer actually made the task much, much simpler. My approach was simply to look for Great Big Arrays Of Numbers. I soon found, amongst all the Google, jQuery, Modernizr, Optimizely and other objects, a pageView object, which contained a number of juicy functions, including pageView.chartContext().dataContext().elevationStream()
and pageView.pageContext().routeSegments()
, which gave me all the information I needed. The data structures for routes are somewhat different to those for rides, so I opted to massage the Great Big Arrays those functions returned into the same basic structure as the ride data already used by the bookmarklet, rather than touch the rendering code at all.
So… after that overly detailed introduction, here ’tis. I’ve updated the bookmarklet to draw Giro-style elevation profiles for Strava Routes as well as for Rides. And of course, Le Tour-style elevation profiles for segments still work, within individual ride pages.
Note: this still won’t work in IE10, as Github returns the wrong Content-Type for the Javascript and IE gets a little panicky about it, and, well, just use a different browser.
1. Install the bookmarklet.
Here’s the bookmarklet. Just drag it to your Bookmarks toolbar to install it:
2. Load a favourite Strava Route and click the bookmark.
(It’s best to wait for the page to load completely before clicking the bookmark.)
Here’s one of my favourite Strava Routes — Hobart 10,000 Day 1:
After a few seconds the gradient graphic may refresh with the correct font — this takes a second or two to download.
That’s it! This new bookmarklet still works with rides (so delete the old one!)
The source is still all on GitHub. Again, if you improve the code, or accidentally hurt yourself while reading it, please do share with a comment on this post.
And as DC Rainmaker says, thanks for reading!