Workflow: Create a vector tile service for an app

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.

In your web browser, go to the Santa Monica Parcels item.
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 https://location.arcgis.com, and sign in with your ArcGIS Location Platform account. In the ArcGIS Location Platform dashboard, click My portal to go to your portal.

In the top navigation bar, click Content.
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.
Select Add Santa Monica Parcels.zip to publish the file as a hosted feature layer.
Set the following information in the item details pane:
- Title: Santa Monica Parcels
- Tags: Santa Monica Parcels.
- Summary: Parcels in the Santa Monica Mountains.
Click Next to create the new feature layer and feature service.

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

In the top navigation bar, click Content.
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.
Select Add Santa Monica Parcels.zip to publish the file as a hosted feature layer.
Set the following information in the item details pane:
- Title: Santa Monica Parcels
- Tags: Santa Monica Parcels.
- Summary: Parcels in the Santa Monica Mountains.
Click Next to create the new feature layer and feature service.

In your web browser, go to your ArcGIS Enterprise portal and sign in to your portal with your ArcGIS Enterprise account.

In the top navigation bar, click Content.
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.
Select Add Santa Monica Parcels.zip to publish the file as a hosted feature layer.
Set the following information in the item details pane:
- Title: Santa Monica Parcels
- Tags: Santa Monica Parcels.
- Summary: Parcels in the Santa Monica Mountains.
Click Next to create the new feature layer and feature service.

You can use ArcGIS Pro to import shapefile data.

Unzip the Santa Monica parcels zip file.
- The zip file contains the Parcels_Public.shp file.
Launch ArcGIS Pro.
- Create a new map project.
- A map with World Topographic Map and World Hillshade basemap layers will be created.
In the Map ribbon, click on Add Data > Data and select Parcels_Public.shp file.

The Parcels_Public.shp file is added as a feature layer to the map.

Scripting APIs

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

Import the required libraries.
Implement authentication.
Create and publish a portal item.
Handle the results.

Expand

Use dark colors for code blocks

Copy

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}")

Go to API reference

Expand
Use dark colors for code blocksCopy
 // publish parameters  // https://developers.arcgis.com/rest/users-groups-and-items/publish-item.htm#ESRI_SECTION1_1016F32E313240D38E8CF741BDBC0BE8  const publishParams = {  name: 'Santa Monica parcels',  maxRecordCount: 2000,  hasStaticData: true,  layerInfo: { capabilities: 'Query' },  };   // create item  const zipItem = await createItem({  authentication: auth,  item: {  title: 'Santa Monica parcels',  description: 'Santa Monica parcels',  tags: 'Santa, Monica, parcels',  type: 'Shapefile',  },  file: f,  });   // execute publish operation  const publishedService = await request(publishURL, {  authentication: auth,  params: {  itemid: zipItem.id,  filetype: 'shapefile',  publishParameters: publishParams,  },  });   // handle results  console.log('New service created: ');  publishedService.services.forEach((s) => {  console.log(`\tid: ${s.serviceItemId} \n\turl:${s.serviceurl}`);  }); 
Expand
Go to API reference

The feature layer will look something like this:

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.

Go back to the item page > Visualization.
In the left panel, click the Layers and select the Santa Monica parcels layer. In the right panel, click Styles.
Click + Field, and add usetype.
Under Pick a style, select Types (unique symbols) and click Style options.
Click on the symbol next to each of the use type values to update the symbol color.
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
Click the X to exit out of Symbol style.
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
Click the X to exit out of Symbol style. Then click Done twice.
Click Save to save the style in the feature layer item.

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

Go back to the item page > Visualization.
In the left panel, click the Layers and select the Santa Monica parcels layer. In the right panel, click Styles.
Click + Field, and add usetype.
Under Pick a style, select Types (unique symbols) and click Style options.
Click on the symbol next to each of the use type values to update the symbol color.
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
Click the X to exit out of Symbol style.
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
Click the X to exit out of Symbol style. Then click Done twice.
Click Save to save the style in the feature layer item.

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

Go back to the item page > Visualization.
In the left panel, click the Layers and select the Santa Monica parcels layer. In the right panel, click Styles.
Click + Field, and add usetype.
Under Pick a style, select Types (unique symbols) and click Style options.
Click on the symbol next to each of the use type values to update the symbol color.
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
Click the X to exit out of Symbol style.
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
Click the X to exit out of Symbol style. Then click Done twice.
Click Save to save the style in the feature layer item.

You can use ArcGIS Pro to change the visualization of the Santa Monica parcels layer.

In the Content pane, right-click on the feature service and click Symbology.
In the Symbology pane, set the following properties:
- Primary symbology: Unique values
- Field 1: useType
In the Classes tab, click on the symbol for Commercial > Properties.
Set the fill colors for each useType:
- In the Appearance section, click the color button > Color Properties... to display the color palette. Set the following property:
  - HEX#: #c29ed7
  - Transparency: 30%
- Repeat the above step for the following useTypes:
  - Fill Color:
    - Residential: #ffde3e
    - Industrial: #004c73
    - Government: #fc921f
    - Institutional: #149ece
    - Recreational: #267300
    - Miscellaneous: #b7814a
Set the outline colors for each useType:
- In the Appearance section, click the outline color button > Color Properties... to display the color palette. Set the following property for Commercial:
  - HEX#: #ffffff
  - Transparency: 65%
- In the Appearance section, set the Outline width to 1.0 pt.
- Repeat the above steps for each useType.

Publish as web layer

Before you can share the feature layer as a hosted feature layer, you will need to enable Allow assignment of unique numeric IDs for sharing web layers option. By default, this option is not enabled. Enabling this option will allow you to assign static IDs to feature layers in your project.

In the Contents pane, right-click the Map > Properties
In the General section, enable Allow assignment of unique numeric IDs for sharing web layers.

With that option enabled, you can now publish the Santa Monica Parcels polygon feature layer as a hosted feature layer.

Right-click on feature layer and click Sharing > Share as Web Layer.
- The Share As Web Layer pane will be displayed.
Set the following required information in the General tab:
- Name: Santa Monica Parcels
- Summary: Parcels in the Santa Monica Mountains
- Tags: Santa Monica Parcels
- Layer Type: Feature
- Set a location in your organization in Location
Click Analyze
- Any errors or warnings during the analyze process will be displayed in the Messages tab.
Click Publish

A success message will be displayed with Manage the web layer link allowing you to visit the item page details of the hosted feature layer.

Scripting APIs

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

Import relevant libraries.
Implement authentication.
Retrieve feature layer properties.
Define a new renderer.
Update feature layer properties.
Handle results.

Expand

Use dark colors for code blocks

Copy

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)

Go to API reference

Expand

Use dark colors for code blocks

Copy

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  // get layer properties  const layerAdminInfo = await getServiceAdminInfo(featureLayerURL, auth);   // update the renderer  layerAdminInfo.drawingInfo = newDrawingInfo;   // reset edit date  layerAdminInfo.editingInfo.lastEditDate = null;   // updateDefinition endpoint  const updateURL = `${adminURL}/updateDefinition`;   // execute updateDefinition operation  const results = await request(updateURL, {  authentication: auth,  params: {  updateDefinition: layerAdminInfo,  },  });   console.log(results);

Expand

Go to API reference

The styled layer will look something like this:

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:

Optimize layer drawing
- In the item page, go to the Settings > Optimize Layer Drawing. Click Optimize layers and select the layer to optimize > Update.
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

Sign into your portal.
Go to the item page of the source feature layer.
Click Publish > Vector Tile layer.
For the Tiling scheme, select ArcGIS Online basemaps. Click Next.
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.

Sign into your portal.
Go to the item page of the source feature layer.
Click Publish > Vector Tile layer.
For the Tiling scheme, select ArcGIS Online basemaps. Click Next.
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.

The first step during the creation of a vector tile service is to author a map to accommodate for that service type.

You will create a vector tile service from your Santa Monica Parcels layer by creating a vector tile package in ArcGIS Pro.

Add the layer to the project

Launch ArcGIS Pro and create a new map project.
In the Catalog pane, click Project.
Right-click on the Parcels_Public.shp click Add To Current Map to add the shapefile to the map.
Click Save Project to save your project.

Add metadata to the map

Part of the vector tile package creation process is to add metadata to the map. The steps below will outline how metadata can be added to your map project.

Select and right-click on Map > Edit Metadata in the Contents pane.
Set the following information in the metadata pane:
- Title: Santa Monica Parcels (vector tile)
- Tags: santa, monica, parcels, vector,tile, service
- Summary: Santa Monica parcels vector tile package
- Description: Santa Monica parcels vector tile package
Click New Bounding Box and set the following information:
- West: -118.521
- East: -118.440
- South: 33.992
- North: 34.053

Set the map coordinate System

An additional part of the vector tile creation process is to set the coordinate system of your map.

Select and right-click on Map > Properties.
In the Map Properties window, click Coordinate System.
In the XY Coordinate Systems Available, enter Web Mercator in the search textbox.
Select WGS 1984 Web Mercator (auxiliary sphere)
Click OK
Click Save Project

Create the vector tile package

In the Analysis ribbon, click Tools. The Geoprocessing pane is displayed.
In the search textbox, enter create vector tile package and click the first item to launch the tool.
In the Create Vector Tile Package geoprocessing tool, set the following information:
- Input Map: Map
- Click the Browse button. Set SantaMonicaVectorTilePackage as the name and path for the Output File.
- Enable the Package for ArcGIS Online | Bing Maps | Google Maps checkbox.

The SantaMonicaVectorTilePackage.vtpk file is created.

Publish the vector tile package

To share and publish the vector tile package, follow these instructions:

In a web browser, go to ArcGIS.com or your ArcGIS Enterprise portal.
In the top navigation bar, click Content.
Click New item. To upload the SantaMonicaVectorTilePackage.vtpk file, you can either:
- Drag and drop the file.
- Or, click Your device and navigate to the file path.
Select Add SantaMonicaVectorTilePackage.vtpk and create a hosted tile layer.
Click Next.
Set the following information:
- Title: Santa Monica (vector tile)
- Tags: Santa Monica, vector, tile, service
Click Save.

The Santa Monica (vector tile) hosted vector tile layer is created.

Scripting APIs

Import libraries.
Reference feature layer.
Define publish parameters.
Execute publish operation.
Handle results.

Expand

Use dark colors for code blocks

Copy

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}" )

Go to API reference

Expand

Use dark colors for code blocks

Copy

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 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467  // execute publish operation  const publishedService = await request(publishURL, {  authentication: auth,  params: {  itemid: "<YOUR ITEM ID>",  outputType: "vectorTiles",  filetype: "featureService",  publishParameters: vectorTileParams,  },  })   // handle results  console.log("New service created: ")  publishedService.services.forEach(s => {  console.log(`\tid: ${s.serviceItemId} \n\turl:${s.serviceurl}`)  })

Expand

Go to API reference

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.

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.
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.

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

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.
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.

In your ArcGIS Enterprise portal, use the Settings tab to configure cache settings.

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.
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 https://location.arcgis.com, and sign in with your ArcGIS Location Platform account. In the ArcGIS Location Platform dashboard, click My portal to go to your portal.

Click Content > My Content.
Click the New Item > Developer credentials.
In the Create developer credentials window, select API key credentials. Click Next.
Set an expiration date for your API key. API keys can be valid for up to one year. Then, click Next.
In the Privileges menu, check the following privileges:
- Location services > Basemaps
In the Grant item access menu, click Browse items.
Select the tile layer item you just created. Then, click Next.
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.
Click Next.
Review your selections and, when you are ready, click Next.
Click Generate the API key and go to item details page. I am ready to copy and save the key.
Click Next.
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.

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

Click Content > My Content.
Click the New Item > Developer credentials.
In the Create developer credentials window, select API key credentials. Click Next.
Set an expiration date for your API key. API keys can be valid for up to one year. Then, click Next.
In the Privileges menu, check the following privileges:
- Location services > Basemaps
In the Grant item access menu, click Browse items.
Select the tile layer item you just created. Then, click Next.
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.
Click Next.
Review your selections and, when you are ready, click Next.
Click Generate the API key and go to item details page. I am ready to copy and save the key.
Click Next.
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.

In your web browser, go to your ArcGIS Enterprise portal and sign in to your portal with your ArcGIS Enterprise account.

Click Content > My Content.
Click the New Item > Application.
Under Application Type, select Other application. Click Next.
Fill out the following properties:
- Title: Data hosting workflow - Application Id
- Tags: authentication,appid, data, hosting, workflow
- Summary: AppId used to provide authentication for data hosting workflows
Click Save. Once saved, you will be redirected to the item page.
Click the Overview tab.
Under Credentials, Temporary Token click Copy to clipboard to copy the access token.

Find the 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, Esri Leaflet, or the MapLibre ArcGIS plugin:

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

If you are using open source libraries such as OpenLayers or CesiumJS:

In the item page, scroll down to the bottom of the page to find the URL. For example:
- URL: https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_(vector_tiles)/VectorTileServer

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
{  "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.

If you are using an ArcGIS Maps SDK, Esri Leaflet, or the MapLibre ArcGIS plugin:

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

If you are using open source libraries such as OpenLayers or CesiumJS:

In the item page, scroll down to the bottom of the page to find the URL. For example:
- URL: https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_(vector_tiles)/VectorTileServer

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
{  "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.

If you are using an ArcGIS Maps SDK, Esri Leaflet, or the MapLibre ArcGIS plugin:

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

If you are using open source libraries such as OpenLayers or CesiumJS:

In the item page, scroll down to the bottom of the page to find the URL. For example:
- URL: https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_(vector_tiles)/VectorTileServer

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
{  "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

Select an ArcGIS Maps SDK or open source library.
In the layer item page, find the item ID or the URL and layer index.
In the code, set the access token and either the item ID or the URL.
Add the layer to the map.

ArcGIS Maps SDK for Javascript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Kotlin

Leaflet

MapLibre GL JS

OpenLayers

Use dark colors for code blocksCopy
 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: "b8f6941ceb874d72a7c37418c3e8108d",  },  opacity: 0.75,  })   const map = new Map({  basemap: "arcgis/light-gray",  layers: [parcelsLayer],  }) 
Go to API reference

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 URL.

Expand
Use dark colors for code blocksCopy
 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)  }) 
Expand
Go to tutorial