Skip to main content

Visualizing Time Dynamic Data with Cesium Stories

This tutorial will walk you through how to use Cesium Stories to visualize a drone flight scenario. You can use the same concepts you’ll learn here to visualize any animated data, whether it’s visualizing satellite orbits, house prices, or changing landscapes.

You’ll learn how to:

  • Upload time-dynamic CZML (JSON) data to Cesium ion for convenient access by your app
  • Follow 3D objects and use time controls to adjust playback of their movement
  • Share an annotated story on the web

See a finished demo of the story you’re about to create.

1Preparing your time-dynamic data

Cesium Stories supports animated KML and CZML files. For this tutorial we’re going to use a CZML file that was exported from Systems Tool Kit (STK). STK is the leading software for time dynamic analysis in the aerospace and defense industry.

Download this zip file containing the CZML and a set of 3D models.

Then sign up or login to Cesium ion.

Finally, upload this zip file to your account by dragging and dropping it in your dashboard.

Choose KML, CZML, or GeoJSON as the data type:

Time Stories upload CZML

Click Upload.

Once it’s done, you’ll see a preview of this asset in your dashboard:

Time Stories asset preview

The preview window on the right has a timeline you can interact with by clicking or dragging. This is a good way to quickly inspect all the time-dynamic assets in your account.

Now that you’ve uploaded a CZML to Cesium ion, you’re ready to use this asset in a Cesium Story.

Information

What is CZML?

CZML is a JSON format for describing a time-dynamic graphical scene, primarily for display in a web browser running Cesium. It can be used to display 3D models, lines, labels and other types of data. Learn more in the CZML guide.

2Creating a new story

Navigate to the Stories tab and then click the New Story button:

Stories introduction new story button

This will open the Stories editor. Click Add asset in your assets list on the left:

Styling Stories add asset

Select the STK_Drone_Scenario asset, and then click Add.

Time Stories select asset

To actually see your asset, click on the magnifying glass icon  next to the asset’s name to fly the camera to it.

Adjust the camera so that the entire path is in view:

Time Stories slide one

Once you’re happy with it, click Capture View to save this slide.

3Following an object

We’re going to set the camera to follow one of the moving objects.

Click the New Slide button in the top left to create a new Map slide. Then click on the plane and choose Follow plane from the menu:

Time Stories follow plane

This will lock the camera to that object. Notice that clicking and dragging in the scene now rotates the camera around the object instead of panning.

You can exit this mode by clicking the Stop Following button in the top left, under the Capture View button.

Click Capture View to save this camera state. This is now a good time to click Present to see how these two slides look so far.

4Controlling playback speed

So far we’ve set the camera to follow the plane as it moves, but its current speed makes it hard to see what’s going on. We can adjust this speed by editing the Play time at the bottom of the animation settings. Try setting it to a higher value like 200:

Time Stories play time

This allows you to control how long it takes for each slide to play its content.

You can see how this new speed feels either by going into present mode again, or by clicking the play button in the timeline.

5Setting the start and stop time

Instead of playing the entire path, we can focus on specific moments of interest by adjusting the start and stop time of each slide.

Create a new map slide. Then drag the white start and end markers on the timeline so that it starts right around the moment when the plane is in range of the vehicle:

Time Stories drag slider

You can adjust the start and time visually in the timeline like this, or if you know the exact moment you want to show, you can type in the time by clicking on the start or stop time and using the date-time picker:

Time Stories date picker

Set the play time to 10 seconds for this slide. Click Capture view.

Test out how this looks either in present mode or by clicking the play button in the editor.

Information

When following an object, the camera is automatically positioned, but you still have control over the camera’s angle. So if you click Capture View with the camera pointing straight down at the object, it’ll stay pointing straight down as it follows it. This way you can be following the plane while keeping the vehicle in sight.

6Follow the vehicle

For our last slide, we’re going to follow the vehicle on the ground instead of the plane. This way we can see exactly what was happening during that moment when the plane was overhead from a different perspective.

Create a new map slide. Click on the vehicle and select Follow Vehicle:

Time Stories follow vehicle

For this slide, we’d like to see how fast this vehicle was moving in real time. You can do this by making sure that your play time matches the difference between the start and stop times. Below, the stop time is set to 10 seconds after the start time. The play time is also set to 10 seconds:

Time Stories vehicle final

Once you’re done, click Capture view.

7Create a title slide

To wrap this up, we’re going to great a title slide. This is a great way to introduce the audience to your story or add your information as the author.

To create a title slide, click New slide and then select Fullscreen slide:

Time Stories fullscreen slide

Give your new fullscreen slide a title like: Visualizing time dynamic data in Cesium.

Give it a description like:

This is a Cesium Story following this tutorial: https://cesium.com/learn/ion/stories-time-dynamic/

Made by: (insert your name here)

Time Stories fullscreen preview

You can optionally change the background color, or upload a background image here to customize your title slide.

Once you’re happy with it, re-order the slides so that your story starts with this title slide by dragging it to the top:

Time Stories re order

Next steps

You now know how to upload time-dynamic data to Cesium Stories, set up camera views to follow different objects, and control the playback. Try this out with your own time-dynamic data.

If you need help getting your time dynamic data into Cesium Stories, reach out to us.

See what else you can do with Stories.

Content and code examples at cesium.com/learn are available under the Apache 2.0 license. You can use the code examples in your commercial or non-commercial applications.