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.
Below is the source code for your first Cesium application:
Since you’re logged into Cesium ion, your default access token is being used in the above code.
your_access_token placeholder in the above code. Create a Cesium ion account to use the 3D content in this tutorial. Sign up here and the above sample code will automatically update with your token. If you already have an account, sign in.
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.
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. Since you’re already logged into Cesium ion, the default access token from your account is automatically being used in this tutorial:
Finally, create the top-level Cesium widget, named
Viewer, and tell it to use the HTML element you defined above:
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
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:
This tutorial covers only the bare essentials of Cesium. Check out the complete set of CesiumJS tutorials to learn more.