How to add ArcGIS base layers

Most CesiumJS applications contain an imagery and a terrain base layer. The data for the imagery base layer can be provided by an ArcGIS or (beta), while the data for the terrain base layer can be provided by an ArcGIS .

You can use ArcGIS data providers as base layers in a Cesium application to:

  • Display different types of geographic data in a scene.
  • Display map tile base layers containing satellite imagery and hillshade.
  • Display static basemap tiles in default ArcGIS styles such as outdoor, streets, navigation, and light gray canvas.
  • Display static basemap tiles in various supported languages.
  • Display detailed 3D terrain based on digital elevation data.

Cesium does not currently support the rendering of .

Map tile base layers

You can add a ready-to-use ArcGIS to your CesiumJS application to provide a visual context for your scene. CesiumJS supports map tile base layers, which currently consist of the World Imagery, World Hillshade, and World Ocean layers.

How to access the basemap styles service

  1. Select a map tile base layer from the World Imagery, World Hillshade, and World Ocean enumerations. Copy the corresponding CesiumJS ArcGisBaseMapType.

  2. In your CesiumJS application, set the ArcGisMapService.defaultAccessToken with your ArcGIS access token.

  3. Create an ArcGisMapServerImageryProvider by calling fromBasemapType. Include your selected basemap type.

  4. Create a Viewer or CesiumWidget and set the baseLayer property to an ImageryLayer created from your image provider.

  5. Run the application to display a scene using your selected base layer.

Example

Add an ArcGIS imagery base layer

This example creates a CesiumJS viewer with an arcgis/imagery imagery provider.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  <div id="cesiumContainer"></div>

  <script>

    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

    // or

    /* Use for user authentication */
    // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
    //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
    //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
    //   portal: "YOUR_PORTAL_URL" // Your portal URL
    // })

    // const accessToken = session.token;

    Cesium.ArcGisMapService.defaultAccessToken = accessToken;

    const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

    Cesium.Ion.defaultAccessToken = cesiumAccessToken;

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

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

      baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

    });

    // Add Esri attribution
    // Learn more in https://esriurl.com/attribution
    const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true)
    viewer.creditDisplay.addStaticCredit(poweredByEsri);

  </script>

Static basemap tiles service (beta)

The static basemap tiles service is a that provides basemap tiles for the extent of the world. The service supports default basemap styles such as streets, navigation, outdoor, and light gray canvas. The tiles are supplied as 512x512 .png files in a Web Mercator spatial reference.

How to access the static basemap tiles service

  1. Get an .

  2. Define a basemap style enumeration from the list of available styles.

  3. Create an UrlTemplateImageryProvider by passing the service endpoint for the basemap style.

  4. Create a Viewer and set the imagery provider to the one you created.

  5. Run the application to display a scene using your selected base layer.

Example

Display static basemap tiles

This example loads the arcgis/outdoor style from the (beta) and displays it in the Cesium viewer.

Expand
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
        const accessToken = "YOUR_ACCESS_TOKEN"

        const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

        Cesium.Ion.defaultAccessToken = cesiumAccessToken;

        const basemapEnum = 'beta/arcgis/outdoor';
        const baseUrl = `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/${basemapEnum}/static`

        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false,
            timeline: false,
            animation: false,
            geocoder: false,
        });

        const imageryProvider = new Cesium.UrlTemplateImageryProvider({
            url: `${baseUrl}/tile/{z}/{y}/{x}?token=${accessToken}`,
            tileWidth: 512,
            tileHeight: 512,
        });
        viewer.imageryLayers.addImageryProvider(imageryProvider);

Elevation layers

You can add an ArcGIS to a CesiumJS application as a TerrainProvider to display detailed 3D terrain.

How to access an elevation service

  1. Create a Viewer or CesiumWidget.

  2. Create a new ArcGISTiledElevationTerrainProvider and set the url property to the URL of the World Elevation Service.

  3. Add the terrain provider to the scene by setting the terrainProvider property of the viewer or widget.

Example

Add an ArcGIS elevation layer

This example creates a CesiumJS viewer with an ArcGISTiledElevationTerrainProvider that references the World Elevation Service.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div id="cesiumContainer"></div>
    <script>

      const accessToken = "YOUR_ACCESS_TOKEN";

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const arcGISTerrainProvider = Cesium.ArcGISTiledElevationTerrainProvider.fromUrl('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer', {
          token: accessToken
      });

      const viewer = new Cesium.Viewer("cesiumContainer", {
          terrainProvider: arcGISTerrainProvider,
      });

    </script>

Tutorials

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close