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. The data is vector tile data. You can create a vector tile layer by publishing your data with data management toolsData management tools are ArcGIS software applications and functionality in portal and ArcGIS Pro that can be used by developers to create, manage, and edit content and data such as web maps, hosted layers, and data services for their applications.Learn more. 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 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

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.

Create the vector tile source

To access the vector tile serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more, 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. Inside olms load handler, 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
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
       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",
   
         });
   
         // Add Esri attribution. Learn more in https://esriurl.com/attribution
         const source = map.getLayers().item(0).getSource();
         const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ";
   
         const attributionFn = source.getAttributions();
         if (attributionFn) {
           source.setAttributions((ViewStateLayerStateExtent) => {
             return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)];
           });
         } else source.setAttributions(poweredByEsriString);
   
       });
   

   Expand

2. Add the data attributionData attribution is the requirement to display the names of data source providers in all applications when accessing ArcGIS content, layers, or services.Learn more for the vector tile layer source.

   • Go to the Santa Monica Mountains Parcels itemAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more.
   • Scroll down to the Acknowledgments section and copy its value.
   • Paste the copied value to the attributions property.
     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
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
         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",
     
             // Attribution text retrieved from https://arcgis.com/home/item.html?id=f0298e881b5b4743bbdf2c7d378acc84
             attributions: ["| County of Los Angeles Office of the Assessor"]
     
           });
     
           // Add Esri attribution. Learn more in https://esriurl.com/attribution
           const source = map.getLayers().item(0).getSource();
           const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ";
     
           const attributionFn = source.getAttributions();
           if (attributionFn) {
             source.setAttributions((ViewStateLayerStateExtent) => {
               return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)];
             });
           } else source.setAttributions(poweredByEsriString);
     
         });
     

     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
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
         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",
   
           // Attribution text retrieved from https://arcgis.com/home/item.html?id=f0298e881b5b4743bbdf2c7d378acc84
           attributions: ["| County of Los Angeles Office of the Assessor"]
   
         });
   
         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
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
         const parcelsLayer = new ol.layer.VectorTile({
           source: parcelsSource
         });
   
         map.addLayer(parcelsLayer);
   

   Expand

Run the app

Run the app.

You should see the vector tile layer with parcels displayed on the basemap layer.

What's next?

Learn how to use additional location services in these tutorials: