Change the basemap style

Learn how to change a basemap style in a map using the Basemap styles service.

The basemap styles service provides a number of basemap layer styles such as topography, streets, outdoor, navigation, and imagery that you can use in maps.

In this tutorial, you use the layers control to toggle between a number of different basemap styles.

Prerequisites

Steps

Create a new pen

1. To get started, either complete the Display a map tutorial or use this pen.

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

1. Go to the Create an API key tutorial and create an API key with the following privilege(s):
   

   • Privileges
     • Location services > Basemaps

2. Copy the API key access token to your clipboard when prompted.

3. In CodePen, update the accessToken variable to use your access token.

   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
         const map = L.map("map", {
           minZoom: 2
         })
   
         map.setView([34.02, -118.805], 13);
   
         const accessToken = "YOUR_ACCESS_TOKEN";
   
         const basemapEnum = "arcgis/streets";
   
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken
         }).addTo(map);
   

To learn about the other types of authentication available, go to Types of authentication.

Remove the basemap code

1. Remove the basemapEnum and vectorBasemapLayer references contained in the starter code.

   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
         const map = L.map("map", {
           minZoom: 2
         })
   
         map.setView([34.02, -118.805], 13);
   
         const accessToken = "YOUR_ACCESS_TOKEN";
   
         const basemapEnum = "arcgis/streets";
   
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken
         }).addTo(map);
   

   Expand

Create a basemap style function

Create a function that accepts a basemap style enumeration and returns the corresponding basemap style

1. Define a new getV2Basemap function that accepts a style enumeration and returns a VectorBasemapLayer. Set version:2 to access the styles service, and include your API key to validate the call.

   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
         const accessToken = "YOUR_ACCESS_TOKEN";
   
         function getV2Basemap(style) {
           return L.esri.Vector.vectorBasemapLayer(style, {
             token: accessToken,
             version:2
           })
         }
   

   Expand

Add the basemap styles

Reference the additional basemap styles you would like to use in your application.

1. Create a basemapLayers object that contains the labels for each basemap layer enumeration. For each enumeration, call the getV2Basemap function to populate basemapLayers.

   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
         function getV2Basemap(style) {
           return L.esri.Vector.vectorBasemapLayer(style, {
             token: accessToken,
             version:2
           })
         }
   
         const basemapLayers = {
   
           "arcgis/outdoor": getV2Basemap("arcgis/outdoor").addTo(map),
   
           "arcgis/community": getV2Basemap("arcgis/community"),
           "arcgis/navigation": getV2Basemap("arcgis/navigation"),
           "arcgis/streets": getV2Basemap("arcgis/streets"),
           "arcgis/streets-relief": getV2Basemap("arcgis/streets-relief"),
           "arcgis/imagery": getV2Basemap("arcgis/imagery"),
           "arcgis/oceans": getV2Basemap("arcgis/oceans"),
           "arcgis/topographic": getV2Basemap("arcgis/topographic"),
           "arcgis/light-gray": getV2Basemap("arcgis/light-gray"),
           "arcgis/dark-gray": getV2Basemap("arcgis/dark-gray"),
           "arcgis/human-geography": getV2Basemap("arcgis/human-geography"),
           "arcgis/charted-territory": getV2Basemap("arcgis/charted-territory"),
           "arcgis/nova": getV2Basemap("arcgis/nova"),
           "osm/standard": getV2Basemap("osm/standard"),
           "osm/navigation": getV2Basemap("osm/navigation"),
           "osm/streets": getV2Basemap("osm/streets"),
           "osm/blueprint": getV2Basemap("osm/blueprint")
         };
   

   Expand

2. Append addTo to the arcgis/outdoor entry so that it is the default style when the application 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
         function getV2Basemap(style) {
           return L.esri.Vector.vectorBasemapLayer(style, {
             token: accessToken,
             version:2
           })
         }
   
         const basemapLayers = {
   
           "arcgis/outdoor": getV2Basemap("arcgis/outdoor").addTo(map),
   
           "arcgis/community": getV2Basemap("arcgis/community"),
           "arcgis/navigation": getV2Basemap("arcgis/navigation"),
           "arcgis/streets": getV2Basemap("arcgis/streets"),
           "arcgis/streets-relief": getV2Basemap("arcgis/streets-relief"),
           "arcgis/imagery": getV2Basemap("arcgis/imagery"),
           "arcgis/oceans": getV2Basemap("arcgis/oceans"),
           "arcgis/topographic": getV2Basemap("arcgis/topographic"),
           "arcgis/light-gray": getV2Basemap("arcgis/light-gray"),
           "arcgis/dark-gray": getV2Basemap("arcgis/dark-gray"),
           "arcgis/human-geography": getV2Basemap("arcgis/human-geography"),
           "arcgis/charted-territory": getV2Basemap("arcgis/charted-territory"),
           "arcgis/nova": getV2Basemap("arcgis/nova"),
           "osm/standard": getV2Basemap("osm/standard"),
           "osm/navigation": getV2Basemap("osm/navigation"),
           "osm/streets": getV2Basemap("osm/streets"),
           "osm/blueprint": getV2Basemap("osm/blueprint")
         };
   

   Expand

3. 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
         const basemapLayers = {
   
           "arcgis/outdoor": getV2Basemap("arcgis/outdoor").addTo(map),
   
           "arcgis/community": getV2Basemap("arcgis/community"),
           "arcgis/navigation": getV2Basemap("arcgis/navigation"),
           "arcgis/streets": getV2Basemap("arcgis/streets"),
           "arcgis/streets-relief": getV2Basemap("arcgis/streets-relief"),
           "arcgis/imagery": getV2Basemap("arcgis/imagery"),
           "arcgis/oceans": getV2Basemap("arcgis/oceans"),
           "arcgis/topographic": getV2Basemap("arcgis/topographic"),
           "arcgis/light-gray": getV2Basemap("arcgis/light-gray"),
           "arcgis/dark-gray": getV2Basemap("arcgis/dark-gray"),
           "arcgis/human-geography": getV2Basemap("arcgis/human-geography"),
           "arcgis/charted-territory": getV2Basemap("arcgis/charted-territory"),
           "arcgis/nova": getV2Basemap("arcgis/nova"),
           "osm/standard": getV2Basemap("osm/standard"),
           "osm/navigation": getV2Basemap("osm/navigation"),
           "osm/streets": getV2Basemap("osm/streets"),
           "osm/blueprint": getV2Basemap("osm/blueprint")
         };
   
         L.control.layers(basemapLayers, null, { collapsed: false }).addTo(map);
   

   Expand

Run the app

In CodePen, run your code to display the map.

Use the layers control in the top right to select and explore different basemap layer styles from the Basemap styles service.

What's next?

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