Skip to main content

Create an Interactive 3D Presentation with Cesium Stories

This tutorial will walk you through how to use Cesium Stories to create an interactive 3D presentation showing how Melbourne tracks pedestrian activity.

You’ll learn how to:

  • Upload your own 2D and 3D data
  • Add your data to a scene
  • Share an annotated story on the web
Stories introduction infobox

See the final story we’re creating in this tutorial.

1Get the Melbourne Photogrammetry

Cesium Stories includes Cesium World Terrain, Cesium OSM Buildings, and Bing Imagery by default. These global layers provide real-world context to your story and act as a base on which to layer your own data. In this tutorial we’ll be adding a 3D model of the city of Melbourne, Australia.

The first step is to add the 3D Melbourne tileset to your Cesium ion account. This model is already available on the Cesium ion Asset Depot, where we curate data that you can use in your stories.

Create a Cesium ion account if you don’t already have one. Once you’re logged in, navigate to the Asset Depot.

Search for Melbourne Photogrammetry and click Add to my assets:

Stories introduction add asset

This asset is now ready to use in your story.

2Create a new story

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

Stories introduction new story button

This will open up the Stories editor:

Stories introduction Stories interface

3Add the Melbourne data to your slide

Let’s first take a look at the area where our story will take place. Type “Melbourne” in the search bar in the top right and select the first result:

Stories introduction Melbourne search

You’ll see all the buildings in Melbourne from the Cesium OSM Buildings layer. Here you can click any building to view its feature data, like name, height, or address if it contains that information.

Stories introduction select Melbourne building

We’re going to replace this buildings layer with a high resolution drone capture of the city of Melbourne, so go ahead and delete Cesium OSM Buildings from your story using the assets panel on the left:

Stories introduction delete buildings

To add a dataset from your Cesium ion account to your story, click Add asset:

Stories introduction add asset in story

Double-click the Melbourne photogrammetry model to add it to your story:

Stories introduction select asset

You now have the Melbourne photogrammetry model in your story.

Information

This model is over 10 GB in size, but we can efficiently load it over the web because Cesium ion tiles 3D data into 3D Tiles.

This makes it possible to create scenes with massive 3D content without losing detail.

4Capture the skyline

To set the scene for our story, we’d like this first slide to start with a nice view of the city. Go ahead and explore the photogrammetry model in the 3D view using your mouse or touch screen. The camera controls in the top right corner allow you to rotate and tilt the camera, as well as zoom in and out.

Here’s the view we ended up with for our story:

Stories introduction skyline

Once you’re happy with your view, click the Capture View button at the top.

At any time you can press the home icon in the top right camera controls to reset the camera back to the saved view for the current slide.

5Add infobox content

Let’s add some content to introduce the reader to our story. Give your slide a title like:

The world’s most livable city

And then copy the following text and paste it into the infobox input:

Melbourne, Australia was ranked the most livable city in the world according to The 2015 Economist Intelligence Unit ranking.

A big factor in this ranking is how walkable the city is, which Melbourne excels at.

How does the city ensure it stays walkable as it evolves? By monitoring pedestrian activity!

This content shows up in your slide when you present your story, this is a good time to see how things look so far.

Click Present in the top right. This will launch the Stories viewer in another window. You should see your infobox content appear in the slide:

Stories introduction infobox

We haven’t shared the presentation yet, so this link is just for you. Close this window and go back to the editor.

6Visualize the pedestrian sensors

For the second slide, we want to overlay the locations of all the pedestrian sensors that the city of Melbourne has on top of this 3D map. You can do this by uploading a KML, GeoJSON, or CZML dataset that marks these locations.

Uploading data to your story

At any time in the Stories editor you can drag and drop a dataset to add it to your Cesium ion account. Any data you upload gets stored in your Cesium ion account, where you can re-use it across slides or different stories.

First, click New Slide and create a new Map slide:

Stories introduction new map slide

Then download this CZML file that contains the locations and metadata for the sensors. Drag and drop it anywhere in the editor.

Finally press Upload as shown below:

Stories introduction upload

Once the file finishes uploading, click the magnifying glass icon next to its name in the assets list to fly the camera to it. You should now see an overview of all 50 locations of the sensors across the city:

Stories introduction overview

Click Capture View. You can now fill out the title and infobox on this slide with some information about these sensors.

Here’s what we had in our slide:

Title: The pedestrian counting system

Infobox: The city has around 50 of these “pedestrian sensors” strategically placed around the city, marked here in red.

These are just simple infrared beam sensors, not cameras. They’re placed on street lamps or under awnings to keep count of how many people pass underneath.

Information

Cesium Stories auto-saves by default, so you won’t lose any written content or data you’ve added.

Camera views save only when you click Capture view, and not automatically like everything else, to allow you to move the camera and explore the scene without accidentally overwriting the views you’ve choreographed for your audience.

7Explore your dataset

The CZML file we added doesn’t just mark the locations of the sensors. It also has labels for the name of each sensor, and how many pedestrians it has counted since 2009. We’ve set up these labels to appear when the camera approaches them.

Try zooming in to any of the red spots in the city to see this metadata:

Stories introduction metadata

Once you find an interesting view you’d like to save, you can create a new map slide. This will save the current view into the newly created slide.

Click to inspect feature data

Here is where we noticed something odd - that 231 Bourke St sensor is showing 0 pedestrian counts. This seems very strange given that this is the business district of Melbourne, and all the sensors around it are counting millions of people.

To figure out what’s unique about this sensor, try clicking on it then click the View info button to see all its data.

Stories introduction feature picking

We can see from the installation date that this is one of the newest sensors. It was installed in the same week we originally pulled this dataset! So it must not have had a chance to have its reading uploaded.

Stories introduction toggle

There is only one other sensor that has a zero count. Can you find it and create a new slide for it?

8Sharing your story

Once you’re ready to share your presentation, click the Share button in the top right:

Stories introduction share

Give your story a title like Melbourne’s Pedestrian Sensors.

Then toggle the Enable Sharing button:

Stories introduction enable sharing

You can now send this URL to anyone to show your presentation in the Stories viewer.

You can continue to edit your story even after enabling sharing and it will retain the same URL. Your readers will automatically get the new version the next time when they reload that page.

You can easily embed your story in your web pages by clicking on the Embed button and copying that HTML code. This can be an easy way to add a 3D geospatial presentation to your WordPress site, for example.

If you would like your story to automatically play through its slides when someone views it, add the characters &play to the end of your story's URL.

You can turn off sharing at any time by clicking the Share button again and turning it off. The story link will go back to only being accessible to you.

Next steps

Congratulations! You now know how to combine different 2D & 3D datasets in a single scene, save camera views and string together a narrative that you can share on the web.

There’s a lot more that you can do with Stories. Here’s a couple ideas:

Measurements

Stories comes with a set of high-fidelity measurement tools for light-weight analysis for measuring distance, height, slope, and area. You can access these tools when presenting in the Stories viewer and clicking on the measurements icon to expand the toolbar. Here we’re measuring the area of ME bank’s rooftop:

Stories introduction area

Explore more of Melbourne’s open data

The City of Melbourne makes a lot of datasets openly available on their data portal. You can find datasets on everything from bike use, to the location of all public BBQ’s, and even all sighting of butterflies throughout the year!

If you have any feedback, questions, or made something cool that you want to share, we’d love to hear from you! Check out a full list of formats that you can upload to use in your 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.