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 & 3D data, add them to a scene and share an annotated story on the web.
See the final story we’re creating in this tutorial.
Get the Melbourne Photogrammetry
Cesium Stories starts with Cesium World Terrain and Bing Imagery loaded by default, which allows you to create a variety of compelling stories. In this tutorial we’ll also 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.
Search for Melbourne Photogrammetry and click Add to my assets:
This dataset is now ready to use in your story.
Create a new story
Navigate to the Stories tab and then click the New Story button:
This will open up the Stories editor:
Add the Melbourne data to your slide
To add a dataset from your Cesium ion account to your story, click Add asset in the assets panel on the left:
Double click the Melbourne photogrammetry model to add it to your story:
Once an asset is added to your story, you can click the magnifying glass icon next to its name to move the camera to it:
You should now see the Melbourne photogrammetry model in your 3D view on the right.
This model is over 10 GB in size, but we can efficiently load it over the web because Cesium ion can tile your 3D data into 3D Tiles.
This makes it possible to create scenes with massive 3D content without losing detail.
Capture 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:
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.
Add 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 on Present in the top right. This will launch the Stories viewer in another window. You should see your Infobox content appear in the slide:
We haven’t shared the presentation yet, so this link is just for you. Close this window and go back to the editor.
Visualize 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 in the bottom left.
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:
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:
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.
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.
Explore 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:
Once you find an interesting view you’d like to save, you can click New Slide. This will save the current view into the newly created slide.
Hiding and showing assets
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.
We were curious how many other sensors were counting 0 pedestrians, so we prepared this filtered down CZML that shows just these anomalies. Download this CZML and add it to your story to see.
When you have multiple datasets in your story, you can toggle which one are visible from the assets list. Uncheck the Melbourne_Sensors_Activity asset so that only the sensors with 0 counts are visible:
There is only one other sensor that has a zero count. Can you find it and create a new slide for it?
Sharing your Story
Once you’re ready to share your presentation, click the Share button in the top right:
Give your story a title like Melbourne’s Pedestrian Sensors.
Then toggle the Enable Sharing button:
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.
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.
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:
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:
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!