Formatted CZML examples

Hi everyone,

We’ve been having troubles properly formatting a CZML file for use in CesiumJS. This CZML would be hosted on Ion, loaded with this example dataset from our vehicle (in this instance, an underwater ROV).

We want to be able to display current sensor data as a billboard above the ROV as it moves along the recorded path, but have been struggling with how to properly format the CZML for visualization of these time-synchronized data. This includes lat/long, depth, heading, and a variety of sensor data/notes at any one second.

Ideally the model would also be oriented via the heading value so it points in the right direction. Can anyone help with an example of how we could achieve this?

We’ve been using the CZML3 python library for this.

Hi @Jonathan_Fiely, thanks for the question!

I haven’t done any czml generation myself so I can’t help as much on that front but I can show how it’s used in CesiumJS and hopefully that can help guide the generation.

Our Flight Tracker tutorial (sandcastle version with an extra billboard here) shows off how to build what I think you want to achieve more on purely the CesiumJS side.

The CZML path sandcastle shows off how to use purely CZML to draw a path and billboard along a hang-glider’s path over time. I modified this slightly to have a model that is oriented along the path in this sandcastle which I think is closer to what you want. Hopefully that helps guide you?

If you want to set up orientation based on an actual heading value instead of the velocity interpolation between points I believe that’s possible but may require some extra work. I’d check out the CZML spec for orientation.

Lastly I do believe it’s possible to upload referenced models alongside the CZML into ion but someone from the ion team would have to confirm the exact way to do that, @mdc9001 can you confirm?

Hi there,

Thank you so much for your response.

Given that CZML is the specific markup language for Cesium, I do request that you please work with your team to provide a formatted example of a CZML that is optimized to A) work with the data example I loaded (or similar) and B) provide a step-by-step guide on how to access these data if uploaded to Cesium Ion, specifically how to call that asset once uploaded to Cesium Ion.

Hopefully this is a reasonable request given CZML as the officially supported markup language and features with Ion.

We have gone through all the above Cesium sandcastle examples indicated above but they do not address these use-cases (ie, ‘CZML path’ sandcastle uses an embedded call w/o metadata, or call the asset from Ion in JS with as asset ID and associated key set to the proper permissions).

Finally, I am willing to have our data be used directly by Cesium’s team to create this as an example/resource for other users of CesiumJS to view data in this fashion. I imagine that this is a common use-case for how many users of Cesium would use this tool. Here is a model that can be used hosted on our Ion (the duck):
Asset ID
Token for this model only

Looking forward to your reply,

  • J

Hi @Jonathan_Fiely,

Sorry to hear that wasn’t the info you were looking for.

It sounds like a missing piece of the puzzle for here is how to use a Cesium ion asset in a CZML file. Is that correct? If that’s the case, I would say you have two options depending on your needs:

  1. Follow Step 1: Preparing your time-dynamic data from our existing tutorial to upload the entirely payload to Cesium ion
  2. Programmatically set the model at runtime to a Cesium ion asset in your CesiumJS app using IonResource.fromAssetId to get the URL endpoint.

Is there anything else that’s particular unclear? If so, I can document a feature request for more learning material on the subject.

Thank you for your offer to let us use your data as a reference!

Hi - thanks, that was helpful. I might suggest Cesium make that guide more visible in the context of the CesiumJS pages, as that is currently embedded as a “Stories” tutorial and difficult to find (at least when I was searching for documentation).

Could use additional help: I’m not sure if I’m not formatting it correctly via the CZML or displaying it via JS, but I haven’t had any luck getting the ROV to be displayed in the correct orientation. Even with all values (heading, pitch, roll) set to 0, the model is oriented down and to the right.

I believe I’ve determined that it is not the model’s orientation. The behavior is also the same if I use my own asset (3163466) or the ‘plane’ asset (3203209) provided by Cesium in the tutorial.

I believe that the local CZML file referenced here might have the answers if available: Cesium Sandcastle

I’ve attached a CZML file and example JS for troubleshooting.

NA156_H2021_2025-03-11_1246.czml (39.4 KB)
CesiumJS_Sandcastle.zip (5.3 KB)

Many thanks,
Jonathan

Hey @Jonathan_Fiely, glad those resources helped!

I’m not sure if I’m not formatting it correctly via the CZML or displaying it via JS, but I haven’t had any luck getting the ROV to be displayed in the correct orientation.

When I swapped out the CZML in your example sandcastle with the sample file you provided, hosted locally, I can see the orientation changing over time. Whether it’s the “correct” orientation I could not say but it does look like it’s working.

czml-orientation

Trying to dig in I did notice that when I load the asset from ion it looks like the orientation property array only has 10 elements which is not a multiple of 4. It’s also not enough for all the positions over time. The orientation is a sampled property and I believe when it can’t find a value for the given timestamp it is undefined or reverts to the default. This is probably why it’s always pointing down for you with that dataset. I’d try and validate that your data is getting generated correctly.

Hopefully that helps but if it’s still not working I’m happy to try looking at more czml files.

Also as a side note, if you want to see the “local” files loaded from any sandcastle they’re all in the repo for CesiumJS under the Apps/SampleData directory

Blockquote Also as a side note, if you want to see the “local” files loaded from any sandcastle they’re all in the repo for CesiumJS under the Apps/SampleData directory
^ awesome, thanks!

I’ll keep having a look, appreciated.