show infobox after click where mouse stays

CesiumJS
1

Hi

I want to know is it possible to make an infobox show up around a entity that I click.

It is just like a bubble infobox in Google Earth.

Chris

2

Hello Chris,

We decided to make the Infobox stay fixed to the side of the screen because out entities are time dynamic and may be moving around the screen. In that case, it wouldn’t make sense for the infobox to follow them when they are moving around.

You would have to write custom code to make it appear above your entity like the bubble.

Best,

Hannah

3

Hi Hannah,

Do you have some code example to control infobox ?

I want to make it to show up on mouse over and top of the entity, like google earth.

Please reply..

Thanks

4

Hello,

You will need to change the position of the div element with class=“cesium-infobox” with CSS styling. Right now it’s hard coded at top: 50px; right: 0;

You can use the function SceneTransforms.wgs84ToWindowCoordinates to convert the entity’s Cartesian3 world coordinate to a Cartesian2 window coordinate.

And you will most likely want to put your mouse over handler in Viewer.js. Take a look at how we use a ScreenSpaceEventHandler.LEFT_CLICK handler for selecting an entity with a click. the
This code is responsible for updating the content of the InfoBox based on the viewer.selectedEntity.

Best,

Hannah

5

It was possible to solve?

A similar problem, place the infobox over the mouse cursor.

You can sample code, how selecting an entity with a click

Thanks