Adding a button

repp...@gmail.com

unread,

Feb 28, 2014, 11:04:11 AM2/28/14

to cesiu...@googlegroups.com

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.

Ed Mackey

unread,

Feb 28, 2014, 11:21:21 AM2/28/14

to cesiu...@googlegroups.com

Try putting the <div id="cesiumContainer"></div> above the <div id="button">.

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.

--
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/groups/opt_out.

repp...@gmail.com

unread,

Feb 28, 2014, 11:56:22 AM2/28/14

to cesiu...@googlegroups.com

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.

Ed Mackey

unread,

Feb 28, 2014, 2:06:57 PM2/28/14

to cesiu...@googlegroups.com

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.

On Fri, Feb 28, 2014 at 11:56 AM, <repp...@gmail.com> wrote:

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.

repp...@gmail.com

unread,

Feb 28, 2014, 2:55:26 PM2/28/14

to cesiu...@googlegroups.com

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.

Reply all

Reply to author

Forward