Add a vector tile layer

Learn how to add a vector tile layerA vector tile layer is a data layer used to access and display tiled data and its corresponding styles.Learn more to a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more.

A vector tile layerA vector tile layer is a data layer used to access and display tiled data and its corresponding styles.Learn more is a hosted data layerA data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene.Learn more 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 serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more using the default styling.

Prerequisites

Steps

Review the source data

This tutorial uses the Santa Monica Mountains Parcels vector tile serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more.

1. Go to the item pageAn item page is a web page in ArcGIS Online or the developer dashboard used to access and manage the properties for an item and the content it references such as a web map, hosted layer, or file.Learn more for the Santa Monica Mountains Parcels vector tile serviceA vector tile layer is a data layer used to access and display tiled data and its corresponding styles.Learn more.

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

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

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

Add a vector tile layer

To add the vector tile layer to your map, use the MapLibre ArcGIS plugin.

1. Use map.on('load', ...) to register an event handler that runs only once when the map has finished loading.

   Expand

   Use dark colors for code blocks

   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
     map.on("load", async () => {
   
     });
   

   Expand

2. Inside the load event, use the plugin to create a new VectorTileLayer object that references the item ID of the vector tile layer you copied earlier and add it to the map.

   Expand

   Use dark colors for code blocks

   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
     map.on("load", async () => {
   
       const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem("f0298e881b5b4743bbdf2c7d378acc84", {
         token: accessToken
       });
       vectorLayer.addSourcesAndLayersTo(map);
   
     });
   

   Expand

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: