Add a published vector tile layer to an existing map.
A vector tile layer is a hosted data layer. The data is vector tile data. You can create a vector tile layer by publishing your data with data management tools.
In this tutorial, you display a parcels layer from a public vector tile service, using the default styling.
Prerequisites
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Get an access token
You need an access token with the correct privileges to access the location services used in this tutorial.
- Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Item access
- Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
- Privileges
- In CodePen, set
esri
to your API key..Config.api Key Use dark colors for code blocks esriConfig.apiKey = "YOUR_ACCESS_TOKEN"; const map = new Map({ basemap: "arcgis/topographic" // basemap styles service });
To learn about other ways to get an access token, go to Types of authentication.
Add modules
- In the
require
statement, add theVector
module.Tile Layer The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD
require
function uses references to determine which modules will be loaded – for example, you can specify"esri/
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g.Map" Map
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. To learn more about the API's different modules visit the Overview Guide page.Use dark colors for code blocks require([ "esri/config", "esri/Map", "esri/layers/VectorTileLayer", "esri/views/MapView" ], function (esriConfig, Map, VectorTileLayer, MapView) {
Add the vector tile layer
- Create a
Vector
. Set the theTile Layer url
property to reference the vector tile layer.Use dark colors for code blocks ], function (esriConfig, Map, VectorTileLayer, MapView) { const vtlLayer = new VectorTileLayer({ url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/" });
Update the map
- Update the
basemap
property to display a gray basemap. Set thelayers
to thevtl
element.Layer Use dark colors for code blocks esriConfig.apiKey = "YOUR_ACCESS_TOKEN"; const map = new Map({ basemap: "arcgis/light-gray", layers: [vtlLayer] });
Run the App
In CodePen, run your code to display the map.
You should see the vector tile layer with parcels displayed on the basemap layer.
What's next?
Learn how to use additional API features and ArcGIS services in these tutorials: