consulting and development

maps, GIS and geospatial software

3D demo with OpenLayers and CesiumJS

Lately, some of my clients have brought up the desire for 3D rendering of maps on the web. I thought – if that’s what the clients want, I’ll figure out how to do it. There appears to be a range of options out there – NASA Worldwind, Open Web Globe and CesiumJS.


Click to open demo

I decided to take Cesium combined with OpenLayers for a spin at first for a number of reasons. Having worked over 2.5 years developing on a daily basis with OpenLayers, I’m pretty familiar with that – so it seemed like the straight forward way in to the 3D world for me. Furthermore, I used to work with OpenLayers version 2.11 to 2.13. Cesium only works with the recent OpenLayers version 3.x which is a complete rewrite of the entire library. It’s been on my list for a while to familiarize myself with ol3 – so here’s my cue to get started. I found out that ol3 lacks a lot of the UI functionality that I’m used to, so I ended up making a quick and dirty layer switcher tool in the process.

I started out by mimicking some of the examples on the OpenLayers web page and proceeded to modify it to my own demo with multiple layers – currently with layers from Open Street Map, Bing Maps, Stamen, and MapQuest.

Link to demo:

The map is currently using the default projection “EPSG:3857”. My next step is to try it out alternative projections such as “EPSG:25832” being the common around Norway and Denmark.

Another ambition is to render other layers, e.g. buildings or other structures in 3D within the map. And I definitely intend to take take OWG and Worldwind for a spin as well. Stay tuned … :)

Let me know if you have any ideas or comments!