Adding an HTML button to the top-right toolbar?

CesiumJS
1

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
image1319×591 302 KB

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?

2

Welcome to the Cesium community!

Those buttons are currently handled by the Cesium Viewer class. They all get added as children to that one div, see: https://github.com/CesiumGS/cesium/blob/b84b70a7c7126e363cc31a4fb4b46f1b84564524/Source/Widgets/Viewer/Viewer.js#L562.

You could grab that container using a CSS selector and append your own button to it. Is this what you’ve already tried?

3

@omar Apologies for the late reply, and thanks for the introduction. I should say at this point that I’m using Vue to render out elements on the page; however, your advice still works.

I can get a button to show up on the page by creating a div in vue with the class name being the same as the toolbar (‘cesium-viewer-toolbar’) and using style to move it to the right side of the display, as so:

image

However, if a user was to open the address field by hovering over the magnifying glass icon, the HTML button will not move, staying over top the newly-created field:

image

Is there a way to get the button to respect the changing dimensions at work here?

Similarly, is there a way to place the button between the other buttons, with the old buttons respecting the placement of the newer HTML one?

4

Instead of creating your own div - have you tried getting that parent div (which would have class .cesium-viewer-toolbar) and adding your button as a child of that? That should put it among the other buttons. You won’t be able to get it between individual buttons unless you either:

  1. Modify the source to insert your widget in the right order when the Viewer.js is adding the other widgets
  2. Avoid using the Cesium Viewer, and instead use the minimal Cesium Widget (Cesium Sandcastle) to initialize the scene, which will not create any of these buttons, and you can create your own UI for each widget to have full control over them.
1 Like
5

You can insert a button using insertBefore as in this Sandcastle example.

You’re on your own for making an icon – Cesium uses SVG, but you could also do a font-based icon like Google’s Material Icons or FontAwesome.

3 Likes
6

Do you happen to know if there’s a way to do this via CSS, mainly? I’m using Vue to draw the elements on this UI and I’d like to set up a button via Vue, but in that toolbar location.

7

I’m barely conversant in Vue but I don’t think what you’re asking for fits the model very well. You could add an absolute-positioned button, and copy out all the styles, and try to make it not look “wrong”, but that’s going to be a brittle mess. I would suggest either the approach from my example, where you manipulate the DOM of the existing toolbar after you create the Viewer, or hiding the built-in toolbar completely using a global style rule like .cesium-viewer-toolbar { display: none !important; } and making your own, ideally using the UI element vocabulary of the rest of your application. I’m taking the second approach, making my own control widgets for baselayer selection, terrain, search, etc. It’s a bit more work but it allows me to have full control over look and feel.

8

@James_B, your example using insertBefore as in the Sandcastle example looks great. How to make the X button to open a panel as like the basemap button? has it to do with the css: cesium-baseLayerPicker-dropDown-visible? Thanks in advance