Tutorial: Change the base layer

Learn how to customize the CesiumJS base layer picker to display ArcGIS data provider options.

ArcGIS provides base layers for both imagery and terrain that you can use in your CesiumJS applications. You can use image tiles from the basemap styles service to create an ImageryProvider, and you can use elevation data from the elevation service to create a TerrainProvider.

In this tutorial, you customize the BaseLayerPicker widget to display the different ArcGIS base layers available for imagery and terrain.

Prerequisites

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

Code

Use dark colors for code blocks
                                                                            
Change lineChange line
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CesiumJS: Change the basemap layer</title>
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <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">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <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, {
        enablePickFeatures:false
      });

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

          baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

          terrain: Cesium.Terrain.fromWorldTerrain(),

          baseLayerPicker:true,

          timeline: false,
          animation: false,
          geocoder:false

      });

        viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(-122.4106, 37.7908, 200000),
        });

        const viewModel = viewer.baseLayerPicker.viewModel;

        const imageryProviders = [];

        const imageryProviderNames = ["ArcGIS World Imagery", "ArcGIS World Hillshade", "Esri World Ocean"];
        for (imageryProvider of viewModel.imageryProviderViewModels) {
            if (imageryProviderNames.includes(imageryProvider.name)) {
                imageryProviders.push(imageryProvider);
            }
        }
        viewModel.imageryProviderViewModels = imageryProviders;

        const arcGisTerrain = new Cesium.ProviderViewModel({
            name: "ArcGIS World Terrain",
            iconUrl:"https://www.arcgis.com/sharing/rest/content/items/58a541efc59545e6b7137f961d7de883/info/thumbnail/thumbnail1585609861151.png",
            creationFunction: () => {
                return Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer")
            }
        })

        viewModel.terrainProviderViewModels = [arcGisTerrain];

</script>
</body>
</html>

What's next?

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

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