Learn to build a Cesium app with global terrain, imagery, 3D Tiles, and geocoding.
The Cesium app you are about to build. Click to interact.
3D data is optimized for streaming by Cesium ion and visualized in CesiumJS.
Your first app
Below is the source code for your first Cesium application:
Web applications require web servers, and CesiumJS is no different. To keep things simple, this tutorial skips the local server setup and uses Glitch, an online IDE for web development. Create a new Glitch project by clicking here. Once Glitch loads, ignore the template instructions and instead click on
index.html, delete the entire contents, and replace it with the code above.
Click the button and it will open a new window with your Cesium app in action. This view will automatically be updated as you modify the code.
CesiumJS defaults to Bing imagery provided by your ion account.
Breaking down the code
Include the CesiumJS library in the HTML’s
Create an HTML element to hold the CesiumJS widget:
Provide an access token from your ion account for access to Bing imagery:
Finally, create the top-level Cesium widget, named
Viewer, and tell it to use the HTML element you defined above:
Adding Cesium World Terrain
Cesium World Terrain is a high resolution global terrain asset included with your ion account. Add it to your Cesium app by replacing the line that creates the Viewer widget with the following:
Now when you zoom to a specific location, such as “Grand Canyon, AZ”, you’ll see the Cesium World Terrain in action:
10 meter resolution terrain of the Grand Canyon
Loading your own data
You can upload your own data to Cesium ion and tile it into 3D Tiles, an open specification for streaming massive heterogeneous 3D geospatial datasets. For this tutorial, we’ve provided a sample KML/COLLADA package with a single building. Use it to create a 3D Tiles tileset and add it to the app. Download it by clicking here.
Navigate to ion and drag and drop the file you just downloaded, AGI_HQ.kmz, anywhere on the page. Hit upload.
Once the upload finishes, ion will start the tiling process and report progress on the upper right. Once tiling is complete, and with your new asset selected on the left, press the copy() button next to the sample code on the bottom right of the page. Paste the result into Glitch, after the line that creates the Viewer.
Set the default view of your app to the tileset with one additional line of code:
A 3D Tiles asset loaded into CesiumJS. Your own asset will look different.
Congratulations! You have created your first Cesium app!
Here’s the completed example for reference:
Now that you know how to set up a basic Cesium app, you can browse through the code examples on Sandcastle to explore all the features and some common use cases.