Tutorial: Change the base layer

Learn how to change static basemap tiles style.

You can display a scene with raster basemap tiles using the ArcGIS Static Basemap Tiles serviceThe ArcGIS Static Basemap Tiles service, also known as the Static Basemap Tiles service, is a location service that provides basemap data as pre-rendered and pre-styled map tiles for the world. It supports key styles in the ArcGIS Basemap style family. An ArcGIS Location Platform account is required to use the services.Learn more. The service supports a number of ArcGIS styles such as navigation, streets, outdoor, and light-gray. The tiles are returned as PNG files.

In this tutorial, you customize the BaseLayerPicker widget to display the different basemap layer styles and display them as raster tiles on your scene.

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

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.

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

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

   Use dark colors for code blocks

   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
       <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";
   
       </script>
   

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

   Use dark colors for code blocks

   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
       <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;
   
       </script>
   

Remove basemap code

1. Remove the code that adds a basemap layer because you will load it dynamically from a menu instead.
   Use dark colors for code blocks

   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
   83
   84
       <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 basemapEnum = "arcgis/navigation";
         const baseUrl = `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/${basemapEnum}/static`;
   
         const imageryProvider = new Cesium.UrlTemplateImageryProvider({
           url: `${baseUrl}/tile/{z}/{y}/{x}?token=${accessToken}`,
           tileWidth: 512,
           tileHeight: 512
         });
   
         const viewer = new Cesium.Viewer("cesiumContainer", {
           baseLayerPicker: false,
           timeline: false,
           animation: false,
           geocoder: false
         });
   
         viewer.camera.setView({
           destination: Cesium.Cartesian3.fromDegrees(-91.2996, 37.1174, 12000000)
         });
   
         viewer.imageryLayers.addImageryProvider(imageryProvider);
   
         fetch(`${baseUrl}?token=${accessToken}`)
           .then((response) => response.json())
           .then((data) => {
             const basemapAttribution = new Cesium.Credit(data.copyrightText, false);
             viewer.creditDisplay.addStaticCredit(basemapAttribution);
           });
   
         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>
   

Update the camera's viewpoint

1. Change the camera's destination to -91.2996, 37.1174, 4622324.434309. This will focus the camera on the United States of America.

   Use dark colors for code blocksCopy

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       viewer.camera.setView({
   
         destination: Cesium.Cartesian3.fromDegrees(-91.2996, 37.1174, 4622324.434309)
   
       });
   

Load the basemaps

