Running a cesium viewer within a div

I'm just starting out with Cesium js.
I can host the HelloWorld.html on local host and see the globe and stars.

If I try to set up a new Cesium.Viewer in a div on a page with a second div with control buttons, the Cesium viewer still takes over 100% of the browser window.

Does anyone have an example/advice of using a Cesium Viewer with other controls on a web page? It seems like this should be a common thing to want to do but I can't get it to display within the div.


I believe Cesium is all on one canvas element

Which you can modify like you can a div element such as width height


var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var canvas = viewer.canvas;

As Hyper Sonic alluded too, Cesium lives inside any canvas element you want, so anything you can do with an HTML canvas, you can do with Cesium. It’s all accomplished through standard CSS styling. Here are two quick examples:

If you’re talking about having Cesium not be the full browser window, then you need to modify your pages CSS so that the Cesium container doesn’t take up the full screen. For example, here’s a complete Cesium app with a small window:

Hello World! @import url(../Build/Cesium/Widgets/widgets.css); #cesiumContainer { width: 640px; height: 360px; overflow: hidden; }

Here is some text and a shiny Button!

And here is some more text

If you’re talking about overlaying controls on top of a full screen Cesium window, that’s easy too and there are a myriad of ways to do it. Here’s one of them:

Hello World! @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #overlay { color : #FFFFFF; top : 6px; left : 6px; position : absolute; z-index : 1; }
Here is some text and a shiny Button! And here is some more text
1 Like

Trying that first HTML example I entered cesiumContainer into the console. Apparently everything is contained within the cesiumContainer div. That makes sense looking at this line: var viewer = new Cesium.Viewer(‘cesiumContainer’);

The canvas is buried a bit. First expand cesiumContainer, then expand cesium-viewer, then expand cesium-viewer-cesiumWidgetContainer, then expand cesium-widget, and there’s the canvas. You could also just open the console and select the elements tab then expand it from there as well.

I tried altering the style width using JavaScript, but the web browser complained, so I don’t know if you can change it while it is running.


I hope so, you can change the div Google Earth lives in and it would adjust to the new size and position on the fly (though sometimes you’d have to jiggle it a bit first.)

You can type document.getElementById(“cesiumContainer”).style and it will give you a bunch of empty properties.

I tried the 2nd HTML example and that z-index 1 is needed to render the div above canvas. Perhaps the other divs placed over the canvas are z-index 1 as well. I’d imagine if you also want to render over the other divs you’d need z-index 2.

Is there a way to dynamically adjust the cesiumContainer div while it’s running? I noticed that Google Earth API automatically adjusted as it’s div changed.

Although Streetview only adjusts to the div when it is first started. When I changed the size of the div Streetview was attached to it would not expand to the new size. I had to delete the Streetview instance and create a new one. It would be nice if Streetview would adjust to the new size, even just checking the div size every few seconds to see if it changed would work if there isn’t already an onChange function. Same with Cesium.

My example was just one way to do it. You can also add items directly to the viewer.container div if you were so inclined. My main point was that Cesium just fits in with the rest of the CSS/HTML system and there’s nothing special about it. You can even use CSS transforms to do all kinds of crazy stuff with it.

The Viewer and CesiumWidget widgets both automatically resize to match the div that they live in. There is also a Vewier.resize() method that forces the resize if needed or if you are implementing a custom render loop.

Thanks for all the info! Ya you’re right, Cesium does seem to automatically resize. I forgot to put quotes around 800px regarding the earlier post.
It can be set using JavaScript anytime using stuff like ‘800px’ or ‘50%’.



Thus far I’ve been modifying SandCastle apps. I should probably be modifying the regular apps, though Cesium only comes with the HelloWorld example.

The Cesium Viewer is a standalone application as well, the main difference is that it uses AMD modules rather than the combined Cesium.js.

There’s also this:; though it needs to be updated to 1.6 (which is trivial to do yourself by just replacing the Cesium directory with the one from 1.6).

Thanks for the link to the Cesium starter app, I’ll be sure to check that out.

I’d like to use percentages to declare div sizes, but I’ve hit a snag.

var ccs = document.getElementById(“cesiumContainer”).style;
ccs.width=‘100%’;ccs.height=‘500px’; //this works
ccs.width=‘1900px’;ccs.height=‘500px’; //this works
ccs.width=‘1900px’;ccs.height=‘50%’; //this doesn’t work
ccs.width=‘100%’;ccs.height=‘50%’; //this doesn’t work


The 2 that don’t work simply take up the full screen. I suppose I could figure out the window size then convert % to px as a way around this.

Those last two should definitely work, but percentage values are dependant on the parent object. If you can create a small example that doesn’t do what you expect (and works with non-Cesium div doing the same thing) please let us know.

That’s odd, if I omit this in the style tags
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}


This JavaScript statement (placed in the window.onload function)

var ccs = document.getElementById(“cesiumContainer”).style;


results in Cesium taking 100% width and 100% height. Yet if I don’t omit that in the style tags the JavaScript statement will work properly. I’ll be sure to not omit that in the style tags! Thanks, now I don’t have to use a % to px function.

Give your control div a higher z-index