Cesium: Theming the InfoBox

Question

I have seen a few examples on Google Groups which demonstrate how to modify the css of the infobox. In this particular example, javascript is used to append a css link to the head of the document:

https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI

var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);

This, however, has not resulted in any changes to the style of my markup.

At best, I have been able to wrap the contents of the infobox by iterating through the entities in the .then function call subsequent to loading a geoJson dataset. When wrapping the contents, I can set style values which are readily apparent in the resulting markup.

var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data)  {
  viewer.dataSources.add(data);
  var entities = data.entities.values;
  for (var i = 0; i < entities.length; i++) 
    var entity = entities[i];
    if (entity.properties.hasOwnProperty("description")) {
      entity.description = '<div style="height: 360px;">' + entity.properties.description
      + '</div>';
    }
  }
}

This is useful, but does not completely satisfy the requirements of my app.

Could someone provide additional insight into overriding the theme of the infobox, without having to iterate over entities to modify the value of their description properties?

Answer 1

The original solution here wasn't working, because the infoBox is an iframe that has not yet asynchronously loaded when you were trying to modify it.

Instead, you can add an load listener to the iframe, like this:

var viewer = new Cesium.Viewer('cesiumContainer');
var frame = viewer.infoBox.frame;

frame.addEventListener('load', function () {
    var cssLink = frame.contentDocument.createElement('link');
    cssLink.href = Cesium.buildModuleUrl('Path/To/Your/CSS/File.css');
    cssLink.rel = 'stylesheet';
    cssLink.type = 'text/css';
    frame.contentDocument.head.appendChild(cssLink);
}, false);

This waits for the iframe to become ready to receive the modification, and then applies it.

Answer 2

For what it's worth, I've found success in modifying the theme of the infobox by simply importing my css files in the head of the document. I'm not sure why I wasn't able to modify it directly with stylesheets, as it wasn't previously affecting the infobox's appearance, and this issue was mirrored in the posts that I found in the cesium-dev Google Group. Regardless, it seems to be working just fine now.