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:

  • Create a story with multiple scenes
  • Include Google Photorealistic 3D Tiles or additional 3D data in your story
  • Upload your own 2D data and add it to a scene
  • Share an annotated story on the web
Stories introduction infobox

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

1Create a new story

Create a Cesium ion account if you don’t already have one.

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

2Travel to Melbourne

Cesium Stories includes Cesium World Terrain, Cesium OSM Buildings, and Bing Imagery by default. You can also access Photorealistic 3D Tiles from Google Maps Platform. 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 interacting with 3D data for the city of Melbourne, Australia.

Let’s first take a look at the area where our story will take place. Type “Bourke Place, Australia” 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

3Capture the view

Click the Capture View button at the top. This will save your location in case you close your story while you're working.

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.

The controls in the Cesium Stories editor viewport, including the capture view button, location search box, and the camera controls
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.

4Add Melbourne data to your slide

Remove Cesium OSM Buildings

We’re going to replace this buildings layer, so go ahead and delete Cesium OSM Buildings from your story using the assets panel on the left:

Stories introduction delete buildings

Next, you'll add new 3D data for the city of Melbourne. You can choose to include Photorealistic 3D Tiles from Google Maps Platform or a high resolution drone capture of the city of Melbourne.

Alternative 1: Include Photorealistic 3D Tiles for the entire globe

Adding Photorealistic 3D Tiles in Cesium Stories is easy: In the Terrain dropdown, select Google Photorealistic 3D Tiles.

The Terrain dropdown in the Cesium Stories editor, showing Google Photorealistic 3D Tiles selected.

When you make this selection, other imagery layers that were previously included in Assets are automatically deselected and removed from the view because they would be redundant to Photorealistic 3D Tiles.

Information

Google Photorealistic 3D Tiles is currently available as an experimental release. Learn more.

Alternative 2: Add high-resolution drone capture of Melbourne

The first step is to add a 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.

Click on the Cesium ion icon in the upper left of the screen to exit Cesium Stories.

The Cesium ion icon in the upper left of the screen while in the Cesium Stories editor

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.

Reopen your story in the story editor, and 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.

5Capture 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.

6Add 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.

7Visualize 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.

8Explore 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?

9Sharing 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.