<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example52-production</title>
<script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
<script src="http://stepplus.co.il/images/svg2png.js"></script>
<link rel="stylesheet" href="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Widgets/widgets.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div ng-controller="mainAppCtrl as mainAppCtrl">
<div cesium-directive="" id="cesium1" class="cesiumContainer"></div>
</div>
<script src="app.js"></script>
</body>
</html>
"use strict";
angular.module('myApp', ['ngCesium'])
.controller('mainAppCtrl', ['$scope', function($scope){
}]);
// other app stuff can come here - like routing, more directives and services
// define the ngCesium module
angular.module('ngCesium', [])
//define the cesium directive
.directive('cesiumDirective', function($interval){
// return the directive definition object
return {
restrict: "EA",
controllerAs: "cesiumCtrl",
scope: {
data: "="
},
controller: function($scope){
},
// define the "link" function
link: function(scope, element, attr, ctrl){
ctrl.cesium = new Cesium.Viewer(element[0], {
baseLayerPicker: false,
fullscreenButton: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
animation: false,
geocoder: false
});
//Grand Island, Nebraska in radians
var startingLocation = {
centerLong: (-98.343286 * Math.PI / 180),
centerLat: (40.923664 * Math.PI / 180)
};
ctrl.cesium.camera.flyTo({
destination: new Cesium.Cartesian3.fromDegrees(startingLocation.centerLong * 180/Math.PI, startingLocation.centerLat * 180/Math.PI, 5000000)
});
ctrl.cesium.entities.add({
position: new Cesium.Cartesian3.fromDegrees(startingLocation.centerLong * 180/Math.PI, startingLocation.centerLat * 180/Math.PI, 500),
point: {
pixelSize: 32
}
});
}
};
})
.controller('cesiumCtrl', ['$scope', function($scope) {
}]);
.cesiumContainer{
height: 50%;
width: 100%;
}