Style vector tiles

Learn how to style vector tiles.

Style vector tiles using API key authentication

You can use MapLibre GL JS to display data using custom styles. The MapLibre style specification allows you to customize the fill, outline, opacity and other properties of vector tiles to display data effectively. If your vector tiles are published from a , you can also perform data-driven visualizations based on of the original feature service.

In this tutorial, you style land parcels from a public according to their use type.

Prerequisites

Steps

Review the source data

This tutorial uses the Santa Monica Mountains Parcels . This vector tile service was created by publishing a as vector tiles using the . It contains the of the original feature service, which can be accessed to style layers in your application. Find the original feature service in ArcGIS.com to view the names and values of different attributes.

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

  2. Under Details, find the Created from property. Follow the link to view the item page for the original , Santa_Monica_Mountains_Parcels.

  3. Click the Data tab to view the layer's and . Each feature represents a land parcel and has attributes such as an address, use code, and number of square feet.

  4. Review the values of the UseType field. You will use this field to style vector tiles in your 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 vector tile source

Use a of type vector to reference the Santa Monica Mountains Parcels in your application.

  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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
      <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/human-geography";
        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: 13, // starting zoom
          center: [-118.4877, 34.0227] // starting location [longitude, latitude]
        });
    
        map.once("load", () => {
    
        });
    
          // Add Esri attribution
          // Learn more in https://esriurl.com/attribution
          map._controls[0].options.customAttribution += " | Powered by Esri "
          map._controls[0]._updateAttributions()
    
      </script>
    
    Expand
  2. Inside the load event handler, add a vector tile source with id parcels. The source tells MapLibre GL JS how to access the data for the layer, but does not visually add it to the map.

    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
        map.once("load", () => {
    
          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.moveLayer('parcels-outline');
    
        });
    
    Expand
  3. Add the for the vector tile layer source.

    • Go to the LA County 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
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
          map.once("load", () => {
      
            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.moveLayer('parcels-outline');
      
          });
      
      Expand

Style parcels by use type

Use a of type fill to style land parcels according to their UseType category.

  1. Add a fill layer that references the parcels source you created. Set source-layer to Santa_Monica_Mountains_Parcels to reference the original feature service.

    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
        map.once("load", () => {
    
          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
  2. Add a custom fill-color to the layer. Use get to retrieve UseType attribute values, viewed in the previous step. Use case to create a conditional expression that assigns a unique color to each use type.

    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
          map.addLayer({
            id: "parcels-fill",
            type: "fill",
            source: "parcels",
            "source-layer": "Santa_Monica_Mountains_Parcels",
    
            paint: {
                "fill-color": ['case',
                    ['==', ['get','UseType'], 'Residential'], '#E8E191', // Yellow
                    ['==', ['get','UseType'], 'Commercial'], '#E580A2', // Red
                    ['==', ['get','UseType'], 'Government'], '#79E284', // Green
                    ['==', ['get','UseType'], 'Industrial'], '#C080E5', // Purple
                    ['==', ['get','UseType'], 'Institutional'], '#80BBE5', // Blue
                    '#bfbfbf'
                ]
            }
    
          });
    
    Expand

Add an outline layer

The MapLibre style specification has limited options for customizing polygon outlines. Add a second vector tile layer to customize the parcel outlines.

  1. Add a line layer that also references the parcels source. Style the color, width, and opacity of the parcel outlines.

    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
            paint: {
                "fill-color": ['case',
                    ['==', ['get','UseType'], 'Residential'], '#E8E191', // Yellow
                    ['==', ['get','UseType'], 'Commercial'], '#E580A2', // Red
                    ['==', ['get','UseType'], 'Government'], '#79E284', // Green
                    ['==', ['get','UseType'], 'Industrial'], '#C080E5', // Purple
                    ['==', ['get','UseType'], 'Institutional'], '#80BBE5', // Blue
                    '#bfbfbf'
                ]
            }
    
          });
    
          map.addLayer({
            id: "parcels-outline",
            type: "line",
            source: "parcels",
            "source-layer": "Santa_Monica_Mountains_Parcels",
            paint: {
                'line-color':'#000000',
                'line-width':0.25,
                'line-opacity':0.25
            }
          });
    
    
    Expand
  2. Use moveLayer to display the outline layer on top of the fill layer.

    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
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
            paint: {
                "fill-color": ['case',
                    ['==', ['get','UseType'], 'Residential'], '#E8E191', // Yellow
                    ['==', ['get','UseType'], 'Commercial'], '#E580A2', // Red
                    ['==', ['get','UseType'], 'Government'], '#79E284', // Green
                    ['==', ['get','UseType'], 'Industrial'], '#C080E5', // Purple
                    ['==', ['get','UseType'], 'Institutional'], '#80BBE5', // Blue
                    '#bfbfbf'
                ]
            }
    
          });
    
          map.addLayer({
            id: "parcels-outline",
            type: "line",
            source: "parcels",
            "source-layer": "Santa_Monica_Mountains_Parcels",
            paint: {
                'line-color':'#000000',
                'line-width':0.25,
                'line-opacity':0.25
            }
          });
    
          map.moveLayer('parcels-outline');
    
    Expand

Run the app

Run the app.

You should see the styled vector tile layer with parcels displayed on the basemap layer. Parcels should be styled in different colors based on their use type, and thin outlines should be present around each parcel.

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