Style vector tiles

Learn how to style vector tiles.

You can style vector tiles, such as customizing the fill, outline, opacity and other properties, and display it in a map. If your vector tiles are published from a feature service, you can also perform data-driven visualizations based on attributes of the original feature service. To customize ArcGIS vector tiles in a MapLibre GL JS app, use the MapLibre ArcGIS plugin.

In this tutorial, you style land parcels from a vector tile service according to their use type using the MapLibre ArcGIS plugin.

Prerequisites

Steps

Review the source data

This tutorial uses the Santa Monica Mountains Parcels vector tile service. This vector tile service was created by publishing a feature service as vector tiles using the portal. It contains the attributes 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 item page for the Santa Monica Mountains Parcels vector tile layer.

2. Get the item ID of the vector tile layer from the URL, for example:

   • URL: https://www.arcgis.com/home/item.html?id=f0298e881b5b4743bbdf2c7d378acc84
   • Item ID: f0298e881b5b4743bbdf2c7d378acc84

3. Copy the item ID and store it somewhere safe. You will need this in a later step.

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

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

6. 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 and follow the steps to create a new app.

Set up authentication

Set developer credentials

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

Add a vector tile layer

To add the vector tile layer to your map, use the MapLibre ArcGIS plugin.

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
   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
     map.on("load", async () => {
   
     });
   

   Expand

2. Inside the load event handler, use the plugin to create a new VectorTileLayer object that references the item ID of the vector tile layer you copied earlier.

   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
   92
   93
   94
   95
   96
   97
   98
   99
   100
       const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem("f0298e881b5b4743bbdf2c7d378acc84", { accessToken });
   

   Expand

3. Add the vector tile source to the map. The source tells MapLibre GL JS how to access the data for the layer, but does not visually add it to the map.

   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
   92
   93
   94
   95
   96
   97
   98
   99
   100
     map.on("load", async () => {
   
       const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem("f0298e881b5b4743bbdf2c7d378acc84", { accessToken });
   
       vectorLayer.addSourcesTo(map);
   
     });
   

   Expand

Style parcels by use type

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

1. Add a fill layer that inherits properties from the default layer. Set a custom fill-color using a case expression that assigns a unique color to each UseType attribute values viewed earlier.

   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
   92
   93
   94
   95
   96
   97
   98
   99
   100
     map.on("load", async () => {
   
       const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem("f0298e881b5b4743bbdf2c7d378acc84", { accessToken });
   
       vectorLayer.addSourcesTo(map);
   
       map.addLayer({
         ...vectorLayer.layer, // The layer property is a preformatted MapLibre layer, including a layer ID, source, source-layer, and paint/layout information.
         type: "fill",
         id: "custom-fill",
         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 inherits properties from the default layer. Style the color, width, and opacity of the parcel outlines.

   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
   92
   93
   94
   95
   96
   97
   98
   99
   100
       map.addLayer({
         ...vectorLayer.layer,
         type: "line",
         id: "custom-outline",
         paint: {
           "line-color": "#000000",
           "line-width": 0.25,
           "line-opacity": 0.25
         }
       });
   

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