Change the basemap style

Learn how to change the static basemap tiles style.

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 provides access to raster basemap tiles for the world. 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 use the L.esri.Static.staticBasemapTileLayer class to change the static basemap tiles style.

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

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

Update the map's viewpoint

1. Change the map's center to [37.1174, -91.2996] and zoom level to 5. This will focus the map on the United States of America.

   Expand

   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
       map.setView([37.1174, -91.2996], 5);
   

   Expand

Add the basemap styles

You will get all the available basemap styles from the Static Basemap Tiles service and create a menu that allows users to change the basemap style of your map.

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
         const basemapEnum = "arcgis/navigation";
   
         L.esri.Static.staticBasemapTileLayer(basemapEnum, {
           token: accessToken
         }).addTo(map);
   

2. Use the getSelf method from L.esri.Static.Util to make a request to the Static Basemap Tiles service that returns all available basemap styles and their metadata.

   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
       <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;
   
       const map = L.map("map", {
         minZoom: 2
       });
   
       map.setView([37.1174, -91.2996], 5);
   
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
       });
   
       </script>
   

   Expand

3. Create a basemapLayers object to store all the returned 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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const basemapLayers = {};
   
       });
   

   Expand

4. Iterate through each basemap style and create an L.esri.Static.staticBasemapTileLayer from the style. Store it inside the basemapLayers object.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const basemapLayers = {};
   
         data.styles.forEach((style) => {
           basemapLayers[style.name] = L.esri.Static.staticBasemapTileLayer(style.path, {
             token: accessToken
           });
         });
   
       });
   

   Expand

5. Create a Layers control that references basemapLayers and add it to your map.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const basemapLayers = {};
   
         data.styles.forEach((style) => {
           basemapLayers[style.name] = L.esri.Static.staticBasemapTileLayer(style.path, {
             token: accessToken
           });
         });
   
         L.control.layers(basemapLayers, null, { collapsed: false }).addTo(map);
   
       });
   

   Expand

6. Add ArcGIS Navigation to the map so that it is the default style when the application first loads.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const basemapLayers = {};
   
         data.styles.forEach((style) => {
           basemapLayers[style.name] = L.esri.Static.staticBasemapTileLayer(style.path, {
             token: accessToken
           });
         });
   
         L.control.layers(basemapLayers, null, { collapsed: false }).addTo(map);
   
         basemapLayers["ArcGIS Navigation"].addTo(map);
   
       });
   

   Expand

Run the app

Run the app.

Use the layers control in the top right to select and explore different styles from the 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.

What's next?

Learn how to use additional location services in these tutorials: