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 OpenLayers to display vector tile data using custom styles. ol-mapbox-style 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 ArcGIS.com. 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. 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, either complete the Display a map tutorial or use this pen.

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

2. In CodePen, update apiKey to use your key.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   const apiKey = "YOUR_API_KEY";
   const basemapId = "arcgis/streets";
   const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${apiKey}`;
   olms.apply(map, basemapURL);
   

Add the vector tile layer

Add a vector tile Source and a vector tile Layer to your application to display data from the Santa Monica Mountains Parcels vector tile service.

1. Add a load event handler to the olms function call. Create a VectorTile source using an MVT feature format. Save it to a parcelsSource variable.

   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
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
         const apiKey = "YOUR_API_KEY";
         const basemapId = "ArcGIS:Streets";
         const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
   
         olms.apply(map, basemapURL).then((map) => {
   
           const parcelsSource = new ol.source.VectorTile({
             format: new ol.format.MVT(),
             url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`
           });
   
         });
   

   Expand

2. Create a VectorTile layer, referencing the parcelsSource source.

   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
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
           const parcelsSource = new ol.source.VectorTile({
             format: new ol.format.MVT(),
             url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`
           });
   
           const parcelsLayer = new ol.layer.VectorTile({
             source: parcelsSource
           });
   

   Expand

3. Add the layer to the map with map.addLayer.

   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
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
           const parcelsLayer = new ol.layer.VectorTile({
             source: parcelsSource
           });
   
           map.addLayer(parcelsLayer);
   

   Expand

Create a MapLibre style object

The ol-mapbox-style library will allow you to style data and reference the attributes of vector tiles. Create a MapLibre style object that styles land parcels according to their UseType attribute.

1. Create a MapLibre style object and set the root properties. Set version to 8 and include a source of type vector. Do not include other source parameters, as you have already created a source using OpenLayers.

   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
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
           map.addLayer(parcelsLayer);
   
           const parcelsStyle = {
               "version": 8,
               "sources": {
                   "parcels": {
                       "type": "vector",
                   }
               },
               "layers": [
   
               ]
           }
   

   Expand

2. Add a fill layer that references the parcels source. Set source-layer to Santa_Monica_Mountains_Parcels to reference the original feature 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
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
           const parcelsStyle = {
               "version": 8,
               "sources": {
                   "parcels": {
                       "type": "vector",
                   }
               },
               "layers": [
   
                   {
                       id:"parcels-fill",
                       source: "parcels",
                       "source-layer": "Santa_Monica_Mountains_Parcels",
                       type: "fill",
   
                   },
   
               ]
           }
   

   Expand

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

   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
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
           const parcelsStyle = {
               "version": 8,
               "sources": {
                   "parcels": {
                       "type": "vector",
                   }
               },
               "layers": [
   
                   {
                       id:"parcels-fill",
                       source: "parcels",
                       "source-layer": "Santa_Monica_Mountains_Parcels",
                       type: "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

Add a second vector tile layer to the style object to customize the parcel outlines.

1. Add a line layer to the layers list in the style object. Set the layer ID to parcels-outline, the source to parcels, and the source-layer to Santa_Monica_Mountains_Parcels to reference the original feature 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
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
           const parcelsStyle = {
               "version": 8,
               "sources": {
                   "parcels": {
                       "type": "vector",
                   }
               },
               "layers": [
   
                   {
                       id:"parcels-fill",
                       source: "parcels",
                       "source-layer": "Santa_Monica_Mountains_Parcels",
                       type: "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'
                           ]
                       }
   
                   },
   
                   {
                       id:"parcels-outline",
                       source: "parcels",
                       "source-layer": "Santa_Monica_Mountains_Parcels",
                       type:'line',
   
                   }
   
               ]
           }
   

   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
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
                   {
                       id:"parcels-outline",
                       source: "parcels",
                       "source-layer": "Santa_Monica_Mountains_Parcels",
                       type:'line',
   
                       paint:{
                           'line-color':'#000000',
                           'line-width':0.25,
                           'line-opacity':0.25
                       }
   
                   }
   

   Expand

Apply the layer style

Use ol-mapbox-style to apply the MapLibre style object to the vector tile layer.

1. Call olms.applyStyle() with the parcels layer and parcels style to customize the vector tiles. Set updateSource to false to preserve the OpenLayers source you provided.

   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
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
                       paint:{
                           'line-color':'#000000',
                           'line-width':0.25,
                           'line-opacity':0.25
                       }
   
                   }
   
               ]
           }
   
           olms.applyStyle(parcelsLayer,parcelsStyle, {
               updateSource: false
           })
   

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