Change the basemap style

Learn how to change the static basemap tiles style.

The ArcGIS Static Basemap Tiles service 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 credentials so your application can access ArcGIS services.

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 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
       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 service.

What's next?

Learn how to use additional location services in these tutorials: