In this workflow, you will learn how to create, manage, and access a vector tile service in ArcGIS, and then build an application to access and display the vector tiles.
Prerequisites
You need an account for ArcGIS 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 ArcGIS.com and sign in with your ArcGIS Developer 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.
-
In Fields, leave all fields at their default settings and click Next.
-
In Location settings, leave the default settings and click Next.
-
Set the following information in the item details pane:
- Title:
Santa Monica Parcels
- Tags:
Santa Monica
Parcels
. - Summary:
Parcels in the Santa Monica Mountains.
- Title:
-
Click Next to create the new feature layer and feature service.
In your web browser, go to ArcGIS.com and sign in 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.
-
In Fields, leave all fields at their default settings and click Next.
-
In Location settings, leave the default settings and click Next.
-
Set the following information in the item details pane:
- Title:
Santa Monica Parcels
- Tags:
Santa Monica
Parcels
. - Summary:
Parcels in the Santa Monica Mountains.
- Title:
-
Click Next to create the new feature layer and feature service.
In your web browser, go to your ArcGIS Enterprise portal website and sign in 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.
-
In Fields, leave all fields at their default settings and click Next.
-
In Location settings, leave the default settings and click Next.
-
Set the following information in the item details pane:
- Title:
Santa Monica Parcels
- Tags:
Santa Monica
Parcels
. - Summary:
Parcels in the Santa Monica Mountains.
- Title:
-
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
andWorld 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.
- Provide an access token.
- Create and publish a portal item.
- Handle the results.
# 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}")
// 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}`);
});
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.com, use the Visualization tab to set the feature styles.
-
Go back to the item page 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, click Style options, update Types (unique symbols)
-
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:
- Residental:
#ffde3e
- Commercial:
#c29ed7
- Industrial:
#004c73
- Government:
#fc921f
- Institutional:
#149ece
- Recreational:
#267300
- Miscellaneous:
#b7814a
- Residental:
- Fill Color:
-
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
- Fill transparency:
-
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.com, use the Visualization tab to set the feature styles.
-
Go back to the item page 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, click Style options, update Types (unique symbols)
-
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:
- Residental:
#ffde3e
- Commercial:
#c29ed7
- Industrial:
#004c73
- Government:
#fc921f
- Institutional:
#149ece
- Recreational:
#267300
- Miscellaneous:
#b7814a
- Residental:
- Fill Color:
-
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
- Fill transparency:
-
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 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, click Style options, update Types (unique symbols)
-
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:
- Residental:
#ffde3e
- Commercial:
#c29ed7
- Industrial:
#004c73
- Government:
#fc921f
- Institutional:
#149ece
- Recreational:
#267300
- Miscellaneous:
#b7814a
- Residental:
- Fill Color:
-
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
- Fill transparency:
-
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:
use
Type
- Primary symbology:
-
In the Classes tab, click on the symbol for Commercial > Properties.
-
Set the fill colors for each
use
:Type -
In the Appearance section, click the color button > Color Properties... to display the color palette. Set the following property:
- HEX#:
#c29ed7
- Transparency:
30%
- HEX#:
-
Repeat the above step for the following
use
:Types - Fill Color:
- Residental:
#ffde3e
- Industrial:
#004c73
- Government:
#fc921f
- Institutional:
#149ece
- Recreational:
#267300
- Miscellaneous:
#b7814a
- Residental:
- Fill Color:
-
-
Set the outline colors for each
use
:Type - 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%
- HEX#:
- In the Appearance section, set the Outline width to
1.0 pt
. - Repeat the above steps for each
use
.Type
- In the Appearance section, click the outline color button > Color Properties... to display the color palette. Set the following property for
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
- Name:
- 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.
- Provide an access token.
- Retrieve feature layer properties.
- Define a new renderer.
- Update feature layer properties.
- Handle results.
# 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)
// 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);
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.
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.
In the item page, click the Settings tab.
Enable the following setting:
-
Optimize layer drawing
- In the item page, go to the Settings > Optimize Layer Drawing. Click Optimize layers and select the layer to optimize > Update.
Please see ArcGIS Platform, ArcGIS Online or ArcGIS Enterprise steps to manage service settings.
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
- In ArcGIS.com, 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.
- In ArcGIS.com, 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.
Please go to the steps to use ArcGIS Pro to publish the vector tile service.
The first step during the creation of a vector tile service is to author a map to accomodate 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
- Title:
- Click New Bounding Box and set the following information:
- West:
-118.521
- East:
-118.440
- South:
33.992
- North:
34.053
- West:
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 (auxialiary 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
Santa
as the name and path for the Output File.Monica Vector Tile Package - Enable the Package for ArcGIS Online | Bing Maps | Google Maps checkbox.
- Input Map:
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
- Title:
- 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.
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}"
)
// 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}`)
})
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 ArcGIS.com, 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 ArcGIS.com, 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.
Please see ArcGIS Platform, ArcGIS Online or ArcGIS Enterprise steps to manage vector tile service settings.
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 Developer 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 Online or ArcGIS Enterprise account. Instead, to access private items, you need to generate a token from an OAuth 2.0 workflow.
-
Sign in to the developer dashboard.
-
Click the API keys tab > Edit API key.
-
In the Overview, find the Maps, layers, and data box. If you have an ArcGIS Developer account, you will be able to click Set content item scopes.
-
Select the item you want to scope > Add items.
-
Copy the API key.
In your web browser, go to ArcGIS.com and sign in with your ArcGIS Online 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
- Title:
- 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.
In your web browser, go to your ArcGIS Enterprise portal website and sign in 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
- Title:
- 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.
Please see ArcGIS Platform, ArcGIS Online or ArcGIS Enterprise steps to get an access token.
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**:
- 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 MapLibre GL JS or OpenLayers:
-
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/GVgb Jbqm8h XASVYi/arcgis/rest/services/Santa_ Monica_ parcels_ (vector_ tiles)/Vector Tile Server
- Service URL:
-
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 blocks Copy { "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)"
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 or** Esri Leaflet**:
- 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 MapLibre GL JS or OpenLayers:
-
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/GVgb Jbqm8h XASVYi/arcgis/rest/services/Santa_ Monica_ parcels_ (vector_ tiles)/Vector Tile Server
- Service URL:
-
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 blocks Copy { "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)"
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 or** Esri Leaflet**:
- 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 MapLibre GL JS or OpenLayers:
-
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/GVgb Jbqm8h XASVYi/arcgis/rest/services/Santa_ Monica_ parcels_ (vector_ tiles)/Vector Tile Server
- Service URL:
-
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 blocks Copy { "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)"
With the vector tile layer published, you can now access the layer either using the {z}/{y}/{x}.pbf
or root.json
paths.
Please see ArcGIS Platform, ArcGIS Online or ArcGIS Enterprise steps to find the service URL and item ID.
Display vector tiles
-
Select an ArcGIS Maps SDK or open source library.
-
In the layer item page, find the item ID or the service URL and layer index.
-
In the code, set the access token and either the item ID or the service URL.
-
Add the layer to the map.
const portal = new Portal({
url: "https://www.arcgis.com/",
authMode: "immediate"
});
// OR
esriConfig.apiKey = "YOUR_API_KEY" // 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.
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.
Add a feature layer
Access and display point, line, and polygon features from a feature service.
Add a vector tile layer
Access and display a vector tile layer in a map.
Add a map tile layer
Access and display a map tile layer in a map.
Style a feature layer
Use symbols and renderers to style feature layers.
Query a feature layer (spatial)
Execute a spatial query to get features from a feature layer.
Query a feature layer (SQL)
Execute a SQL query to access polygon features from a feature layer.
Edit feature data
Add, update, and delete features in a feature service.
Display a popup
Format a popup to show attributes in a feature layer.