Fly Through Your Strava Activities, Routes and Segments With Cesium “Earth” View

For a long time VeloViewer has had the option to export your activities as a KML file to then view in Google Earth but I always wanted to get the equivalent features embedded within the site. A recent discovery of the Cesium JavaScript library has made this possible and has opened the door to all kinds of interesting possibilities. Piloted recently on the Route Details page I’ve now rolled out this new “Earth” view to your activities and segments.

First up, check out a video of a fly-through of one of my all-time favourite rides riding the old Fred Whitton course a few years back taking in the best of the UK’s Lake District National Park:

This is recorded in real-time having run the fly-through once before in order to allow the browser to pre-download the map and elevation data.

Earth tab available on Activities, Segments & Routes

On each of the details pages for your Activities, Segments and Routes you will now see an “Earth” tab that loads up the view.  In Activities and Routes you can zoom in to a section of the course using the top profile to view just that section as you’d expect.

Using the shift and control keys while clicking and dragging along with scrolling will navigate you around.

The profile and flight controls

In the top left corner you’ll find a set of drop downs and sliders that control the options for the profile view and the fly-through. Hover your mouse over any of them for a tooltip.

Top row – the profile controls:

  • “Extended” or “Surface” view of the track. The Extended view is the one you’ll have seen in all of the examples and is identical to the original VeloViewer 3D profile but set into the 3D earth.  The Surface view is drawn onto the earth’s surface but then doesn’t accurately represent the elevation/gradients as the earth’s 3D model isn’t very detailed once you zoom in close (but still very impressive to say the least).
  • x0 – x5.  This is an option to vertically stretch the terrain of the earth.
  • Slider 1 – profile vertical offset.  When using the Extended view, this raises or drops the top line of the entire profile.  This is mainly to allow you to reveal sections of the course which become hidden by the parts of the earth that stick up higher than they should.
  • Slider 2 – Elevation multiplier. This adds an additional amount to the height of the profile based on the elevation at that point.  Best to have it all the way down if doing a fly-through but if zoomed out it is often nice to raise this multiplier to make the profile stand out from the earth.

2nd row – the flight controls:

  • Duration of flight.
  • Distance of camera from profile.
  • Angle of camera. If in big Alpine ranges it is sometimes best to increase the camera angle, especially if the camera distance is 4km or more.
  • Fly button.

Cesium doesn’t provide an built-in fly-through so playing around with this has been the most interesting/complex part of using this control. Often the camera bumps into mountains which is fairly unavoidable but usually if you play around with the options you can get a good flight.  One of the things I like best about the flight is that the camera looks up when the profile climbs and then back down the other side for the descents. Simple pleasures 🙂

I also change the complexity of the flight path based on the flight duration and length of the course to try and find a happy balance between a smooth flight and viewing as much of the course as possible.  If you’re flying through a century ride then probably best to push the camera distance up to 4km so you don’t miss any pointy bits!

A few more examples

The classic Alpe d’Huez:

Passo Stelvio:

Creating Videos

As you may have seen I’ve been creating videos for stages from La Vuelta which have been shared by Team Sky and I’ve had numerous questions asking how this is done.  There is no automated way to create a video and I’m not looking to implement one so what you need to do is use a screen capture tool to grab the screen whilst running a fly-through.

My main computer these days is an iMac so I’ve been using Quicktime (which comes pre-installed for free) to do the screen capture.  There will be various free and paid tools on Windows that do the same thing, I’ve used Camtasia and also Microsoft’s free Expression Encoder in the past.

Background

I first looked into creating a fly-through using Google Earth back in 2014 with a video of stage 1 of the Tour de France in Yorkshire. I attempted to create one for stage 2 as well and just couldn’t get the Google Earth tour to follow the course in a way that was any good.

Jumping forward to the beginning of 2016 and I had the request for the same thing from Team Sky DS Dario Cioni to be able to fly through the stages for their races. Having already struggled with trying to do this nicely in Google Earth I have been keeping my out since for a suitable browser based solution.  Cesium ticks the box and although I’ve had to code up the fly-through myself at least it has given me the opportunity to keep complete control of the camera’s flight despite it nearly melting my brain trying to make it work consistently well for any possible course!

0 thoughts on “Fly Through Your Strava Activities, Routes and Segments With Cesium “Earth” View

Leave a Reply to onelegmatt Cancel 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>