Tutorial: Display a scene

Learn how to display a Scene with a basemap layer and terrain provider using CesiumJS.

You can display a map with Cesium by using an ArcGIS map tile service. The ArcGIS:Imagery map tile layer contains sattelite imagery with global coverage that can be used in conjunction with world terrain.

In this tutorial, you display a scene of the Santa Monica Mountains using the ArcGIS:Imagery base layer and Cesium world terrain.

This code is used as the starting point for the other CesiumJS tutorials.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.

Steps

Create a new pen

Go to CodePen to create a new pen for your application.

Add HTML

Define an HTML page to create a scene that is the full width and height of the browser window.

In CodePen > HTML, add HTML and CSS to create a page with a div element called cesiumContainer.

This HTML will create a page with a div that is the full width and height. The cesiumContainer div is the element used to display the scene.

The <!DOCTYPE html> tag is not required in CodePen. If you are using a different editor or running the page on a local server, be sure to add this tag to the top of your HTML page.

Use dark colors for code blocks
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>

    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

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

  </body>
</html>

Add script references

In the <head> tag, add CDN references to the CesiumJS JavaScript and CSS libraries.

Expand
Use dark colors for code blocks
    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
Expand

Get a Cesium ion access token

All Cesium applications must use an access token provided through Cesium ion. This token allows you to access assets such as Cesium World Terrain in your application.

Go to your Cesium ion dashboard to generate an access token. Copy the key to your clipboard.

In the <body> tag of your code, create a <script> element.

Expand
Use dark colors for code blocks
  <body>

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

    <script>

      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    </script>
Expand

Create a cesiumAccessToken variable and replace YOUR_CESIUM_ACCESS_TOKEN with the access token you copied from the Cesium ion dashboard.

Expand
Use dark colors for code blocks
    <script>

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    </script>
Expand

Configure Cesium.Ion.defaultAccessToken with the Cesium access token to validate the application.

Expand
Use dark colors for code blocks
    <script>

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    </script>
Expand

Get an ArcGIS API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

Go to your developer dashboard to get an API key. Copy the key to your clipboard.

Create an apiKey variable to store your API key. Replace YOUR_API_KEY with the API key you previously copied from the developer dashboard. You will need to use this API key each time you access an authenticated ArcGIS service.

Expand
Use dark colors for code blocks
    <script>

      const apiKey = "YOUR_API_KEY";

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    </script>
Expand

Set the defaultAccessToken included with Cesium to authenticate requests to the basemap styles service.

Expand
Use dark colors for code blocks
    <script>

      const apiKey = "YOUR_API_KEY";

      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    </script>
Expand

Create a scene

Create a Viewer that accesses the World Imagery base layer. Use the ArcGisMapServerImageryProvider class to make an authenticated request to the basemap styles service.

Create a new ArcGisMapServerImageryProvider using the SATTELITE basemap type. This enumeration accesses the ArcGIS:World Imagery map tile service.

Expand
Use dark colors for code blocks
    <script>

      const apiKey = "YOUR_API_KEY";

      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    </script>
Expand

Create a Viewer attached to the cesiumContainer element. Create a new ImageryLayer from your imagery provider and set it as the baseLayer property.

Expand
Use dark colors for code blocks
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

      const viewer = new Cesium.Viewer("cesiumContainer", {

        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

      });
Expand

Set optional additional parameters to configure the viewer appearance. Disable the timeline, animation, and geocoder controls. Add Cesium World Terrain.

Expand
Use dark colors for code blocks
      const viewer = new Cesium.Viewer("cesiumContainer", {

        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

        terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        geocoder:false

      });
Expand

Use viewer.camera.setView to set the zoom and extent of the scene to the Santa Monica Mountains.

Expand
Use dark colors for code blocks
        terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        geocoder:false

      });

      viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-118.705, 33.957, 35000),
        orientation : {
          heading : Cesium.Math.toRadians(0.0),
          pitch : Cesium.Math.toRadians(-70.0),
        }
      });
Expand

Run the app

In CodePen, run your code to display the map.

The map should display the World Imagery basemap layer for an area of the Santa Monica Mountains in California.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Change the base layer

Change the imagery and terrain layers in a scene.

Add features as GeoJSON

Add features from a feature service to a scene.

Add 3D objects

Add 3D objects from a scene service to a scene.