1. Create a variable called viewModel to obtain the BaseLayerPicker widget. You will be able to customize the widget through this variable.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       /* 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;
   
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
   
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
   
       const viewer = new Cesium.Viewer("cesiumContainer", {
         timeline: false,
         animation: false,
         geocoder: false
       });
   
       const viewModel = viewer.baseLayerPicker.viewModel;
   
       viewer.camera.setView({
   
         destination: Cesium.Cartesian3.fromDegrees(-91.2996, 37.1174, 4622324.434309)
   
       });
   

   Expand

2. Create an async function called loadBasemaps.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       /* 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;
   
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
   
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
   
       const viewer = new Cesium.Viewer("cesiumContainer", {
         timeline: false,
         animation: false,
         geocoder: false
       });
   
       const viewModel = viewer.baseLayerPicker.viewModel;
   
       async function loadBasemaps() {
   
       }
   
       viewer.camera.setView({
   
         destination: Cesium.Cartesian3.fromDegrees(-91.2996, 37.1174, 4622324.434309)
   
       });
   

   Expand

3. Import arcgisRest.request() to make a request to the static basemap tiles service. This dynamically fetches the available basemap styles.

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       <!-- ArcGIS REST JS -->
       <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
   
   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       async function loadBasemaps() {
   
         const data = await arcgisRest.request("https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self", {
           httpMethod: "GET",
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
       }
   

   Expand

4. Create an empty list of imageryProviders. We will use this list to store the basemap styles that will be displayed in the base layer picker.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       async function loadBasemaps() {
   
         const data = await arcgisRest.request("https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self", {
           httpMethod: "GET",
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const imageryProviders = [];
   
       }
   

   Expand

5. For each basemap style returned by the service, create a new Cesium.ProviderViewModel and push it into our imageryProviders list.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       async function loadBasemaps() {
   
         const data = await arcgisRest.request("https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self", {
           httpMethod: "GET",
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const imageryProviders = [];
   
         for (const style of data.styles) {
   
           imageryProviders.push(new Cesium.ProviderViewModel({
             name: style.name,
             iconUrl: style.thumbnailUrl,
             creationFunction: () => {
               return new Cesium.UrlTemplateImageryProvider({
                 url: style.templateUrl + "?token=" + accessToken,
                 tileWidth: 512,
                 tileHeight: 512,
   
               });
             }
           }));
         }
   
       }
   

   Expand

6. Apply the imageryProviders list into the viewModel and use the first basemap style as the default basemap.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       async function loadBasemaps() {
   
         const data = await arcgisRest.request("https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self", {
           httpMethod: "GET",
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const imageryProviders = [];
   
         for (const style of data.styles) {
   
           imageryProviders.push(new Cesium.ProviderViewModel({
             name: style.name,
             iconUrl: style.thumbnailUrl,
             creationFunction: () => {
               return new Cesium.UrlTemplateImageryProvider({
                 url: style.templateUrl + "?token=" + accessToken,
                 tileWidth: 512,
                 tileHeight: 512,
   
               });
             }
           }));
         }
   
         viewModel.imageryProviderViewModels = imageryProviders;
         viewModel.selectedImagery = imageryProviders[0]; // set the first basemap style as the default style
   
       }
   

   Expand

Load the new base layer picker

1. Call the loadBasemaps function to load the new base layer picker with the static basemap styles.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       loadBasemaps();
   
       viewer.camera.setView({
   
         destination: Cesium.Cartesian3.fromDegrees(-91.2996, 37.1174, 4622324.434309)
   
       });
   

   Expand

Add attribution

You are required to provide data attribution to the Static Basemap Tiles service. CesiumJS does not add the attribution automatically. Therefore, you are required to add it manually. To do this, you make another call to the service to retrieve the basemap style's metadata, then attach the copyrightText attribute to the imagery provider's credit.

1. Inside the for loop, make a call to the style's URL to retrieve its metadata. Store the JSON response into a variable called attributionData.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       async function loadBasemaps() {
   
         const data = await arcgisRest.request("https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self", {
           httpMethod: "GET",
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const imageryProviders = [];
   
         for (const style of data.styles) {
   
           const attributionData = await arcgisRest.request(`${style.url}`, {
             httpMethod: "GET",
             authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
           });
   
           imageryProviders.push(new Cesium.ProviderViewModel({
             name: style.name,
             iconUrl: style.thumbnailUrl,
             creationFunction: () => {
               return new Cesium.UrlTemplateImageryProvider({
                 url: style.templateUrl + "?token=" + accessToken,
                 tileWidth: 512,
                 tileHeight: 512,
   
               });
             }
           }));
         }
   
         viewModel.imageryProviderViewModels = imageryProviders;
         viewModel.selectedImagery = imageryProviders[0]; // set the first basemap style as the default style
   
       }
   

   Expand

2. In the creationFunction of the style, use the copyrightText from the attributionData in the credit attribute.

   Expand

   Use dark colors for code blocks

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
       async function loadBasemaps() {
   
         const data = await arcgisRest.request("https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self", {
           httpMethod: "GET",
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const imageryProviders = [];
   
         for (const style of data.styles) {
   
           const attributionData = await arcgisRest.request(`${style.url}`, {
             httpMethod: "GET",
             authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
           });
   
           imageryProviders.push(new Cesium.ProviderViewModel({
             name: style.name,
             iconUrl: style.thumbnailUrl,
             creationFunction: () => {
               return new Cesium.UrlTemplateImageryProvider({
                 url: style.templateUrl + "?token=" + accessToken,
                 tileWidth: 512,
                 tileHeight: 512,
   
                 credit: new Cesium.Credit(attributionData.copyrightText)
   
               });
             }
           }));
         }
   
         viewModel.imageryProviderViewModels = imageryProviders;
         viewModel.selectedImagery = imageryProviders[0]; // set the first basemap style as the default style
   
       }
   

   Expand

Run the app

Run the app.

The scene should display an area of the United States of America with a customized base layer picker.

What's next?

Learn how to use additional location services in these tutorials: