checkboxes to turn on/off czml's and an imagery tileset

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>

You just simply add()/remove() the matching CZML data source from the viewer’s dataSources collection when the corresponding checkbox is ticked/unticked.

Example: https://github.com/jumpinjackie/cesium-dotnet-examples/blob/master/CesiumAspNetDemo/Views/Demo/GeoJSON.cshtml#L80

  • Jackie

Thank you Jackie, I will give this a try. I appreciate your help! Susan Renee

Jackie, Thank you so very much! Your checkbox template works to create an app that can select geoJSON, czml, and tile data – and, probably other data types. This part of my app is fully functional now. Susan Renee