Hosted image tile layers

Image tile layers showing the 2018 Kilauea eruption with data published as hosted image tile services

What is a hosted image tile layer?

A hosted image tile layer is a reference to an image tile layer in an image tile service used to store your data. Applications can use image tile layers to display large amounts of geographic data in a map or scene with static image files.

You use hosted image tile layers when you want to:

  • Convert feature layers to image tile layers.
  • Store and access data as pre-cached image tiles in different formats e.g. JPEG or PNG.
  • Optimize accessing and displaying large amounts of data as tiles.
  • Use image tile data in offline applications.

How an hosted image tile works

You can create hosted image tile layers by converting existing hosted feature layers to tile layers. A hosted image tile layer references a MapService service that serves tiles (or levels) of png or jpeg images of geographic data. To get tile data, you make requests to the MapService.

Data hosting

Access hosted image tile layers and image tile services from your applications.

Manage an image tile layer

An item page allows you to manage the properties and settings for a hosted vector tile layer. You can access an item page by signing in to your developer dashboard or ArcGIS Online. Once signed in, you can set properties such as the name, description, tags, and sharing settings.

View an image layer item page

To access an item page directly, use a portal search URL with the ID for the item. The portal URL for data hosted in ArcGIS is https://www.arcgis.com. To use this URL, the item must be shared publicly.

Use dark colors for code blocks
 
1
https://www.arcgis.com/home/item.html?id=<ID>

Example: https://www.arcgis.com/home/item.html?id=883cedb8c9fe4524b64d47666ed234a7

Access an image tile layer

An image tile service hosts tile data. You can discover information about a layer by accessing the service endpoint directly. The endpoint returns properties such as the service name, item ID, spatial reference, extent, and tile information.

Get image tile layer properties

To access the layer or get properties, use a URL with the host and service name.

Use dark colors for code blocks
 
1
https://<host>/arcgis/rest/services/<serviceName>/MapServer

Example: https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer

Get image layer tile data

To access layer data, use a URL with the host, service name, and path to tiles in {z}/{y}/{x} format.

Use dark colors for code blocks
 
1
https://<host>/arcgis/rest/services/<serviceName>/MapServer/tile/{z}/{y}/{x}

Example: https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/0/0/0

Examples

Display an image tile layer

To display a hosted image tile layer, you reference the hosted image tile layer by ID or URL and then add the layer to a map or scene. The client application requests the tiles from the image tile service for the current zoom level.

Steps

  1. Create a map or scene.
  2. Get the hosted image tile layer URL.
  3. Add the layer.
ArcGIS API for JavaScriptEsri LeafletMapbox GL JSOpenLayersArcGIS Runtime API for .NETArcGIS Runtime API for AndroidArcGIS Runtime API for iOSArcGIS Runtime API for JavaArcGIS Runtime API for Qt (C++)ArcGIS Runtime API for Qt (QML)
Go to sampleUse 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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!-- ArcGIS Mapping APIs and Location Services Guide
  Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/
-->
<title>ArcGIS Developer Guide: Image Tile Layer</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    </style>

<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.23/"></script>

<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/layers/TileLayer",
    "esri/views/MapView"
  ],(esriConfig, Map, TileLayer, MapView)=> {
    esriConfig.apiKey = "YOUR_API_KEY";

    const imageLayer = new TileLayer({
      url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
      opacity: 0.5
    });
    const map = new Map({
      basemap: "arcgis-light-gray",
      layers: [imageLayer]
    const view = new MapView({
      container: "viewDiv",
      center: [-100,40],
      zoom: 2,
      map: map,
      constraints: {
        snapToZoom: false
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Tutorials

Services

Feature service

Add, update, delete, and query feature data.


Vector tile service

Store and access vector tile data.


Image tile service

Store and access image tile data.

API support

Tools

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