Change the basemap style

Learn how to change a basemap styleA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more in a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more.

The ArcGIS Basemap Styles serviceThe ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service.Learn more provides a number basemap layer styles such as topography, streets, outdoor, navigation, and imagery that you can use in maps.

In this tutorial, you use a <select> dropdown menu with ol-mapbox-style to toggle between a number of different basemap layer styles.

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.

Remove basemap references

1. Remove the basemapId, basemapURL, and the olms function.

   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
       <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: "https://www.arcgis.com/sharing/rest" // Your portal URL
       // })
   
       // const accessToken = session.token;
   
       const map = new ol.Map({ target: "map" });
   
       map.setView(
         new ol.View({
           center: ol.proj.fromLonLat([-20, 30]),
           zoom: 3
         })
       );
   
       const basemapId = "arcgis/outdoor";
   
       const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`;
   
       olms.apply(map, basemapURL)
   
         .then(() => {
           // Add Esri attribution
           // Learn more in https://esriurl.com/attribution
           const source = map.getLayers().item(0).getSource();
           const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ";
   
           const attributionFn = source.getAttributions();
           if (attributionFn) {
             source.setAttributions((ViewStateLayerStateExtent) => {
               return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)];
             });
           } else source.setAttributions(poweredByEsriString);
   
         });
   
       </script>
   

   Expand

Add a basemap selector

OpenLayers does not have a basemap layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more switching widgetA widget is a UI component that supports user interaction or displays information about the data in a map or scene.Learn more, so you will use the a plain HTML <select> element.

1. In the <head> tag, add CSS that will position the <select> menu wrapper element in the upper right corner and provide styling.

   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
   123
   124
   125
       <style>
       html,
       body,
       #map {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 14px;
         color: #323232;
       }
   
       #basemaps-wrapper {
         position: absolute;
         top: 20px;
         right: 20px;
       }
   
       #basemaps {
         font-size: 16px;
         padding: 4px 8px;
       }
   
       </style>
   

   Expand

2. In the <body> element, add the wrapper tag with an id of basemaps-wrapper.

   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
   123
   124
   125
     <body>
       <div id="map"></div>
   
       <div id="basemaps-wrapper">
   
       </div>
   

   Expand

3. In the wrapper element, add a <select> element, which you will populate in a later step.

   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
   123
   124
   125
       <div id="basemaps-wrapper">
   
         <select id="basemaps"></select>
   
       </div>
   

   Expand

Set the initial basemap layer

When the page loads, initialize the basemap layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more to the first option in the menu.

1. Create a function called url that computes the style service URL for a basemap layer.

   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
   123
   124
   125
       <script>
   
       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: "https://www.arcgis.com/sharing/rest" // Your portal URL
       // })
   
       // const accessToken = session.token;
   
       const map = new ol.Map({ target: "map" });
       map.setView(
         new ol.View({
           center: ol.proj.fromLonLat([-118.805, 34.027]),
           zoom: 12
         })
       );
   
       const baseUrl = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles";
       const url = (style) => `${baseUrl}/${style}?token=${accessToken}`;
   

   Expand

2. Create a function called setBasemap that will clear existing layers and use olms to instantiate a basemap layer by name.

   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
   123
   124
   125
       const baseUrl = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles";
       const url = (style) => `${baseUrl}/${style}?token=${accessToken}`;
   
       const setBasemap = (style) => {
         // Clear out existing layers.
         map.setLayerGroup(new ol.layer.Group());
   
         // Instantiate the given basemap layer.
         olms.apply(map, url(style)).then(() => {
   
           // Add Esri attribution
           // Learn more in https://esriurl.com/attribution
           const source = map.getLayers().item(0).getSource();
           const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ";
   
           const attributionFn = source.getAttributions();
           if (attributionFn) {
             source.setAttributions((ViewStateLayerStateExtent) => {
               return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)];
             });
           } else source.setAttributions(poweredByEsriString);
   
         });
       };
   

   Expand

3. Extract the <select> DOM element using document.querySelector to populate it.

   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
   123
   124
   125
       const basemapsSelectElement = document.querySelector("#basemaps");
   

   Expand

4. Import arcgisRest.request() to make a request to the Basemap Styles service. This dynamically fetches the available basemap styles and populates the select element.

   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
   123
   124
   125
       <!-- 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
   123
   124
   125
       arcgisRest.request(`${baseUrl}/self`, {
         httpMethod: "GET"
       }).then((response) => {
         const basemapStyles = response.styles.filter((style) => !style.deprecated);
         basemapStyles.forEach((style) => {
           const option = document.createElement("option");
           option.value = style.path;
           option.textContent = style.name;
           basemapsSelectElement.appendChild(option);
         });
   
       });
   

   Expand

5. Call setBasemap to initialize the basemap layer to the first basemap in the select element.

   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
   123
   124
   125
       arcgisRest.request(`${baseUrl}/self`, {
         httpMethod: "GET"
       }).then((response) => {
         const basemapStyles = response.styles.filter((style) => !style.deprecated);
         basemapStyles.forEach((style) => {
           const option = document.createElement("option");
           option.value = style.path;
           option.textContent = style.name;
           basemapsSelectElement.appendChild(option);
         });
   
         setBasemap(response.styles[0].path);
   
       });
   

   Expand

Set the selected basemap layer

Call setBasemap when the user selects an option in the <select> menu.

1. Call setBasemap in response to change events on the <select> element.

   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
   123
   124
   125
       const basemapsSelectElement = document.querySelector("#basemaps");
   
       arcgisRest.request(`${baseUrl}/self`, {
         httpMethod: "GET"
       }).then((response) => {
         const basemapStyles = response.styles.filter((style) => !style.deprecated);
         basemapStyles.forEach((style) => {
           const option = document.createElement("option");
           option.value = style.path;
           option.textContent = style.name;
           basemapsSelectElement.appendChild(option);
         });
   
         setBasemap(response.styles[0].path);
   
       });
   
       basemapsSelectElement.addEventListener("change", (e) => {
         setBasemap(e.target.value);
       });
   

   Expand

Run the app

Run the app.

Use the layer switcher menu at the top right to select and explore different basemap styles.

What's Next?

Learn how to use additional location services in these tutorials: