Add a vector tile layer

Learn how to add a vector tile layer to a 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. To display vector tiles in OpenLayers, you use a VectorTile source to retrieve the tiles, and a VectorTile layer to display them.

In this tutorial, you display a parcels layer from a public vector tile service, using the default styling.

Prerequisites

Steps

Create a new pen

1. To get started, either complete the Display a map tutorial or use this pen.

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

2. In CodePen, update apiKey to use your key.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   const apiKey = "YOUR_API_KEY";
   const basemapId = "arcgis/streets";
   const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${apiKey}`;
   olms.apply(map, basemapURL);
   

Create the vector tile source

To access the vector tile service, you use a VectorTile source. You will pass the URL, which contains {x}, {y} and {z} fields. These are substituted with appropriate values as each tile is requested. As the user pans and zooms the viewport, more tiles will be requested automatically.

As the format parameter, you will pass an MVT (Mapbox Vector Tile) feature format, which tells OpenLayers how to decode each vector tile file as it is received.

1. Add a load event handler to the olms function call. Create a VectorTile source using an MVT feature format. Save it to a parcelsSource variable.

   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
         const apiKey = "YOUR_API_KEY";
         const basemapId = "arcgis/streets";
         const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${apiKey}`;
   
         olms.apply(map, basemapURL).then((map) => {
   
           const parcelsSource = new ol.source.VectorTile({
             format: new ol.format.MVT(),
             url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`
           });
   
         });
   

   Expand

Add the vector tile layer

To display the data, you use a VectorTile layer. This tells OpenLayers how to render the data from the source on the map. Finally, you add the layer to the map using map.addLayer.

1. Create a VectorTile layer, referencing the parcelsSource source.

   More info

   The layer will be rendered with the default styling, as no style information was provided. See the OpenLayers documentation for more details.

   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
           const parcelsSource = new ol.source.VectorTile({
             format: new ol.format.MVT(),
             url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`
           });
   
           const parcelsLayer = new ol.layer.VectorTile({
             source: parcelsSource
           });
   

   Expand

2. Add the layer to the map with map.addLayer.

   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
           const parcelsLayer = new ol.layer.VectorTile({
             source: parcelsSource
           });
   
           map.addLayer(parcelsLayer);
   

   Expand

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 ArcGIS location services in these tutorials: