Yonatan Kra

Getting cesiumjs and angularjs to talk

About Me Love programming

PhD in neuroscience

AngularJS groopie

Father

Husband

Run quite fast (see you at the gym?)

http://bit.ly/1izlzFe

Blog: webiks.com

WEBIKS

Dashboard tools Time based tools Link analysis Map (cesiumjs)

Enterprise Homeland Security Defense

Systems UX Development

Web Based Front End

Big Data Analytics Help solve problems

Have you filled the poll yet?

No? Don’t be left behind. Follow the link:

https://api.cvent.com/polling/v1/api/polls/sp-9xkf0l

Developed by Google

Active project with large eco-system

Supports modern browsers

MVC

…

AngularJS

Using angular from its first stable build

Using cesium since b27 (January 2014)

Realtime applications

Google earth

Big data

Motivation

A github open source project

Makes integrating cesium in angularjs apps a breeze

One cesium expert is all you need… the rest can do angular

Easily extend cesium functionality with angular modules

So what is ngCesium?

So how to ngCesium?

<cesium></ cesium >

HTML: <div id=“cesiumContainer”></div> Code: var viewer = new

Cesium.viewer(document.getElementById(‘cesiumContainer’));

Extending Cesium

angular.module(‘ngCesiumExtension’, [‘ngCesium’]);

.directive(‘cesiumExtension’, function(cesiumExtensionFactory){});

.factory(‘cesiumExtensionFactory’, function(){});

<cesium cesium-extension></cesium>

<cesium cesium-extension cesium-extension2></cesium>

Live sample at: http://bit.ly/1OflGlm

Extension Samples

Polygon drawer

Filtering

Clustering

<cesium

polygon-drawer>

</cesium>

<cesium

cesium-polygon-drawer

cesium-filters>

</cesium>

<cesium

cesium-polygon-drawer

cesium-filters

cesium-clustering>

</cesium>

No Angular? No Problem

Summary

Realtime filtering, clustering and integration with an angular app

“End developer” doesn’t need to “know” cesium

Few “cesium” experts, 100% developing with cesium

Invited to our github/blog

Live examples at: http://bit.ly/1L4mWaf

Questions?

Thank You!