Cesium: Theming the InfoBox -
i have seen few examples on google groups demonstrate how modify css of infobox. in particular example, javascript used append css link head of 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 changes style of markup.
at best, have been able wrap contents of infobox iterating through entities in .then function call subsequent loading geojson dataset. when wrapping contents, can set style values readily apparent in resulting markup.
var datasource = cesium.geojsondatasource.load('../data/mgeojson.json').then(function(data) { viewer.datasources.add(data); var entities = data.entities.values; (var = 0; < entities.length; i++) var entity = entities[i]; if (entity.properties.hasownproperty("description")) { entity.description = '<div style="height: 360px;">' + entity.properties.description + '</div>'; } } }
this useful, not satisfy requirements of app.
could provide additional insight overriding theme of infobox, without having iterate on entities modify value of description properties?
the original solution here wasn't working, because infobox iframe has not yet asynchronously loaded when trying modify it.
instead, can add load
listener iframe, 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 iframe become ready receive modification, , applies it.
Comments
Post a Comment