Skip to main content

Cycling the Alps migrates to Cesium

Dennis Wegewijs

This is a guest post by Dennis Wegewijs, creator of Cycling the Alps, who shares his experience moving from the Google Earth plugin to Cesium. - Patrick

After a few days of investigation, I came to the conclusion that I could not quickly develop a replacement for the Google Earth tour myself and settled on using Cesium instead. I made the switch in two stages.

The first stage was to present the start and finish points for all 1,000 climbs. With the Sandcastle code examples and the Getting Started tutorial, I found three amazing resources to help me get started and collect ideas. Without much effort, I was able to present each climb in 3D. I did this by using url query parameters to retrieve the current information from the Cycling the Alps database, and then fly to the starting town.

The next stage was to draw the route connecting the start and end points of the climb, as well as do a fly over. When I used the Google Earth API for the fly over, I generated kmz files that contained the

  • route (Path)
  • start point (Placemark)
  • end point (Placemark)
  • fly over (tour)

The Google Earth API would load the kmz, display the placemarks and path, and allow the user to play the fly over. Since Cesium does not yet support the full KML specification (it is coming soon!), I needed to build something similar. On the demo site, I found Powder Tracks and with help from Greg Beatty in the Cesium forum, I started to learn more about CZML and got deeper into the Cesium API. I built a demo similar to the Powder Tracks feature where the route of a climb is dynamically built up and the camera is attached to the route (Path) so it follows the route similar to a Google Earth fly over. The problem with this approach was that I needed additional information for each climb that I don’t have data for yet. Because of that, I left out the path fly along capability for now.

Since I store information about each route in its own file, the next step was to convert my 2,000 Google Earth kmz files to CZML files. I accomplished this in three steps:

  • Get the path from the kmz that contains the coordinates of the route
  • Retrieve the height of all coordinates
  • Create CZML files where the coordinates contained the height

After that I added everything to the Cycling the Alps website and you can now explore all the climbs. See an example of this cool feature with the world famous Tour de France climb L’Alpe d’Huez.

In the future, I would like to enhance the current feature set with the following:

  • A good camera view at the end of the flight. The camera should look in the direction of the pass (end point) and tilt 45 degrees so the 3D world is shown instead of the 2D starting view that is currently implemented.
  • In the upper left corner, show a dialog with distance, actual grade, actual height, etc.
  • Change the speed of the timer to a more realistic speed that fits to an average cyclist riding up a mountain (10-12 km/h)
  • Start the timer or build up the route as soon as the flight finishes.

I would also like to present real-time updates of the route during cycling events like Tour de France and Giro d'Italia. Here is a first sample of the very hard mountain stage 16 of the Giro d’Italia 2015.

Since Cesium runs on the latest mobile devices, I decided to add this new feature to the mobile website as well.

Feel free to contact me if you have any questions if you would like to implement something similar.

Dennis Wegewijs
Cycling the Alps • Twitter • Facebook • Google+