@edallsystems
I found a few community forum threads that can help you get started creating buttons.
If you are looking to add a button to the top-right corner of the toolbar, check out the following thread:
I know it’s possible to add an HTML button to the toolbar’s location seen at the top-right of the Cesium Viewer, which is this:
[image]
However, when a button is added via assigning its < div > class to be the same as the toolbar, it will often sit on top of another button.
Is there a way to add a button to this toolbar such that all of the other, pre-existing buttons will move to the side to allow its placement there, without the button occluding any others?
Ultimately, adding a toggle button to the viewer is more of a general HTML/CSS issue than a CesiumJS issue. The following threads provide great high-level information.
To clarify, I want to overlay a button on top of the viewer like is in the sandcastle example. When I do it like this, it positions the button above the viewer.
toolbarLeftClass: {
display: “block”,
position: “absolute”,
top: “5px”,
left: “5px”
},
cesiumContainerId: {
position: “relative”,
width: “100%”,
height: “100%”,
margin: “0”,
padding: “0”,
overflow: “hidden”
},
this.cesiumContainer = element}>
Click me!
Hi!
I have a Cesium panel and I want to put a button at the top of it (see below).
[image]
When the user presses that button, the selected entity must be deleted.
To achieve that goal, I wrote this code:
<h1>My app</h1>
<div ng-show="authenticated">
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer',
{
timeline: false,
animation: false,
…
Let me know if you have any other questions or concerns!
-Sam