Improve InfoBox

CesiumJS
1

Hello, I'm trying to improve the InfoBox of my cesium development (http://social4d.com/) and I'm finding to do something like that https://cesiumjs.org/d3cesium/ where you can see how into the infobox is showed the interpolate number of height of the polyline in each moment. I'm trying to adapt this code to my web, but the problem is that I have no idea about how I can change the infobox because cesium doesn't have any function to modify it, not?

In this moment I'm reading the documentation about the InfoBox but doesn't appear nothing about modify the content. Do you have any idea?

Thanks!

2

And another question, exist any function in Cesium to show using the console the values of one entity in the Cesium time?

3

Ok, I found the method to modify the InfoBox of one entity:

entity.description = "Hello";

But I want insert in the description one value of the entity that is changing with the time (the height of extrusion of a polygon). I found the function getValue(time) but, I have no idea about where is declared the variable time in function. Any help?

In my opinion, the documentation of Cesium is very very well, but one example from each function would help all the doubts...

4

I found this topic about the same problem ( https://groups.google.com/forum/#!topic/cesium-dev/RstiXJxCBQE ) and I found the example of Hiroshima ( http://hiroshima.archiving.jp/index_en.html ) I'm trying to improve my Info Box with a script like this:

entity.description = '<script type="text/javascript">document.write("Hello ");</script>';

But it doesn't work. Someone know how put a script into the description? Thanks!

5

Hello,

In order to run a script in the infobox, you have to enable scrips to run in the iframe. This is disabled by default for security reasons, in case you don’t know the source of the data populating the infobox.

You can enable scrips with this code:

var iframe = document.getElementsByClassName(‘cesium-infoBox-iframe’)[0];
iframe.setAttribute(‘sandbox’, ‘allow-same-origin allow-scripts allow-popups allow-forms’);

Also, to get the current value of an entity property, you can use .getValue(viewer.clock.currentTime);

Best,

Hannah

6

var iframe = document.getElementsByClassName(‘cesium-infoBox-iframe’)[0];
iframe.setAttribute(‘sandbox’, ‘allow-same-origin allow-scripts allow-popups allow-forms’);

This method is valid now??

It’s not working for me.

Certainly function is declared.

but onclick in infobox can’t find function.

-Error message-

Uncaught ReferenceError: youtube_popup is not defined

at HTMLInputElement.onclick (about:blank:1)

7

Can you put together a Sandcastle (https://sandcastle.cesium.com/index.html?) example showing this issue?

8

Sure.

This is my simple example.

I declare function that make alert message.

and Add 2 buttons.

1.Sandcastle button, you can see top of window.

2.Entity’s description, there using onclick method for call function.

1 - Work normally.

2 - Nothing response.

Check it please.

Thank you for your support!

9

I partially find solution.(it’s a trick?)

iframe is another page.

So there are no function declared.

If you want call function from main page to iframe.

Attach ‘parent’ or ‘top’ front of function name.

eg)

—Main page----

function message(){

console.log(‘message’);

}

—iframe—

or

10

One thing you could do also is (we did this this), just completely get rid of the default info box and then listen for the selectedEntityChanged events within Cesium and show a custom info box using info from the selected entity

11

Hi David.

That’s a nice tip.

Your advise contribute improving my work’s quality

Thank you!!

12

Do you think you can provide an code example of what you mean? Thank you.

13

I tried on this e.g.

https://sandcastle.cesium.com/index.html#c=ZVPLbtswEPyVjS6SAYdSmuTiKEZdJ7cWBZKgQAFd1tLaZkstBZKS6xT+91Avx3EoCKCGM/sYrho00EjakYF7YNrBkqysS/Grw6Iw7z6Xmh1KJhNO7jJun8brDBWPSsnKktf2QQSxk06SFVgU0f+Mwa9KW49pno3Bl2ic3yFfi7XR5QNtDJGNLq+Sa5FM4SYRyWTaaxlLghmET1QADck0g63NGnMKB1ZBNjey6pKEqeSqduD2Fd1nwap2TnMWQIOqboFvI6A5VzL/66GSrMUNRZMsmIdTiONFUUAvBMlOQ9fVPrSnicBt0UGO7F+lYF1z3sKir2isdQaDCe2yVMofkrVZ/JPWH325TfzyLZ9R8M+RcpN8opToyEhU8O6nVtqIp8cHsZNuu1DVFqNE3E56zSHjw3htcexbyBUaOhac8biDow9DzajIuCgLfusaOq9otOXiIgvamIf3uCeeDc6cuJLxM3KRo3WK2tF40Vqt0PR3EYXLljtkP2r8TYzbaDLaeCzx7qSrYfZetS5fdHQ2iS0pmAapdXtF8z7KV1lW2jiojYqEiB2VlfKu2nhV+yadyG0nS+NRlBayAVn4WTn7IfwceTut9SfrWqln+Up+iFqpV3wQKo2F5M3PhozCvSel26v59x4UQqSx//yscr1RLX04ewM

It cannot work when i call the function.

14

The viewer has a selectedEntityChanged event so you can listen for that, undo the default behavior (set viewer.selectedEntity = undefined) and then do your own custom behavior:

https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html?classFilter=viewer#selectedEntityChanged

15

Expanding on this a little further…

What he was looking for (I think) was the ability to show a button in the InfoBox and it run his custom JavaScript when clicked. The issue with that is though that, the InfoBox code is run in an iframe and isn’t in the same scope as his other code.

I’m not 100% sure if this is what Omar was suggesting or not but this is what we did with our tool. Using that selectedEntityChanged event, disable the default InfoBox component and watch that event. When an item is selected, show your own custom modal or other component/HTML that is within the same scope and not in the iframe previously mentioned. That way you have complete control over that piece and can style it to do exactly what you want it to do.

16

Do you mean like this:

dots.forEach(function(dot) {
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(dot.lon, dot.lat),
        point : {
            pixelSize : 7,
            color : Cesium.Color.STEELBLUE,
            outlineColor : Cesium.Color.BLACK,
            outlineWidth : 1.0
        }
    });
});

viewer.selectedEntityChanged.addEventListener(function(entity) {

test_function();

});