Add a map tile layer

Learn how to add a map tile layerA hosted map tile layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a map tile service.Learn more to 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.

A map tile layer, also known as an image tile layerAn image tile layer is a data layer that can access and display raster tile data provided by an image layer service.Learn more, displays raster imagery such as satellite photography or hillshading. You can combine map tile layers to enhance the display of a street 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, position the layer on top of existing layers, or position it under existing layers. When positioned above other layers, you need to give the map tile layer a level of transparency so that users can see through it to the basemap. This combined basemap layer technique is used to enhance overall visualization.

In this tutorial, you add a Santa Monica contours map tile layer to your map.

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

1. Center the map on [-118.44, 34.03] and set the zoom level to 11. This will set the map focus to Santa Monica, California.

   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
   82
   83
   84
   85
   86
   87
   88
   89
         /* 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 basemapEnum = "arcgis/light-gray";
   
         const map = L.map("map", {
           minZoom: 2
         }).setView([34.03, -118.44], 11);
   

   Expand

Add a map tile layer

Use the TiledMapLayer class to access and display data from the Santa Monica contours map tile serviceA map tile service, formerly known as image tile service, is a data service that provides access to static, pre-rendered mao tiles. The tiles are typical in PNG format. Map tiles are typically retrieved by specifying a specific level, row, and column value.Learn more.

1. Access the contours layer with a TiledMapLayer 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
   82
   83
   84
   85
   86
   87
   88
   89
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken,
   
         }).addTo(map);
   
   
         const contoursLayer = L.esri.tiledMapLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_contours_(map_tiles)/MapServer/",
           token: accessToken,
   
         });
   
         contoursLayer.addTo(map);
   
       </script>
   

   Expand

2. Set the opacity of the contours layer to 0.5.

   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
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken,
   
         }).addTo(map);
   
   
         const contoursLayer = L.esri.tiledMapLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_contours_(map_tiles)/MapServer/",
           token: accessToken,
   
         });
   
         contoursLayer.addTo(map);
   
         contoursLayer.setOpacity(0.5);
   
       </script>
   

   Expand

Reorder the layers

By default, the basemap layer is added to the same pane as the contours layer. To visually combine the contours with a basemap, you need to change the layer order so both layers are visible.

1. Create a new Leaflet pane called esri-basemap. Set the zIndex of the pane to 200 to display below the contours layer. Add code so the basemap is created in the new pane.

   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
         const basemapPane = map.createPane("esri-basemap");
         basemapPane.style.zIndex = 200;
   
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken,
   
           pane: basemapPane
   
         }).addTo(map);
   

   Expand

2. Create another pane called contours for the Hillshade layer. Set the zIndex to 400 to display above the basemap. Add code so the Hillshade layer is created in the new pane.

   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
   
         const contoursPane = map.createPane("contours");
         contoursPane.style.zIndex = 400;
   
         const contoursLayer = L.esri.tiledMapLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_contours_(map_tiles)/MapServer/",
           token: accessToken,
   
           pane: contoursPane
   
         });
   
         contoursLayer.addTo(map);
   
         contoursLayer.setOpacity(0.5);
   
       </script>
   

   Expand

Run the app

Run the app.

Your map should display a semi-transparent contours layer on top of a basemap. You should see the contours layer combined with other layers, with labels, roads, buildings and water areas clearly visible over the top.

What's next?

Learn how to use additional location services in these tutorials: