Search code examples
angularjsfirefoxtwitter-bootstrap-3cesiumjs

Viewer clock and timeline displaying poorly

These are the pieces I am using: Angular 1.5.8, Bootstrap 3.3.7, Cesium 1.27.0, Firefox 49 (I haven't tested this in other browsers, yet).

I am trying to use Cesium within an Angular 1 application. The problem is this:

Cesium is rendering a clock that takes up the entire bottom half of the screen. And the timeline does not appear. The Viewer seems to display the clock and timeline properly the first time in my SPA. But when I switch to another 'page' and then go back to my cesium page, this is when the displays gets messed up, and stays that way until I close the browser tab and start over.

Here's what I have:

ModuleA.controller: 

vm.viewer = new Cesium.Viewer(elem, {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : 'https://assets.agi.com/stk-terrain/world'
    }),
    baseLayerPicker: false,
    clock: CesiumClockService.get()
});
vm.viewer.scene.globe.enableLighting = false;

The CesiumClockService is in another module that is one of ModuleA's dependencies. The service simply creates a Cesium.clock and provides a get/set method. The idea was to use Angular's singleton service to provide the same Cesium clock to any client module to keep all client modules in time with each other.

ModuleA.directive:

var dir = {
   restrict: 'E',
   controller: 'ModuleAController',
   bindToController: true,
   link: linkFunction
};
return dir;

function linkFunction(scope, element, attr, ctrl){
     ctrl.setCesiumElem(element[0]);
}

The HTML that this lives in:

<body>
<div style="height: 100%;width: 100%;padding-top: 48px;padding-bottom: 48px;margin-bottom: 30px;">
     <div class="container-fluid">
          <div id="main-container">
              <div class="row">
                  <div class="col-xs-12">
                      <module-A-directive></module-A-directive>
                  </div>
              </div>
          </div>
     </div>
</div>
</body>
Solution

  • In my moduleADirective, I added this to my linkFunction:

    function linkFunction(scope, element, attr, ctrl){
     var raw = element[0];
     raw.className = "cesium-viewer";
     ctrl.setCesiumElem(raw);
}

    Apparently, the Cesium viewer really likes that cesium-viewer class in order to appear nicely.