Load specific part of CZML file according to ID

Question

In the Cesium demo here, you have the option to select choose what data you want to view by simple changing where you are reading the data from.

I want the "Satellites" button to only display those with "Satellite" in the id from the CZML file and ignore the rest, currently my code looks like this:

Sandcastle.addDefaultToolbarButton("Satellites", function () {  
    Cesium.CzmlDataSource.load("../SampleData/simple.czml").then(function(dataSource) {
    viewer.clock.multiplier = 1;
    var entity = dataSource.entities.getById("Satellite");

    viewer.dataSources.add(entity);
  });
  viewer.camera.flyHome(0);
});

However when I try this nothing is shown. I also tried just with the Vehicle (only has 1 entity in it and ID is exactly "Vehicle") so I could check if it is getting the data properly however I got this error: "TypeError: Cannot read properties of undefined (reading 'length')" when clicking on the vehicle button

Here is my for the Vehicle section:

Sandcastle.addToolbarButton("Vehicle", function () {
  Cesium.CzmlDataSource.load("../SampleData/Vehicle.czml").then(function(dataSource) {
    viewer.clock.multiplier = 1;

    var entity = dataSource.entities.getById("Vehicle");
    viewer.dataSources.add(entity);
  });
  
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
    orientation: {
      heading: 6,
    },
  });

Answer 1

Here's a corrected Sandcastle demo.

Some issues in the original:

• You have a bad ID in one "Satellite" instead of "Satellite/Geoeye1", so the entity was not found.

• You shouldn't pass an individual entity to viewer.dataSources.add(), instead use viewer.entities.add() for this.

• The most important, often overlooked problem, is the clock was set wrong. These entities exist for a range of time (several years ago when the sample scenario was first created), and they don't exist in the present. Normally when adding a dataSource to the viewer, the clock automatically updates, but in this case adding a single entity does not do that, so the clock shows the current time instead of a time when the entity exists. There are several ways to fix this, but I chose this one:

    viewer.clock.currentTime = dataSource.clock.startTime;