Back in July I had my first experience with bookmarklets when playing with Marc Durdin’s excellent bit of code that provides his funky elevation profiles for Activities and Segments right there, in amongst Strava’s own page contents. I might have been a bit naive but I just didn’t realise that this thing was so easy to do, so time for a quick play and see what I could come up with. First off I wanted to get an interactive 3D view of the new Strava Routes, the other thing that sprung to mind was to see if I could swap out the Google Maps view for the more detailed (at least here in the UK) Open Street/Cycle Maps which I’ll go into in my next blog post.
Update: unfortunately this approach to getting data for the 3D viewer is remarkably unstable due to the ever changing code at each of the sites mentioned above. Currently I think all of the sites listed have changed their code sufficiently for my code to no longer work and I’m not going to attempt to maintain it. Instead I’ve added a GPX import option on the 3D routes page but it does rely on the GPX file including elevation data. The GPX export from Strava doesn’t so that won’t work so the best site I’ve found so far to create your GPX files is Ride With GPS. The elevation data isn’t the best though so don’t expect very good profiles (Garmin Connect appears to have the best elevation data right now but there is no GPX export!). Of course if you’ve ridden the route then just view your activity on VeloViewer and you’ll see a 3D view there.
Update: Now working for Strava, Garmin Connect, Ride With GPS and Bike Route Toaster!
3D Routes, Activities and Segments
For a while now you have been able to view 3D elevation profiles for any segment on my Segment Details page (e.g. Alpe d’Huez). Clicking on the 3D tab shows you a colourful graphic depicting the segment in all its glory. Not only that but you can click (or touch) and spin the thing round and tilt it to find the best view.
Now that I had the code to create the 3D view all I needed was to get my hands on the data for the new Starva Routes. I’m guessing the API to provide this data will be a long way off but inspired by Mr Durdin I set about seeing if I could grab the data right out of the Strava page and pass it across to my code – and sure enough you can! Not only that but it was only a minor tweak to get the data for activities (now including runs) as well. Now these can be anyone’s activities or routes, as long as you can see the details for it in Strava then you can use this 3D view. Here’s one of Laurens ten Dam from this year’s Tour:
How to do it
Just visit the 3D Route/Activity Viewer page and follow the instructions. It has been simplified since the first incarnation in that you no longer need to allow for popups. Also more detailed, browser specific instructions are given to walk you through setting up your bookmark. Once you’ve got that bookmark set up it is as simple as navigating to the Strava, Garmin Connect, Ride With GPS or Bike Route Toaster page of your choice and clicking your bookmark.
The code also works on iPhone and iPads now although the process of setting up your bookmark is a little more involved (once again, full instructions are given).
If you are viewing a segment on Strava (segment details page, not a activity’s segment effort) then the same bookmark will navigate you to the VeloViewer segment details page where you can view the 3D view along with all the other details.
Douglas_Kubler says:
Very nice. One glitch – with Chrome the profile is laid out from right to left instead of left to right as on Strava. The direction of movement is correct as determined by the color shading. A simple rotation brings the profile in line with Strava. (Laurens Ten Dam’s profile)
Ben says:
By default the 3D view will always start off being viewed from the South (at least it should!) no matter what the direction of travel is. Whenever I create a image of a profile I’ll always spin it round until it looks its best which could be from any direction really. I’ll add a little arrow to one corner of the grid to show which way is North to take the guesswork out of it.
Ant says:
Really enjoying the bookmarklet 🙂
Have you considered placing map tile on the xy plane? Not sure if there would be scaling/alignment issues, but would be interesting to see the map underneath and the elevation in 3D.
Ben says:
I have and it nearly melted my brain trying to get it to work. You can’t add perspective to images in the same control as the 3D view so I was trying to underlay the 3D view with a CSS perspectived map image and it was impossible to get it to line up given that everything is dynamic in size.
Jessica Hamilton says:
Couldn’t you use the tiles as textures on rectangles like you do the grid in the 3D view?
Ben says:
From what I’ve read you can’t apply perspective or distort images in SVG. The Grid is just lots of Paths, although you can use images to fill a path you can’t apply the perspective so it would only work if viewed directly from above.
More than happy to be told otherwise if you can work up a jfFiddle showing how it could be done.
Jessica Hamilton says:
Oh, the entire thing is SVG? Ah, I thought it was WebGL… that’s different again then 🙂
Jessica Hamilton says:
https://gist.github.com/jessicah/6547998 here’s an example of skewing an image 🙂 Have tested in IE & Chrome, and works okay. Couldn’t see how to do SVG on jsFiddle =/
Ben says:
Thanks for that. I think perspective is required rather than skewing as the image needs to narrow as it nears the top, and over both dimensions when rotated. It looks like the definitions around perspective wrt SVG are still ongoing – http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/#perspective-definitions
Jessica Hamilton says:
Oh I see what you mean. That’s unfortunate. Guess that’s where WebGL might’ve been an advantage… am amazed at how far SVG support has come.
Karl says:
Is there a size limit to activities? I don’t think I have any privacy zones but one of my rides appears to be truncated. http://www.strava.com/activities/90187544 and http://veloviewer.com/route/3347
Ben says:
Not on purpose! I’ll have a look into it.
Karl says:
Cheers. Fun tool!
Richard van der Veldt says:
#Awesome feature… Kudo’s!!
ilker says:
the 3d lins has broken
Ben says:
I’ve added an update above to explain the current situation with this feature.