Skip to main content

Outdooractive Using CesiumJS to Show Trails in 3D

Sarah Chow

More than 14 million registered users come to Outdooractive to share trails for hiking, cycling, mountain biking, and winter sports. The app, which is used by both outdoor enthusiasts and professionals in the tourism industry, boasts hundreds of thousands of routes, which Pro users can explore over high quality 3D terrain in CesiumJS. 

Cycling route near Alba, Italy, from Outdooractive shown in CesiumJS

The 3D view of a route, like this cycling one in Alba, Italy, shows the trail over terrain in CesuimJS along with labeled landmarks and peaks. 

Guillaume Lathoud, Senior Software Architect on the project, said of his experience developing with CesuimJS:

"Outdooractive needed a long-term solution to produce 3D videos. For that, I selected CesiumJS and never regretted it. In particular, the stable, solid API, as well as the Sandcastle environment and examples, make it easy to understand and experiment.

"In some rare cases of deeper issues, having CesiumJS as open source makes it possible to understand the situation and to solve it. This recently culminated with my contributing to the CesiumJS atmosphere rendering performance. The interaction with the team was very positive.

"Overall, the choice to make CesiumJS available as open source has definitely produced a win-win situation, which is magnified by the consistently positive, open, and responsive attitude of the Cesium team when interacting with developers."

"Outdooractive needed a long-term solution to produce 3D videos. For that, I selected CesiumJS and never regretted it. In particular, the stable, solid API, as well as the Sandcastle environment and examples, make it easy to understand and experiment."

- Guillaume Lathoud, Senior Software Architect, Outdooractive

Making plans

Before a trip, Outdooractive users come to the app looking for inspiration and information. In addition to maps and elevation profiles, Pro+ subscribers have access to a 3D map of any route, shown with CesiumJS. An interactive window allows users to explore the route, and an automatically generated preview video takes them on a tour of the trip. 

Trail near Stromness, Scotland, from Outdooractive shown in CesiumJS

Routes, like this one in Stromness, Scotland, are available both in an interactive CesiumJS scene and a 3D preview video, which Outdooractive generates from the CesiumJS route.

Critically for outdoor sports, this 3D environment provides a clearer picture of the elevation changes over a route. And high resolution satellite imagery helps users get a sense of the terrain, whether that be wooded paths, loose gravel, or rocky sections. With a more complete picture of an anticipated trip, users are better able to estimate risks and avoid pitfalls so they have a good experience. 

Trail at Yosemite, California, from Outdooractive shown in CesiumJS

With 3D terrain and satellite imagery, like from this hiking trail in Yosemite, California, it’s easier to visualize both the steepness of each portion of a route and also the surrounding environment, including vegetation, trail condition, and rock formations.

Making memories

After a trip, Outdooractive users come to the app to memorialize their experience. 

Outdooractive 3D routes show CesiumJS previews

A published route, like this one from Moab, Utah, can include a map, detailed information about the route, and an interactive 3D trail streamed with CesiumJS, accessed through the 3D Preview button. 

Users can create routes based on their GPS tracks and visualize them in an interactive 3D environment built with CesiumJS. They can further enhance those routes with detailed descriptions, images, up-to-date weather displays, and information about current conditions; and can make these routes available to the larger Outdooractive community.

This video from Moab, Utah, created in Outdooractive, combines a route shown in CesiumJS with geolocated photos along the trail.

Users can also choose to create a video that shows a 3D animation of the trail in CesiumJS. Outdooractive offers a few simple settings to configure the length and background music of a 3D video. A low-flying flight plan is computed to show as much landscape as possible while remaining close to the route. In addition, icons indicate geolocated images and selected points of interest within the animation and are displayed with a preview image.

Users can share these videos on Outdooractive and the dedicated Outdooractive Youtube channel or embed them on their own sites. The videos are popular among both Outdooractive’s B2C users, who create them to memorialize their experiences, and among B2B users, who provide information about the outdoor experiences in their area to inform and attract visitors. As a result, the reach of these 3D routes is far beyond their registered users, with countless visitors benefiting from the CesiumJS visualizations. 

Routes in Outdooractive are worldwide, including Philadelphia

Outdooractive is available in more than 20 languages, and the tracks and routes on its platform are created by community contributors all around the world, including right here in Philly.  

Cesium is all about bringing people better insights by connecting the digital and physical world. We’re happy to see Cesium at work on Outdooractive’s platform, helping people understand and get out into nature and share their experiences with their community. 

To get started building your own CesiumJS application, try out our Quickstart Tutorial.