How create completely new(custom) infobox and connect kml description

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

Existing infobox has limit. e.g) design limit, javascript is not working in infobox bcs of security problem

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

No code

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I wanna create new custom infobox

and kml description into custom infobox

What code i have to use??

4. The Cesium version you're using, your operating system and browser.

1.54

2

The InfoBox in Cesium is just an HTML element placed on top of the canvas:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/InfoBox/InfoBox.js#L35

Here’s the CSS for it:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/InfoBox/InfoBox.css

You can just create your own element in the page, and just grab the properties you need from the Cesium entities and populate the fields. That way you have complete control over how the UI works.

3

Thank you Omar i will try that

2019년 4월 12일 금요일 오후 11시 12분 9초 UTC+9, Omar Shehata 님의 말:

4

Hi Omar,
Thanks for the explanation. I have tried to implement this, but I couldnt succeed, how should I approach to this? For example I want to remove the camera icon from the infobox, Should I create new Cesium.infoBox object for this?

5

You would need to either modify the source or create a new custom class that’s similar to the current InfoBox classes.

Alternatively, you can detect when an entity is selected, disable the default behavior, and then make whatever custom behavior happen in your app. This issue documents how to disable the trackedEntity behavior: https://github.com/CesiumGS/cesium/issues/8592

But you can do something similar for the selectedEntity behavior.

6

Hi

I think you can do this

------------ infobox_style.css ---------------

button.cesium-infoBox-camera {
display:none;
}
------------ your_script.js ---------------

viewer.infoBox.frame.addEventListener(‘load’, function () {

var cssLink = frame.contentDocument.createElement(‘link’);

cssLink.href = Cesium.buildModuleUrl(’ infobox_style.css(Your CSS file url)');

cssLink.rel = ‘stylesheet’;

cssLink.type = ‘text/css’;

frame.contentDocument.head.appendChild(cssLink);
},false)

``

1 Like