Struggling to display and load a CZML File using Webpack and Cesium

Hello Cesium community,

I am currently working on the development of a tool to take outputs from Orekit :artificial_satellite: (https://www.orekit.org) to translate them into a CZML File then display the file with Cesium.

So I followed this great tutorial that helped me display in a first time an html page like this :

Here is the configuration I used to get this result :
node version 22.2.0

Here is the zip file of the project

I want to draw your attention on the following file : index.js :

import {
  Ion,
  Viewer,
  Terrain,
  createOsmBuildingsAsync,
  Cartesian3,
  Math,
  Cesium3DTilesInspector,
  CzmlDataSource,
  DataSource,
} from "cesium";
import "cesium/Widgets/widgets.css";
import "../src/css/main.css";

// Your access token can be found at: https://cesium.com/ion/tokens.
Ion.defaultAccessToken = "My token";

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer("cesiumContainer");
const ISSModel = await Cesium.IonResource.fromAssetId(2612223);

const czmlDataSource = Cesium.CzmlDataSource.load("C:/Users/jleblond/Documents/git/Webpack/CesiumTest/Output.czml");
viewer.dataSources.add(czmlDataSource);

My problems are :

  • It seems that even if I load the czml file it did not display on my page at the end
  • I tried to load in the same time a 3D model of the ISS that I got from this page and uploaded it on my assets on Cesium Ion but it did not display likethe rest is supposed to

Any type of help would be appreciated

Hey @Zudo glad you’re exploring CeisumJS and you found the Webpack tutorial (mostly) helpful!

I tried to load in the same time a 3D model of the ISS

It doesn’t look like you’re actually adding the asset to the viewer. You can do that with this code

const ISSModel = await Cesium.IonResource.fromAssetId(2612223);
const entity = viewer.entities.add({
  model: { uri: ISSModel },
});

It seems that even if I load the czml file it did not display on my page at the end

I think this is an error with the path you’re providing to load from and possibly not setting up Webpack to serve static files. By default webpack hosts files from a public directory at the project root. Create this directory and put your czml file in there then reference the path relative to that public directory. I think it should look something like this:

const czmlDataSource = Cesium.CzmlDataSource.load("./Output.czml");
viewer.dataSources.add(czmlDataSource);
1 Like

Thank you @jjspace for your reply !

Yes the tutorial really helped a lot to understand all the basics, it was really good to start fresh.

So I added the CZML file in a directory named “public” at the project root and I added the line to load with the relative path and it seems like it didn’t change anything :frowning: .

and possibly not setting up Webpack to serve static files.

Is there a way to change that ?

Thank you again, I hope we will find a solution

@Zudo sorry to here it’s not working.

Starting from the cesium-webpack-example I was able to load a czml file by creating a webpack-5/public directory and including the file in there. Then in the webpack-5/src/index.js loading it with the CzmlDataSource

You can read more about how webpack handles public assets here or static assets in the bundle here

Code to copy
import { Viewer, Terrain, CzmlDataSource } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";

// CesiumJS has a default access token built in but it's not meant for active use.
// please set your own access token can be found at: https://cesium.com/ion/tokens.
// Ion.defaultAccessToken = "YOUR TOKEN HERE";

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer("cesiumContainer", {
  terrain: Terrain.fromWorldTerrain(),
});

const czmlDataSource = CzmlDataSource.load("./simple.czml");
viewer.dataSources.add(czmlDataSource);

This uses the sample data from our CZML Sandcastle

1 Like

Thank you for you answer !

I took the code to copy and it works ! I now have to change only the CZML.

Here is some kind of results that I got :

It seems that the 3D model is still not working, I don’t know why, but I will look into

Thank you again for your help !

1 Like