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 in ArcGIS. 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 MapLibre GL JS, you create a source to retrieve the tiles, and a layer to display them.

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

Prerequisites

Steps

Review the source data

This tutorial uses the Santa Monica Mountains Parcels vector tile service. Go to the item page of the vector tile service in the portal to find important styling information.

1. Go to the item page for the Santa Monica Mountains Parcels vector tile layer.

2. Click View style from the item details page.

3. Find the source-layer property in the JSON file and copy the exact value. You will use this to style vector tiles in your MapLibre GL JS application.

Get the starter app

Select a type of authentication below and follow the steps to create a new application.

Set up authentication

Create developer credentials in your portal for the type of authentication you selected.

Set developer credentials

Use the API key or OAuth developer credentials so your application can access location services.

Add a load event handler

You need to wait for the map to be completely loaded before adding any layers

1. Add an event handler to the map load event.

   More info

   For more information about the load event, see the MapLibre GL JS documentation.

   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
     <script>
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "YOUR_PORTAL_URL" // Your portal URL
       // })
   
       // const accessToken = session.token;
       const basemapEnum = "arcgis/outdoor";
       const map = new maplibregl.Map({
         container: "map", // the id of the div element
         style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${accessToken}`,
         zoom: 12, // starting zoom
         center: [-118.805, 34.027] // starting location [longitude, latitude]
       });
   
       map.once("load", () => {
         // This code runs once the base style has finished loading.
   
       });
   
         // Attribute Esri in your app
         // Add Esri attribution
         // Learn more in https://esriurl.com/attribution
         map._controls[0].options.customAttribution += " | Powered by Esri "
         map._controls[0]._updateAttributions()
   
     </script>
   

   Expand

Add a vector tile source

You use a source of type vector to add the vector tiles. The source tells MapLibre GL JS how to access the data for the layer, but does not visually add it to the map.

1. Inside the load event handler, add a vector tile source with id parcels.

   More info

   While there are several types of source, the two most common are vector (for vector tiles) and geojson (for a set of features represented as GeoJSON).

   For more information, see the MapLibre Style Specification

   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
       map.once("load", () => {
         // This code runs once the base style has finished loading.
   
         map.addSource("parcels", {
           type: "vector",
           tiles: [
             "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf"
           ],
   
         });
   
       });
   

   Expand

2. Add the data attribution for the vector tile source.

   • Go to the Santa Monica Mountains Parcels item.
   • Scroll down to the Credits (Attribution) section and copy its value.
   • Create an attribution property and paste the attribution value from the item.
     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
         map.once("load", () => {
           // This code runs once the base style has finished loading.
     
           map.addSource("parcels", {
             type: "vector",
             tiles: [
               "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
             attribution: 'County of Los Angeles Office of the Assessor'
     
           });
     
         });
     

     Expand

Add a fill layer

A layer in MapLibre GL JS is a visual representation of the data within one source. Use a layer of type fill to display the parcels.

1. Use addLayer to add a fill layer with id parcels-fill. Set source to parcels to reference the source you just created.

   More info

   The type property defines how it will be displayed. Commonly used layer types include circle, line, fill and symbol (used for text and icons).

   The id property is an identifier you choose. You will need it if you want to manipulate the layer, such as hiding it or changing its properties dynamically.

   The source property references the id property of the source you just created.

   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
       map.once("load", () => {
         // This code runs once the base style has finished loading.
   
         map.addSource("parcels", {
           type: "vector",
           tiles: [
             "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
           attribution: 'County of Los Angeles Office of the Assessor'
   
         });
   
         map.addLayer({
           id: "parcels-fill",
           type: "fill",
           source: "parcels",
   
       });
   

   Expand

2. Add a source-layer attribute and paste the Santa_Monica_Mountains_Parcels value that you copied from the layer's item page.

   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
       map.once("load", () => {
         // This code runs once the base style has finished loading.
   
         map.addSource("parcels", {
           type: "vector",
           tiles: [
             "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
           attribution: 'County of Los Angeles Office of the Assessor'
   
         });
   
         map.addLayer({
           id: "parcels-fill",
           type: "fill",
           source: "parcels",
   
           "source-layer": "Santa_Monica_Mountains_Parcels",
   
       });
   

   Expand

3. Add paint properties to color the parcels light blue.

   More info

   The source-layer property tells MapLibre GL JS which layer within the vector tiles to display. If you enter the source-layer property incorrectly, nothing will display.

   The paint properties control the visual attributes of the layer and are specific to the type of layer.

   For more information, see the MapLibre Style Specification.

   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
       map.once("load", () => {
         // This code runs once the base style has finished loading.
   
         map.addSource("parcels", {
           type: "vector",
           tiles: [
             "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
           attribution: 'County of Los Angeles Office of the Assessor'
   
         });
   
         map.addLayer({
           id: "parcels-fill",
           type: "fill",
           source: "parcels",
   
           "source-layer": "Santa_Monica_Mountains_Parcels",
   
           paint: {
             "fill-color": "hsl(200, 80%, 50%)",
             "fill-opacity": 0.5,
             "fill-outline-color": "white"
           }
         });
   
       });
   

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