Please help on creating a table of checkboxes for turning on/off a set of czml's ...and also a checkbox for an imagery tileset. How do I write the html header, code that can loop through my files to set up the checkboxes?
Also, it would be better to be able to compress/expand the whole checkbox table because it will cover a lot of the globe.
var files = ['file1.czml','file2.czml',...'fileN.czml','billboards.czml','../imagery-tileset/1.0.0/tileset/'];
var data1 = Cesium.CzmlDataSource.load('file1.czml');
viewer.dataSources.add(data1);
...
var dataN = Cesium.CzmlDataSource.load('fileN.czml');
viewer.dataSources.add(dataN);
var billboards = Cesium.CzmlDataSource.load('billboards.czml');
viewer.dataSources.add(billboards);
noaa =
layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
url: '../imagery-tileset/1.0.0/tileset/',
fileExtension: 'png',
maximumLevel: 8,
credit: 'NOAA'
}));
noaa.show = true;
noaa.show = false;
//Want to create a compressible/expandable table of checkboxes to
//turn on anything that is checked on
//turn off anything that is checked off
Sandcastle.addToolbarMenu([ //this may be wrong
{
text : 'dataset one',
onselect : function() {
//turn on anything that is checked on
//turn off anything that is checked off
}
}, {
text : 'dataset two',
onselect : function() {
},...{
text : 'dataset N',
onselect : function() {
//turn on anything that is checked on
//turn off anything that is checked off
}, {
text : 'billboards',
onselect : function() {
//turn on anything that is checked on
//turn off anything that is checked off
}, {
text : 'imagery layer',
onselect : function() {
//turn on anything that is checked on
//turn off anything that is checked off
}], 'interpolationMenu');
In my html header, I'm not correctly repurposing the "Imagery Layers Manipulation" Sandcastle example in order to assign checkboxes to czml files:
<style>
@import url(Sandcastle/templates/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
#toolbar table tr {
transform: translateY(0);
transition: transform 0.4s ease-out;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table><tbody data-bind="foreach: files">
<tr data-bind="css: { up: $parent.upFiles === $data, down: $parent.downFiles === $data }">
<td><input type="checkbox" data-bind="checked: show"/></td>
<td>
<span data-bind="text: name, visible: !$parent.isSelectableFiles($data)"></span>
<select data-bind="visible: $parent.isSelectableFiles($data), options: $parent.baseFiles, optionsText: 'name', value: $parent.selectedFiles"></select>
</td>
</tr>
</tbody></table>
</div>