Display multiple basemap layers

Learn how to add multiple basemap layers from different services to your map.

This tutorial shows how to display two basemap layers from different services in your application. You will use the World Imagery map tile service satellite imagery basemap to provide the underlying visual and geographic context for the map. To provide additional context, you will use the arcgis/imagery/labels style from the ArcGIS Static Basemap Tiles service to display place labels for the world. The combination of the two layers will result in a basemap that provides additional context for the mapping application.

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. Remove the basemap and attribution code from the starter tutorial for now. You will add them back later.

   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
       <script>
   
         /* Use for API key authentication */
         const accessToken = "YOUR_ACCESS_TOKEN";
   
         const basemapId = "arcgis/navigation";
   
         const basemapURL = "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1";
   
         const tileLayer = new ol.layer.Tile({
           source: new ol.source.XYZ({
             url: `${basemapURL}/${basemapId}/static/tile/{z}/{y}/{x}?token=${accessToken}`, // Default basemap
             tileSize: 512
           })
         });
   
         const map = new ol.Map({
           target: "map",
   
           layers: [tileLayer],
   
           view: new ol.View({
             center: ol.proj.fromLonLat([-20, 30]),
             zoom: 3
           })
         });
   
         fetch(`${basemapURL}/${basemapId}/static?token=${accessToken}`)
           .then((response) => response.json())
           .then((data) => {
             tileLayer
               .getSource()
               .setAttributions("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | " + [data.copyrightText]);
           });
   
       </script>
   

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

   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 map = new ol.Map({
           target: "map",
   
           view: new ol.View({
   
             center: ol.proj.fromLonLat([-91.2996, 37.1174]), // USA (x, y)
             zoom: 5
   
           })
         });
   

Add basemap layer 1

Use the XYZ and Tile classes to access and display basemap layer from the World Imagery map tile service.

1. Create an XYZ source using the xyz URL for the map tile 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
         const tile = new ol.source.XYZ({
           url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${accessToken}`,
   
         });
   
   

   Expand

2. Create a Tile layer using the XYZ source.

   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 tile = new ol.source.XYZ({
           url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${accessToken}`,
   
         });
   
         const tileLayer = new ol.layer.Tile({
           source: tile
         });
   

   Expand

3. Add the data attribution for the map tile layer source.

   • Go to the World Imagery item.
   • Scroll down to the Acknowledgments section and copy its value.
   • Paste the copied value to the attributions property.
     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 tile = new ol.source.XYZ({
             url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${accessToken}`,
     
             attributions: ["Esri, Maxar, Earthstar Geographics, and the GIS User Community | "] // Attribution text retrieved from https://nation.maps.arcgis.com/home/item.html?id=d27a3805595e4bb598678f2dc3b1fca3
     
           });
     
           const tileLayer = new ol.layer.Tile({
             source: tile
           });
     

     Expand

Add basemap layer 2

In this step, you add another basemap layer from the Static Basemap Tiles service to provide place labels.

1. Set basemapId to arcgis/imagery/labels and basemapURL to the Static Basemap Tiles service endpoint.

   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 basemapId = "arcgis/imagery/labels";
         const basemapURL = "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1";
   
   

   Expand

2. Create a Tile layer for the static basemap tiles using the XYZ source.

   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 basemapId = "arcgis/imagery/labels";
         const basemapURL = "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1";
   
         const staticBasemapTileLayer = new ol.layer.Tile({
           source: new ol.source.XYZ({
             url: `${basemapURL}/${basemapId}/static/tile/{z}/{y}/{x}?token=${accessToken}`, // Default basemap
             tileSize: 512,
             attributions: [
               "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | Sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community"
             ]
           })
         });
   

   Expand

3. Add both tileLayer and staticBasemapTileLayer to the 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 map = new ol.Map({
           target: "map",
   
           layers: [tileLayer, staticBasemapTileLayer],
   
           view: new ol.View({
   
             center: ol.proj.fromLonLat([-91.2996, 37.1174]), // USA (x, y)
             zoom: 5
   
           })
         });
   

   Expand

Run the app

Run the app.

The map should display basemap layers from the World Imagery map tile service and the Static Basemap Tiles service.

What's next?

Learn how to use additional location services in these tutorials: