Add a vector tile layer

Learn how to add a to a .

Add a vector tile layer using API key authentication

A is a hosted in ArcGIS. The data is vector tile data. You can create a vector tile layer by publishing your data with . To display vector tiles in MapLibre GL JS, you create a to retrieve the tiles, and a to display them.

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

Prerequisites

Steps

Review the source data

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

  1. Go to the for the Santa Monica Mountains Parcels .

  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.

You can choose one of the following to create a new CodePen:

  • Option 1: Complete the Display a map tutorial; or,
  • Option 2: Start from the Display a map tutorial .

Set up authentication

Create in your for the type of authentication you selected.

Create a new with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an with the following :
    • Privileges
      • Location services > Basemaps
    • Item access
      • Note: If you are using your own custom data layer for this tutorial, you need to grant the access to the layer item. Learn more in Item access privileges.
  2. Copy the API key access token to your clipboard when prompted.

Set developer credentials

Use the API key or OAuth so your application can access .

  1. Update the accessToken variable to use your API key.

    Expand
    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
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN"
    
    Expand

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
    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 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
    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 for the vector tile source.

    • Go to the Santa Monica Mountains Parcels .
    • Scroll down to the Credits (Attribution) section and copy its value.
    • Create an attribution property and paste the attribution value from the item.
      Expand
      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 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
    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 .

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

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

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close