Infobox camera symbol

CesiumJS
1

Hi,
can someone give me a hint how to disable or hide the camera symbol of the infobox.

I tried:

viewer.infoBox.enableCamera = false;

Does not work.

Thanks for help!

Ruediger

2

Cesium widgets support being styled via CSS.

To do what you want, just add the following to your app’s CSS file or style block.

button.cesium-infoBox-camera {

display: none;

}

To further expand on this, each widget has it’s own CSS file so the InfoBox’s is in Source/Widgets/InfoBox/InfoBox.css. So if you’re ever curious as to how to style a specific widget, looking at these files is a good start, though I prefer to use the element inspection tool in your browser of choice to look up what classes are associated with a specific element.

3

Thanks, now I understand much better how it works together. I'm still learning :slight_smile:

Ruediger

4

Hello,
I have a problem with camera symbol too, it is not shown, but I would like to enable it.
I checked the CSS and it is correct,

button.cesium-infoBox-camera {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: transparent;
  border-color: transparent;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0;
}

I also checked the InfoBoxViewModel.js :

  /**
   * Gets or sets whether the camera tracking icon is enabled.
   * @type {Boolean}
   */
  this.enableCamera = true;

On container creation I declared : infoBox: true,
but still I cannot see the camera button.

Can anyone help me?

5

@TheSarge81an

If possible, can you send a sandcastle demo showcasing the error? I have not encountered this issue before. At a high level, declaring infoBox: true seems like a logical first step.

The following sandcastle demo seems to have the functionality that you are looking for:

and the HTML body and CSS seem fairly standard:

<style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>

I am curious to hear your thoughts. Maybe there is something more fundamental that you are changing in your code? I am not a CSS expert, so input from other community members is welcome!

-Sam

6

It’s not what I am talking about.

when you click on an entity, the infobox appears, in this demo on the upright corner.
Inside the infobox on the left side of the title, there is a camera icon.
Instead in my viewer container infobox it doesn’t appear.

-Emanuele