Style vector tiles

Learn how to style vector tiles.

You can use OpenLayers to display vector tileA vector tile layer is a data layer used to access and display tiled data and its corresponding styles.Learn more 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 serviceA feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables.Learn more, you can also perform data-driven visualizations based on attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more of the original feature service.

In this tutorial, you style land parcels from a public vector tile serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more according to their use type.

Prerequisites

Steps

Review the source data

This tutorial uses the Santa Monica Mountains Parcels vector tile serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more. This vector tile service was created by publishing a feature serviceA feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables.Learn more as vector tiles using the portalArcGIS portal, also known as a portal, is a website with applications and tools that can be used to create, manage, access, and share geospatial content and data. It supports security and authentication, developer credentials, content and data service management, user and group management, and site administration. A portal can be hosted in Esri's infrastructure or your own infrastructure.Learn more. It contains the attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more 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 pageAn item page is a web page in ArcGIS Online or the developer dashboard used to access and manage the properties for an item and the content it references such as a web map, hosted layer, or file.Learn more for the Santa Monica Mountains Parcels vector tile layerA vector tile layer is a data layer used to access and display tiled data and its corresponding styles.Learn more.

2. Under Details, find the Created from property. Follow the link to view the item page for the original feature layerA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more, Santa_Monica_Mountains_Parcels.

3. Click the Data tab to view the layer's featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more and attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more. 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 and follow the steps to create a new app.

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

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 serviceA vector tile service is a data service that provides access to vector tile data and a style definition.Learn more.

1. 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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
       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. Add the data attributionData attribution is the requirement to display the names of data source providers in all applications when accessing ArcGIS content, layers, or services.Learn more for the vector tile layer source.

   • Go to the Santa Monica Mountains Parcels itemAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more.
   • Scroll down to the Acknowledgments section and copy its value.
   • Paste the copied value to the attributions property.
     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
     111
     112
     113
     114
     115
     116
     117
     118
     119
     120
     121
     122
     123
     124
     125
     126
     127
     128
     129
     130
     131
     132
     133
     134
     135
     136
     137
     138
     139
     140
     141
         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",
     
             // Attribution text retrieved from https://arcgis.com/home/item.html?id=f0298e881b5b4743bbdf2c7d378acc84
             attributions: ["| County of Los Angeles Office of the Assessor"]
     
           });
     
     

     Expand

3. 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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
         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",
   
           // Attribution text retrieved from https://arcgis.com/home/item.html?id=f0298e881b5b4743bbdf2c7d378acc84
           attributions: ["| County of Los Angeles Office of the Assessor"]
   
         });
   
         const parcelsLayer = new ol.layer.VectorTile({
           source: parcelsSource
         });
   

   Expand

4. 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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
         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 attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more 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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
         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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
         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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
         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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
         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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
             {
               "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
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
               "paint": {
                 "line-color": "#000000",
                 "line-width": 0.25,
                 "line-opacity": 0.25
               }
   
             }
   
           ]
   
         };
   
         olms.applyStyle(parcelsLayer, parcelsStyle, {
           updateSource: false
         });
   

   Expand

Run the app

Run the app.

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