Display vector tiles

To display vector tile layers, you need to use a client-side mapping API such as ArcGIS Maps SDKs or open source libraries. In most cases, the APIs support a class you can use to make requests to a vector tile service with a service URL. The API is responsible for requesting tiles for the visible map extent.

How to display vector tiles

The steps to display vector tiles are:

1. Find the URL for the vector tile service you want to display.
2. Set the service URL for the vector tile service.
3. Add the layer to a map.

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

1
https://{host}/{organizationId}/arcgis/rest/services/{serviceName}/VectorTileServer/tile/{z}/{y}/{x}.pbf

1
https://{host}/{organizationId}/arcgis/rest/services/{serviceName}/VectorTileServer/tile/{z}/{y}/{x}.pbf

1
https://{host}/{webAdaptor}/rest/services/Hosted/{serviceName}/VectorTileServer/tile/{z}/{y}/{x}.pbf

Code examples

1
https://{host}/{organizationId}/arcgis/rest/services/{serviceName}/VectorTileServer/resources/styles/root.json

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
        esriConfig.apiKey = "YOUR_ACCESS_TOKEN"

        const vectorLayer = new VectorTileLayer({
          portalItem: {
            id: "b8f6941ceb874d72a7c37418c3e8108d",
          },
          opacity: 0.75,
        })

        const map = new Map({
          basemap: "arcgis/light-gray",
          layers: [vectorLayer],
        })

Tutorials

Add a feature layer

Access and display point, line, and polygon features from a feature service.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKEsri LeafletMapLibre GL JSOpenLayersCesiumJSPython APIREST JS

Add a vector tile layer

Access and display a vector tile layer in a map.

JavaScript Maps SDKEsri LeafletMapLibre GL JSOpenLayers

Add a map tile layer

Access and display a map tile layer in a map.

Esri LeafletMapLibre GL JSOpenLayersCesiumJS

Style a feature layer

Use symbols and renderers to style feature layers.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKEsri LeafletMapLibre GL JSOpenLayersCesiumJS

Query a feature layer (spatial)

Execute a spatial query to get features from a feature layer.

JavaScript Maps SDKEsri LeafletMapLibre GL JSOpenLayersCesiumJSPython APIREST JSREST API

Query a feature layer (SQL)

Execute a SQL query to access polygon features from a feature layer.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKEsri LeafletMapLibre GL JSOpenLayersCesiumJSPython APIREST JSREST API

Edit feature data

Add, update, and delete features in a feature service.

JavaScript Maps SDKPython APIREST JSREST API

Display a popup

Format a popup to show attributes in a feature layer.

JavaScript Maps SDKEsri LeafletMapLibre GL JSOpenLayersCesiumJS

Workflows

Create a feature service for an app

Learn how to import parcel data, create and style a feature layer, and then access the features in an app.

Create a feature layer view for an editor app

Learn how to import parcel data, create and style a feature layer view, and then access the features in an editing app.

Create a vector tile service for an app

Learn how to import parcel data, style a feature layer, and then create a vector tile service for an app.

Create a map tile service for an app

Learn how to import contour data, style a feature layer, and create a map tile service for an app.

Services

API support

Use data management tools or Client APIs to create, manage, and access data services. The table below outlines the level of support for each API.

Tools