Toggle CZML datasets from Ion on and off of viewer

Hello, I’m interested in adding and removing czml data sources using a checklist, dropdown menu, or even if I have to adding a bunch of buttons that add each cesium ion file to the viewer as well as being able to remove them. The reason is because I have like 20 czmls and when I load them all at the same time the app gets bogged down because there’s too much going on, so I want to be able to load them one at a time and turn them off when I don’t need them. I’ve only found talks about the remove all function for cesium ion files, but I want to be able to switch between say 10 different czml files and toggle which ones are being displayed in the viewer or not. Unfortunately the sandcastle toolbar and button load data functions don’t work with cesium/cesium ion. I’ve been looking for a solution for this for days, I haven’t found anything that explains how to do something like this using data from cesium ion or cesium code, everything seems to just say do it manually with html/js etc but then there are no examples of exactly how to do that with cesium ion. I feel like the expectation is that I should just be able to learn how to do it, and I get that, but i’m a novice and am having a hard time finding leads to get everything working and am hoping someone will be able to help beyond saying go to udemy until I can do it on my own.

see:

var promise = Cesium.IonResource.fromAssetId(xxxxx)
.then(function (resource) {
return Cesium.CzmlDataSource.load(resource);
})
//.then(function (dataSource) {
//return viewer.dataSources.add(dataSource);
//})
.otherwise(function (error) {
console.log(error);
});

I put this together from all the examples I could find, but when I switch to the dataSource function it crashes the page saying TypeError: Cannot read property ‘length’ of undefined. Also, even if it did work, idk how I would get it to do this for multiple files from cesium ion, and this is a button not a checklist.

I attempted to use a solution using Jquery earlier but was unsuccessful in that as well, but it was my first time every trying to use Jquery at anything.

according to this post: How to use Cesium Sandbox features?

I can use the sandcastle features in my app if I add https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/templates/bucket.css
https://sandcastle.cesium.com/Sandcastle-header.js
to my app. I will attempt to see if this is true as it may provide a way to do what I am trying to.

Update Edit: So adding the sandcastle-header.js to my app does allow me to make the dropdown menu like in sandcastle. I was previously under the impression that this wasn’t doable because of this post: Looking for documentation on Sandcastle Toolbar options - #2 by Hyper_Sonic

@mhernandez624

I apologize for the delayed response! However, I am happy to see that you were able to resolve the question yourself :grinning: I looked over your solution and it seems robust - if other users have similar questions, I will refer them to this thread. Let me know if you have any other questions or concerns!

-Sam