Cesium map angular vs razor

Question

I am building a web app using c# that has a client side and server. I am using cesium map. I am new to this material and a bit confused. Can any one tell me if cesium can be implemented with web api and angular? Or should it be with razor? Does it matter?

Thanks Ben.

Answer 1

I know you asked this question on our mailing list as well, but I wanted to answer it here too just in case anyone else has a similar question.

I'm not supper familiar with either, but as far as Cesium itself is concerned, it doesn't matter. Cesium is toolkit and server agnostic; it doesn't care what toolkit or server technology you use and can work with all of them.

Answer 2

Matt is correct, use any framework you like, but take time to learn pros and cons. You can have a Razor template with an embedded Cesium widget (and I've worked on such an app myself), just with the understanding that if you navigate away from the page, the widget is deallocated, so the user "loses their place" on the map. AngularJS I've not worked with, but looks similar to Knockout which Cesium uses for its own UI hookup. This kind of client-side UI hookup is useful if you will have controls on the page that manipulate the widget or its contents, without navigating away.

EDIT: Added a sample of the Angular "TODO" demo app in front of the Cesium globe, to demonstrate that the frameworks can coexist.

var viewer = new Cesium.Viewer('cesiumContainer', {
  navigationHelpButton: false, animation: false, timeline: false
});

angular.module('todoApp', [])
.controller('TodoListController', function() {
  var todoList = this;
  todoList.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  todoList.addTodo = function() {
    todoList.todos.push({text:todoList.todoText, done:false});
    todoList.todoText = '';
  };

  todoList.remaining = function() {
    var count = 0;
    angular.forEach(todoList.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  todoList.archive = function() {
    var oldTodos = todoList.todos;
    todoList.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) { todoList.todos.push(todo); }
    });
  };
});

html, body, #cesiumContainer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}
.done-true {
  text-decoration: line-through;
  color: grey;
}
.controls {
  position: absolute;
  top: 5px;
  left: 8px;
  background-color: rgba(42, 42, 42, 0.7);
  padding: 5px 8px;
  color: #edffff;
}

<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" 
          rel="stylesheet"/>
<div id="cesiumContainer"></div>
<div class="controls" ng-app="todoApp">
  <h2>AngularJS Todo</h2>
  <div ng-controller="TodoListController as todoList">
    <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
    [ <a href="" ng-click="todoList.archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todoList.todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="todoList.addTodo()">
      <input type="text" ng-model="todoList.todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>