ngCesium – integrating angularjs and cesiumjs – part 1

In this 5 parts tutorial, we’ll walk through the building of an angular module, evolving around cesiumjs.  This tutorial assumes you are already familiar with:

• Javascript (naturally)
• Cesiumjs
• Angualrjs

If you are unfamiliar with any of the above, you can still benefit from this tutorial, as it shows several practices we have found to work really well for various angular modules – one of them involves the use of cesiumjs.

Let’s follow the lead of cesiumjs and start with “cesium up and running” – or more likely, “ngCesium up and running”.

So, in order to setup an angular-cesium app, we would need to first setup the angular app. Once it is setup, we would build a directive to get the cesium viewer into the DOM. Why do we need a directive? Becuase in angular, it is best practice to manipulate the DOM from the directive only  (we would not get into it more than that).

Here’s the code for our up and running ngCesium app:

Let’s explain it a bit:

At first we create the angular module (angular.module(‘ngCesium’)).

Then we add the directive to the module. This directive returns the directive definition object. The cesium part happens in the link function, after the dom has been “compiled” by angular.  You might recognize most of it:

ctrl.cesium = new Cesium.Viewer(element[0], {
baseLayerPicker: false,
fullscreenButton: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
animation: false,
geocoder: false
});

The “angular” parts are the “ctrl“, which is the reference to the controller’s context, and the “element[0]” which is a reference to the directive’s DOM element, under which we’re going to add the cesium element.

The parts below are just some playing around to show how to add a simple entity to the ceisum viewer.

Side note: It is possible to add the cesium code inside the directive's controller. The reason we add it to the link function is because later on we'll add more functionality and a template to the directive, and the link function is activated after the template is set in the dom.

While this looks cool (most of the time, just showing a live cesium viewer in 3D is cool), it’s not really much showing why you would use angular to achieve this… in the next parts, we’re going to make this module much more… well… modular, and expand the methods arsenal our app can use with cesiumjs.