Getting Started

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.

CesiumJS is a JavaScript library for 3D maps on the web. Cesium ion is your hub for discovering 3D content and tiling your own data for streaming. CesiumJS and ion work together to enable you to build world class 3D mapping applications.

The Cesium Ecosystem3D 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

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 Show/Live 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.

Hello World!CesiumJS defaults to Bing imagery provided by your ion account.

Breaking down the code

Include the CesiumJS library in the HTML’s head section.

<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

Create an HTML element to hold the CesiumJS widget:

<div id="cesiumContainer"></div>

Provide an access token from your ion account for access to Bing imagery:

Cesium.Ion.defaultAccessToken = 'your_access_token';

Finally, create the top-level Cesium widget, named Viewer, and tell it to use the HTML element you defined above:

var viewer = new Cesium.Viewer('cesiumContainer');

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:

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

Now when you zoom to a specific location, such as “Grand Canyon, AZ”, you’ll see the Cesium World Terrain in action:

Cesium World Terrain10 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.

var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(your_asset_id)
    })
);

Set the default view of your app to the tileset with one additional line of code:

viewer.zoomTo(tileset)

3D TilesA 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });

    var tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(your_asset_id)
        })
    );
    viewer.zoomTo(tileset);
  </script>
</body>
</html>

What’s next?

This tutorial covers only the bare essentials of Cesium. Check out the complete set of CesiumJS tutorials to learn more.