Intro

I love researching awesome running and backpacking routes. Years ago, I relied mostly on paper maps to aid my research and planning. In recent years, I’ve started to use 2D virtualization tools like Strava’s route planner and the Gaia GPS app. I’ve seen some cool 3D route visualization tools, specifically from Suunto and relive.cc, and I decided to dive into 3D geospatial visualization tools for myself. I ended up creating a couple libraries in the Go programming language to convert .gpx files to .czml files that can be imported by the free, open-source CesiumJS library for visualization on the earth’s surface.

The Result

Click on one of the buttons (below the visualizer) to load data from one of the races or big epic runs I’ve done! Pretty cool, huh?

Try zooming out, rotating, fast-forwarding, etc… it’s a powerful visualization tool and I’ve only cracked the surface of capabilities here.

The Libraries

I published 3 libraries for use in the Go language, all of which are very hacked-together but functional for what I was trying to accomplish.

• github.com/cconcannon/czml
• github.com/cconcannon/gpx
• github.com/cconcannon/gpx2czml

The Process

I spent hours reading Cesium and XML documentation to understand exactly how these formats communicate geospatial data, then I implemented data structures that reflected the schemas to the best of my understanding.

After I had the data structures, I built on existing xml and json interfaces to interact with .gpx and .czml files, respectively.

There was a lot of trial-and-error. I always find this kind of process easier when there’s a cool visual component involved - in this case it was writing the data first to a Polyline, and then to an animated Path, for visualization.

MVP

A minimal working command-line implementation that uses the libraries above is here (it’s also what I used for local development of the libraries).

In a nutshell, the process is:

• parse a .gpx file, which is an .xml file, according to the .gpx schema definition
• translate the available data to a format that is meaningful for the Cesium ecosystem
• write the transformed data to .czml (which is .json)
• use the CesiumJS library to import and visualize the .czml data

Summary

This was a super fun personal hacking project. The libraries I wrote are untested and probably buggy, but I really enjoyed this little project and I hope someone else out there thinks it’s cool. I released my libraries under the MIT license so anyone out there can use my code for free for any purpose, should they find it valuable.

Thanks for reading!