Adding a button

CesiumJS
1

So, this is kind of a noob question, but...here's my problem. I downloaded the HTML for the Hello World demo, and I've got that running. I'm trying to modify it so that there's a button you can press to do something. And I'm stuck at the 'making a button appear' stage. Adding a button is pretty straightforward. Here's the part I've changed from HelloWorld.html:

<body>
<div id="button">
<script>
var myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "Click here";
document.getElementById("button").appendChild(myButton);
</script>
</div>

<div id="cesiumContainer"></div>
<script>
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');
</script>
</body>

The problem is that, without fail, the CesiumWidget appears on top of the button. I can tell because if I comment out the line creating the CesiumWidget, the button is right there. Even if I try 'myButton.style.zIndex=9999', it's still hidden. So, is there some way in Cesium for adding arbitrary elements to the interface? Or is there a way to make the JavaScript button overlay the Cesium widget? I've tried the documentation and tutorials and haven't found anything to help me here.

2

Try putting the

above the
.

Also, depending on the styling of “cesiumContainer”, the button could be off the bottom of the screen. Make sure cesiumContainer has “position: absolute” in its style.

–Ed.

3

Alas, moving the cesiumContainer div didn't work.

When I comment out the JavaScript that makes the CesiumWidget, the button appears at the top-left of the screen; it's being overlaid by the widget somehow, but it's still there. I did try changing the cesiumContainer's style as suggested, but that didn't work either.

4

Ah, right. Try adding “position: relative” or “position: absolute” to the div that contains your new button.

Basically the cesiumContainer, because it is absolutely positioned, is in its own stacking context. Your button and its div are in the body’s default stacking context, underneath the cesium one, where no amount of z-index is going to get you out from under there.

–Ed.

5

Yep, that worked. I found it made a white bar at the top (because the div containing the button was above the div containing the widget), but some more CSS-jiggling fixed that.

I set the cesiumContainer's style to position:relative and z-index:0. Then the button to position:absolute and z-index:1. And now the button is floating on top of the Cesium interface, just as planned.

Thanks for helping me figure this out.