Workflow: Create a vector tile service for an app

Santa monica parcels vector tile layer

In this workflow, you will learn how to create, manage, and access a vector tile service in your portal, and then build an application to access and display the vector tiles.

Prerequisites

You need an account for ArcGIS Location Platform, ArcGIS Online, or ArcGIS Enterprise to create hosted data services. If you need an account, go to Get started.

Steps

Download the data

For this workflow, you will use the Santa Monica Parcels dataset.

  1. In your web browser, go to the Santa Monica Parcels item.

  2. Click the Download button to download the zip file locally. Do not unzip this file.

Create a feature layer

Before you create a vector tile layer, you need to create a feature layer.

To create a feature layer in a feature service, you need to upload data into ArcGIS. You can use data management tools or scripting APIs.

Data management tools

Import the shapefile using a data management tool.

In your web browser, go to ArcGIS.com and sign in to your portal with your ArcGIS Location Platform account.

  1. In the top navigation bar, click Content.

  2. Click New item. To upload the Santa Monica Parcels shapefile, you can either:

    • Drag and drop the file.
    • Or, click Your device and navigate to the file path.
  3. Select Add Santa Monica Parcels.zip to publish the file as a hosted feature layer.

  4. Set the following information in the item details pane:

    • Title: Santa Monica Parcels
    • Tags: Santa Monica Parcels.
    • Summary: Parcels in the Santa Monica Mountains.
  5. Click Next to create the new feature layer and feature service.

Scripting APIs

You can also import the shapefile with the ArcGIS API for Python or ArcGIS REST JS. The general steps are as follows:

  1. Import the required libraries.
  2. Implement authentication.
  3. Create and publish a portal item.
  4. Handle the results.
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
# local path to shapefile zip file
input_file_path = str(
    Path(__file__).parent / "Santa_Monica_Public_Parcels.zip"
)

# add the zip file as an item to portal
shp_item = portal.content.add(
    {
        "title": "Santa Monica Public Parcels",
        "description": "Santa Monica public parcels",
        "tags": "Santa, Monica, public, parcels",
        "type": "Shapefile",
    },
    input_file_path,
)

# publish the item to create a hosted featurelayer
shp_service = shp_item.publish(None)

print(f"New item id : {shp_service.id, }, url: {shp_service.layers[0].url}")

The feature layer will look something like this:

Santa monica parcels feature layer

Set the feature style

The parcels data contains a number of useful attributes. The default style is set to display all features using a single color. To make the feature layer style more meaningful, use a unique value renderer to render each parcel base on its usetype attribute value.

Data management tools

Use data management tools to style the parcel features.

In ArcGIS portal, use the Visualization tab to set the feature styles.

  1. Go back to the item page > Visualization.

  2. In the left panel, click the Layers and select the Santa Monica parcels layer. In the right panel, click Styles.

  3. Click + Field, and add usetype.

  4. Under Pick a style, click Style options, update Types (unique symbols)

  5. Click on the symbol next to each of the use type values to update the symbol color.

  6. Set each of the usetype values to the following properties:

    • Fill Color:
      • Residential: #ffde3e
      • Commercial: #c29ed7
      • Industrial: #004c73
      • Government: #fc921f
      • Institutional: #149ece
      • Recreational: #267300
      • Miscellaneous: #b7814a
    style-screenshot
  7. Click the X to exit out of Symbol style.

  8. Click the pencil icon next to symbol style. Set the following properties for all the use types:

    • Fill transparency: 30%
    • Outline color: #ffffff
    • Outline transparency: 65%
    • Outline width: 1
    • Adjust width automatically: false
    style-screenshot
  9. Click the X to exit out of Symbol style. Then click Done twice.

  10. Click Save to save the style in the feature layer item.

Scripting APIs

You can also style features using ArcGIS scripting APIs. The general steps are as follows:

  1. Import relevant libraries.
  2. Implement authentication.
  3. Retrieve feature layer properties.
  4. Define a new renderer.
  5. Update feature layer properties.
  6. Handle results.
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
# update the drawing info
feature_layer_props["drawingInfo"] = new_drawing_info

# reset last edit date
feature_layer_props["editingInfo"]["lastEditDate"] = None

# apply changes
results = feature_layer.manager.update_definition(feature_layer_props)

print(results)

The styled layer will look something like this:

Santa monica parcels feature layer

Manage the service settings

The layer has a large amount of polygon features and vertices. For optimal performance and to conserve service resources, you should configure the service to support optimized layer drawing, spatial indexes, and longer CDN caching.

In the item page, click the Settings tab.

Enable the following settings:

  1. Optimize layer drawing

    • In the item page, go to the Settings > Optimize Layer Drawing. Click Optimize layers and select the layer to optimize > Update.
  2. Cache control

    • In the item page, go to the Settings tab > Cache control. Set the time you want users to wait before seeing updates to the layer.

Publish the vector tile service

To publish a vector tile service from a source feature service, you can use data management tools or scripting APIs.

Data management tools

  1. Sign into your portal.
  2. Go to the item page of the source feature layer.
  3. Click Publish > Vector Tile layer.
  4. For the Tiling scheme, select ArcGIS Online basemaps. Click Next.
  5. Set the following information in the item details pane:
    • Title: Santa Monica parcels (vector tile)
    • Tags: santa, monica, parcels, vector,tile, service
    • Click Save.
    Once you click Save, you will be directed to the item page for the new vector tile layer.

Scripting APIs

  1. Import libraries.
  2. Reference feature layer.
  3. Define publish parameters.
  4. Execute publish operation.
  5. Handle results.
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
vector_tile_service = item.publish(
    publish_parameters=vector_tile_params,
    output_type="vectorTiles",
    file_type="featureService",
    build_initial_cache=False,
)

print(
    f"New item created:\n\tid:{vector_tile_service.id}\n\turl: {vector_tile_service.url}"
)

Manage vector tile service settings

You can add attributes to be included in the tile cache and also rebuild the cache when the features in the source feature layer have been updated. When the features in the source feature layer have been updated, it's good practice to refresh the vector tile cache so that the latest data is included.

In the item page, use the Settings tab to configure cache settings.

  1. Add attributes to the tile cache

    • In the item page, click on the Settings tab.
    • Under Settings, scroll down to Configure attributes.
    • Click on Select attributes. In the Select Attributes dialog, select the following fields: situsfulla, usetype, usedescrip.
  2. Rebuild tile cache

    • In the item page, click on the Settings tab.
    • Under Settings, scroll down to Manage Vector Tile Layer Cache.
    • Click Rebuild Cache.

Get an access token

By default, the sharing level of an item is set to Owner and requires an access token, such as an API key to access it in a client-side application. If you have an ArcGIS Location Platform or ArcGIS Online account, you can scope an API key to access private items. You cannot scope an API key to access private items if you have an ArcGIS Enterprise account. Instead, to access private items, you need to generate a token from an OAuth 2.0 workflow.

In your web browser, go to ArcGIS.com and sign in to your portal with your ArcGIS Location Platform account.

  1. Click Content > My Content.
  2. Click the New Item > Developer credentials.
  3. In the Create developer credentials window, select API key credentials. Click Next.
  4. Set an expiration date for your API key. API keys can be valid for up to one year. Then, click Next.
  5. In the Privileges menu, check the following privileges:
    • Location services > Basemaps
  6. In the Grant item access menu, click Browse items.
  7. Select the tile layer item you just created. Then, click Next.
  8. Fill out the following properties:
    • Title: API key - Data services workflow
    • Tags: authentication, data, hosting, workflow, portal
    • Summary: API key used to provide authentication for data hosting workflows.
  9. Click Next.
  10. Review your selections and, when you are ready, click Next.
  11. Click Generate the API key and go to item details page. I am ready to copy and save the key.
  12. Click Next.
  13. Copy the API key and store it safely. You will not be able to view it again later. If you lose it, you will have to generate another key.

Find the service URL, item ID and style definition

To access a hosted layer from an application, you need to be able to identify its ID and URL or item ID. If a layer is public, you use the URL or item ID to access it directly with your web browser or any application. If the layer is private, you need to provide an access token.

If you are using an ArcGIS Maps SDK or Esri Leaflet:

  1. In the item page, click View to access the vector tile service. Locate the Service ItemId, which will look something like this:

If you are using open source libraries such as MapLibre GL JS or OpenLayers:

  1. In the item page, scroll down to the bottom of the page to find the Service URL. For example:

    • Service URL: https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_(vector_tiles)/VectorTileServer
  2. Go back to the item page. To view the style, click View style. The style will look something like this:

    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
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    {
      "version": 8,
      "sprite": "../sprites/sprite",
      "glyphs": "../fonts/{fontstack}/{range}.pbf",
      "sources": {
        "Santa_Monica_parcels_(vector_tiles)": {
          "type": "vector",
          "bounds": [-118.517, 33.9954, -118.444, 34.0504],
          "minzoom": 0,
          "maxzoom": 23,
          "scheme": "xyz",
          "url": "../../"
        }
      },
      "layers": [
        {
          "id": "Santa_Monica_public_parcels/Residential",
          "type": "fill",
          "source": "Santa_Monica_parcels_(vector_tiles)",
          "source-layer": "Santa_Monica_public_parcels",
          "filter": ["==", "_symbol", 0],
          "layout": {},
          "paint": {
            "fill-color": "rgba(255,222,62,0.7)",
            "fill-outline-color": "rgba(255,255,255,0.25)"
    
    Expand

With the vector tile layer published, you can now access the layer either using the {z}/{y}/{x}.pbf or root.json paths.

Display vector tiles

  1. Select an ArcGIS Maps SDK or open source library.

  2. In the layer item page, find the item ID or the service URL and layer index.

  3. In the code, set the access token and either the item ID or the service URL.

  4. Add the layer to the map.

ArcGIS Maps SDK for JavascriptArcGIS Maps SDK for JavascriptEsri LeafletMapLibre GL JSOpenLayers
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
      const portal = new Portal({
        url: "https://www.arcgis.com/",
        authMode: "immediate"
      });

      // OR
      esriConfig.apiKey = "YOUR_ACCESS_TOKEN" // Scoped to access the item below

      const parcelsLayer = new VectorTileLayer({
        portalItem: {
          id: "c4fc087b100542fe91df0b279df23ef9",
        },
        opacity: 0.75,
      })

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

Your app will look something like this:

Display attributes

If you use MapLibre GL JS you can view the attributes by querying the tile service using the service URL.

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
    map.on("mousemove", "parcels-fill", e => {
          map.getCanvas().style.cursor = "pointer"
          const feature = e.features[0]

          popup
            .setLngLat(e.lngLat)
            .setHTML(`<b>Address:</b> ${feature.properties.situsfulla}</br><b>Use type:</b> ${feature.properties.usetype} </br><b>Use Description:</b> ${feature.properties.usedescrip}`)
            .addTo(map)
        })

What's next?

Learn how to use additional tools, APIs, and location services in these tutorials:

Import data to create a feature layer

Use data management tools to import files and create a feature layer in a feature service.


Define a new feature layer

Use data management tools to define and create a new empty feature layer in a feature service.


Manage a feature layer

Use a hosted feature layer item to set the properties and settings of a feature layer in a feature service.


Create a vector tile service

Use data management tools to create a new vector tile service from a feature service.


Create a map tile service

Use ArcGIS Online or scripting APIs to publish a map tile service.


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