Load Czml FILE in CesiumJS

Question

I struggle to load my czml file without copying its content inside my JS script in Cesium. I would like to load the file using its url but I don't manage to do it.

var czml = "test_trace.czml";
var viewer = new Cesium.Viewer("cesiumContainer", {terrainProvider: Cesium.createWorldTerrain(), baseLayerPicker: false, shouldAnimate: true,});

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (ds) {
    viewer.trackedEntity = ds.entities.getById("path");
});

where czml is not the content of the file but the file itself. Any idea ?

Thanks a lot

Answer 1

EDIT: A code snippet was added to the original question that contains a small error. The .then clause requires a promise, which is returned by .load but not returned by .add. I recommend this phrasing instead:

Cesium.CzmlDataSource.load(czml).then(function (ds) {
    viewer.dataSources.add(ds);
    viewer.trackedEntity = ds.entities.getById("path");
});

In the above, .load returns the promise, and .then waits for the promise to resolve. The resolved dataSource is then added to the viewer, and a tracked entity is chosen. Here's a live demo with tracking.

---

Original Answer:

Make sure czml is a string containing the URL. Also, the resulting DataSource needs to be added to the viewer to become visible. Check the console for errors to see if the URL was invalid or inaccessible to the app.

Here's a live demo.

The critical lines in this demo are:

var viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

viewer.dataSources.add(
  Cesium.CzmlDataSource.load("../SampleData/simple.czml")
);

In this case, the web server is offering a CZML file at the listed relative URL.