Style vector tiles

Learn how to perform data-driven styling to customize the appearance of vector tiles based on their underlying feature data.

You can use Esri Leaflet to display vector tile data using custom styles. Esri Leaflet Vector supports the MapLibre style specification, which 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 feature service, you can also perform data-driven visualizations based on attributes of the original feature service.

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

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 your portal 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. Under Details, find the Created from property. Follow the link to view the item page for the original feature layer, Santa_Monica_Mountains_Parcels.

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

4. Review the values of the UseType field. You will use this field to style vector tiles in your application.

Create a new pen

1. To get started, you can complete the Display a map tutorial or use the Display a map tutorial solution (CodePen).

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
   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
         const map = L.map("map", {
           minZoom: 2
         })
   
         map.setView([34.02, -118.805], 13);
   
         const accessToken = "YOUR_ACCESS_TOKEN";
   
         const basemapEnum = "arcgis/streets";
   
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken
         }).addTo(map);
   

4. Run the code to ensure the basemap is displayed in the map.

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

Add a vector tile layer

Use the VectorTileLayer class from Esri Leaflet Vector to add data from the Santa Monica Mountains Parcels vector tile service to your application.

1. Create a VectorTileLayer and set the url to the URL of the Santa Monica Mountains Parcels vector tile service. 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
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken,
           pane: "tilePane"
         }).addTo(map);
   
         const parcelsUrl = "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer";
   
         L.esri.Vector.vectorTileLayer(
           parcelsUrl,
   
         ).addTo(map);
   
       </script>
   

   Expand

Style parcels by use type

Use the MapLibre style specification to style land parcels according to their UseType category.

1. Add a style function to the VectorTileLayer.

   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
         L.esri.Vector.vectorTileLayer(
           parcelsUrl,
   
           {
             style: function (style) {
   
               return style
             }
           }
   
         ).addTo(map);
   

   Expand

2. Add a custom fill-color to the new style 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

   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
         L.esri.Vector.vectorTileLayer(
           parcelsUrl,
   
           {
             style: function (style) {
   
               style.layers[0].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'
                 ],
               }
   
               return style
             }
           }
   
         ).addTo(map);
   

   Expand

3. Run the app. The vector tiles should appear with custom colors for residential, commercial, government, industrial, and institutional land parcels. All remaining parcels should be displayed in gray.

Add an outline layer

Add another style layer to the MapLibre style object to display parcel outlines.

1. Add a line layer to the list of layers in the style object. Set the source to esri and the source-layer to Santa_Monica_Mountains_Parcels to reference the vector tile service.

   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
           {
             style: function (style) {
   
               style.layers[0].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'
                 ],
               }
   
               style.layers.push({
                   id: "parcels-outline",
                   source: "esri",
                   "source-layer": "Santa_Monica_Mountains_Parcels",
                   type:'line',
   
               })
   
               return style
             }
           }
   

   Expand

2. 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
               style.layers.push({
                   id: "parcels-outline",
                   source: "esri",
                   "source-layer": "Santa_Monica_Mountains_Parcels",
                   type:'line',
   
                   paint:{
                     'line-color':'#000000',
                     'line-width':0.25,
                     'line-opacity':0.25
                   }
   
               })
   

   Expand

Run the app

In CodePen, run your code to display the map.

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: