How to create two viewer widgets controlled by a single timeline/animation?

CesiumJS
1

Is there a way to create two viewers that can be controlled (fast forward / rewind) from one timeline/animation widget?

Is there a way to have these two viewers also be able to "share" a scene? For example, could I add data to one of the viewers and have it duplicated onto the other?

My scenario:

I currently have my page split so the top half of it is viewer1 (3D map) and the bottom half is viewer2 (2D) map. Viewer2 has the timeline and animation widgets enabled. I need to be able to load a data file once, look at point A on viewer1 while looking at point B on viewer2, and be able to control the animation on both viewers from one timeline.

-Thanks

2

While it’s currently possible to have two widgets, linked with a single timeline widget, it is not optimal in any way. Outside of the widgets, the primitives/imagery/etc… can’t currently share any data, so they all need to be duplicated. If you are loading external files, such as CZML or GeoJSON, the only penalty is performance since you just load the files twice. If you are creating primitives yourself, then you need to architect your code in such a way that you do everything once for each map.

We used to have an example of doing this, but we removed it because of the above caveats. I wrote up a brand new example which you can find here: https://gist.github.com/mramato/6581488 It’s a complete Sandcastle example for using two widgets, but it should be a piece of cake two extract out the relevant parts to use in your existing app.

Eventually, we’ll have real support in Cesium and we’ll add a version of this example back into the standard demos set.

3

Matthew,

Sorry to bring an old post back to life but I would like to use the Sandcastle example you like to above. When I pasted it into a Sandcastle HTML tab, I get a blank page.

Any ideas on what I am doing wrong?

Thanks,
Owen

4

Hello Own,

That code is just really really outdated. Here’s the updated code:

var topDiv = document.createElement(‘div’);

var bottomDiv = document.createElement(‘div’);

topDiv.style.height=‘50%’;

bottomDiv.style.height=‘50%’;

document.body.appendChild(topDiv);

document.body.appendChild(bottomDiv);

var viewerTop = new Cesium.Viewer(topDiv, {

timeline : false,

animation : false,

sceneMode : Cesium.SceneMode.SCENE2D,

useDefaultRenderLoop : false

});

var viewerBottom = new Cesium.Viewer(bottomDiv);

//Diable animation because we will manually be updating the clock

viewerTop.clock.animating = false;

//Slave the top widget’s rendering to the bottom.

viewerBottom.clock.onTick.addEventListener(function(clock, currentTime) {

viewerTop.clock.currentTime = clock.currentTime;

viewerTop.clock.onTick.raiseEvent(viewerTop.clock);

viewerTop.resize();

viewerTop.render();

});

viewerTop.dataSources.add(Cesium.CzmlDataSource.load(’…/…/SampleData/simple.czml’));

viewerBottom.dataSources.add(Cesium.CzmlDataSource.load(’…/…/SampleData/simple.czml’));

Sandcastle.finishedLoading();

``

Paste that code into the JavaScript code tab and it should work.

-Hannah