Stay Connected with the Boundless Blog

OL3-Cesium Brings 3D Rednering to OpenGeo Suite Web Apps

OpenLayersWith the news the Google Earth API has been deprecated, what is the best way to add a 3D globe to your mapping application? Thanks to advances in browser technology such as WebGL, which allows web applications to use the device’s graphics processor (GPU) for hardware accelerated rendering, OpenLayers 3 and Cesium can dynamically visualize data on 2D maps and 3D globes without the need for any plugins.

Wouldn’t it be nice to be able to just switch to a 3D globe view from an OpenLayers 3 map, much like how GeoExplorer can switch between OpenLayers 2 and Google Earth? Alongside Klokan Technologies and camptocamp, we helped create OL3-Cesium and recently included it in OpenGeo Suite 4.5 to achieve just this.

Visualizing GPS tracks in OL3-Cesium

In this post, I will show how to add a 3D globe view to a mapping application using the Boundless SDK and OL3-Cesium. As an example, I created an app that allows me to drag and drop GPS tracks on a map, then switch to 3D and explore. I enjoy mountain biking in my free time, because it challenges completely different regions of the brain than writing software, and in August I succeeded in riding my steepest descent so far, the famous nose trail north of Vienna.  See how this looks with the GPS track of my nose trail adventure:

GPS Track Viewer in Action from Andreas Hocevar on Vimeo.

As you can see, OpenLayers reads 3D coordinates from the GPX file I dragged on the map, but the third dimension is only visible as I switch to the globe view and tilt the map. Obviously the elevation reported by my GPS does not match the elevation model that I use for the globe view, so my track is quite a bit above the surface. Anyway, you get the picture.

Now let’s take a look at what I did so that my app can provide a globe view. Initially, I created my application with

$ suite-sdk create ol3-cesium-demo ol3view

I made a few tweaks to the layout, removed the States layer and the layer control, and I added a ol.interaction.DragAndDrop. For the globe view itself, the first thing to do is to create an olcs.OLCesium instance, connect it with the map and add an elevation model (known as terrain in Cesium). I did this in src/app.js, right after the code that creates the ol.Map instance:

var ol3d = new olcs.OLCesium(map); // map is the ol.Map instance
var scene = ol3d.getCesiumScene();
var terrainProvider = new Cesium.CesiumTerrainProvider({
  url: '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
});
scene.terrainProvider = terrainProvider;

To add a “Toggle globe view” menu item, I added a list item to the dropdown-menu list:

<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="toggle-globe"><i class="fa fa-globe"></i>&nbsp;&nbsp;Toggle globe view</a></li>

Finally, at the bottom of my src/app.js file, I added a handler for the “Toggle globe view” menu item:

$('#toggle-globe').click(function() {
  ol3d.setEnabled(!ol3d.getEnabled());
});

That’s it!

Drag in your GPS tracks!

You can try the demo live at http://ahocevar.github.io/ol3-cesium-demo/ and view the source code or fork it on GitHub.

Andreas Hocevar

Architect

Andreas is an accomplished open source developer; he is an active steering committee member for both OpenLayers and GeoExt . He has been working in geospatial for almost 20 years, and is a frequent teacher and speaker.