Running a cesium viewer within a div

ale...@gmail.com

unread,

Jan 31, 2015, 7:15:05 PM1/31/15

to cesiu...@googlegroups.com

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.

thanks.

Hyper Sonic

unread,

Feb 2, 2015, 5:46:06 PM2/2/15

to cesiu...@googlegroups.com, ale...@gmail.com

I believe Cesium is all on one canvas element

http://www.w3schools.com/html/html5_canvas.asp

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

http://www.w3schools.com/tags/tag_div.asp

//Sandcastle_Begin

var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;

var canvas = viewer.canvas;

Matthew Amato

unread,

Feb 4, 2015, 12:20:55 AM2/4/15

to cesiu...@googlegroups.com

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:

<!DOCTYPE html>

<head>

<title>Hello World!</title>

<style>

@import url(../Build/Cesium/Widgets/widgets.css);

#cesiumContainer {

width: 640px;

height: 360px;

overflow: hidden;

}

</style>

</head>

<body>

Here is some text and a shiny <button>Button!</button>

And here is some more text

var viewer = new Cesium.Viewer('cesiumContainer');

</script>

</body>

</html>

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:

<!DOCTYPE html>

<head>

<title>Hello World!</title>

<style>

@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;

}

</style>

</head>

<body>

<div id="overlay">Here is some text and a shiny <button>Button!</button> And here is some more text</div>

var viewer = new Cesium.Viewer('cesiumContainer');

</script>

</body>

</html>

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Hyper Sonic

unread,

Feb 4, 2015, 1:12:36 AM2/4/15

to cesiu...@googlegroups.com

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.

document.getElementById("cesiumContainer").style.width=800px;

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.

Hyper Sonic

unread,

Feb 4, 2015, 1:09:05 PM2/4/15

to cesiu...@googlegroups.com

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.

https://www.youtube.com/watch?v=lBb-SZN8Mhc&index=12&list=PLu7ubzox5Ny6kv29oIUaD1387aacPpZIG

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.

Matthew Amato

unread,

Feb 5, 2015, 10:12:02 AM2/5/15

to cesiu...@googlegroups.com

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.

--

Hyper Sonic

unread,

Feb 5, 2015, 3:24:42 PM2/5/15

to cesiu...@googlegroups.com

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%'.

 document.getElementById("cesiumContainer").style.width='1000px';
 document.getElementById("cesiumContainer").style.height='50%';
 document.getElementById("cesiumContainer").style.overflow='hidden';

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

Matthew Amato

unread,

Feb 5, 2015, 4:11:01 PM2/5/15

to cesiu...@googlegroups.com

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: https://github.com/pjcozzi/cesium-starter-app; 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).

--

Hyper Sonic

unread,

Feb 5, 2015, 7:19:33 PM2/5/15

to cesiu...@googlegroups.com

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.

Matthew Amato

unread,

Feb 10, 2015, 1:31:43 PM2/10/15

to cesiu...@googlegroups.com

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.

--

Hyper Sonic

unread,

Feb 10, 2015, 1:53:02 PM2/10/15

to cesiu...@googlegroups.com

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;


ccs.width='100%';ccs.height='50%';

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.

emadkh...@gmail.com

unread,

Apr 30, 2019, 10:36:06 AM4/30/19

to cesium-dev

Give your control div a higher z-index

Reply all

Reply to author

Forward