Add a raster tile layer

Learn how to add a raster tile layer to a map.

A raster tile layer, also known as an image tile layer, displays imagery such as satellite photography or hillshading. You can combine raster tile layers to enhance the display of a street basemap layer, position the layer on top of existing layers, or position it under existing layers. When positioned above other layers, you need to give the raster 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 Hillshade raster tile layer, which is a basemap layer composed of jpeg images, on top of a street basemap layer.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.

Steps

Create a new pen

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

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

Set the API key

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

  2. In CodePen, update apiKey to use your key.

    Use dark colors for code blocks
                                                              
    Change line
    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 apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    

Add an image tile layer

Use the TiledMapLayer class to access and display data from the World Hillshade image tile service.

  1. Access the hillshade layer with a TiledMapLayer and add it to your map.

    Expand
    Use dark colors for code blocks
                                                                    
    Add line.Add line.Add line.Add line.Add line.
    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
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
             apiKey: apiKey,
          }).addTo(map);
    
          L.esri.tiledMapLayer({
            url:"https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer",
            apiKey: apiKey,
    
          }).addTo(map);
    
        </script>
    
    Expand

Adjust the basemap

By default, the hillshade layer is added below the basemap layer. To visuallly combine hillshading with a basemap, you need to adjust the layer order and hillshade opacity so that both layers are visible.

  1. Change the Z-index of the tilePane to display the hillshade layer on top of the basemap layer.

    Expand
    Use dark colors for code blocks
                                                                    
    Add line.
    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
          L.esri.tiledMapLayer({
            url:"https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer",
            apiKey: apiKey,
    
          }).addTo(map);
    
          map.getPane("tilePane").style.zIndex = 800;
    
        </script>
    
    Expand
  2. Reduce the opacity of the hillshade layer so the basemap layer is visible.

    Expand
    Use dark colors for code blocks
                                                                    
    Add line.
    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
          L.esri.tiledMapLayer({
            url:"https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer",
            apiKey: apiKey,
    
            opacity:0.2
    
          }).addTo(map);
    
          map.getPane("tilePane").style.zIndex = 800;
    
        </script>
    
    Expand

Run the app

In CodePen, run your code to display the map.

Your map should display a semi-transparent hillshade layer overlaid over a basemap. You should see the hillshade 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 ArcGIS location services in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.