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

You need an ArcGIS Location Platform or ArcGIS Online account.

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 ArcGIS.com 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.

Create a new pen

  1. 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 resources used in this tutorial.

  1. 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.
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    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
    const accessToken = "YOUR_ACCESS_TOKEN";
    const basemapEnum = "arcgis/streets";
    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]
    });
    

To learn about the other types of authentication available, go to Types of authentication.

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.

    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
      <script>
        const accessToken = "YOUR_ACCESS_TOKEN";
        const basemapEnum = "arcgis/streets";
        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.
    
        });
    
      </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.

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

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.

    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
        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"
            ]
          });
    
          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
        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"
            ]
          });
    
          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.

    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
        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"
            ]
          });
    
          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

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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.