Learn how to add a vector tile layer to a map.
A vector tile layer is a hosted data layer in ArcGIS. The data is vector tile data. You can publish a vector tile layer by from an existing hosted feature layer. To display ArcGIS vector tiles in a MapLibre GL JS app, use the MapLibre ArcGIS plugin.
In this tutorial, display a parcels layer from a vector tile service using the default styling.
Prerequisites
You need an ArcGIS Location Platform or ArcGIS Online account.
Steps
Review the source data
This tutorial uses the Santa Monica Mountains Parcels vector tile service.
-
Go to the item page for the Santa Monica Mountains Parcels vector tile service.
-
Get the item ID of the vector tile layer from the URL, for example:
- URL:
https://www.arcgis.com/home/item.html?id=f0298e881b5b4743bbdf2c7d378acc84 - Item ID:
f0298e881b5b4743bbdf2c7d378acc84
- URL:
-
Copy the item ID and store it somewhere safe. You will need this in a later step.
Get the starter app
Select a type of authentication and follow the steps to create a new app.
Choose API key authentication if you:
- Want the easiest way to get started.
- Want to build public applications that access ArcGIS Location Services and secure items.
- Have an ArcGIS Location Platform or ArcGIS Online account.
Choose user authentication if you:
- Want to build private applications.
- Require application users to sign in with their own ArcGIS account and access resources their behalf.
- Have an ArcGIS Online account.
To learn more about both types of authentication, go to Authentication.
Set up authentication
Set developer credentials
Use the API key or OAuth developer credentials so your application can access ArcGIS services.
Add a vector tile layer
To add the vector tile layer to your map, use the MapLibre ArcGIS plugin.
-
Use
map.on('load', ...)to register an event handler that runs only once when the map has finished loading.Use dark colors for code blocks map.on("load", async () => { }); -
Inside the load event, use the plugin to create a new
Vectorobject that references the item ID of the vector tile layer you copied earlier and add it to the map.Tile Layer Use dark colors for code blocks map.on("load", async () => { const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem("f0298e881b5b4743bbdf2c7d378acc84", { token: accessToken }); vectorLayer.addSourcesAndLayersTo(map); });
Run the app
Run the app.
You should see the vector tile layer with light blue parcels displayed on the basemap.What's next?
Learn how to use additional location services in these tutorials:
