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
You need an ArcGIS Location Platform or ArcGIS Online account.
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.
-
Go to the item page for the Santa Monica Mountains Parcels vector tile layer.
-
Under Details, find the Created from property. Follow the link to view the item page for the original feature layer, Santa_Monica_Mountains_Parcels.
-
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.
-
Review the values of the
Use
field. You will use this field to style vector tiles in your application.Type
Create a new pen
- To get started, you can complete the Display a map tutorial or use the .
Get an access token
You need an access token with the correct privileges to access the resources used in this tutorial.
-
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.
- Privileges
-
Copy the API key access token to your clipboard when prompted.
-
In CodePen, update the
access
variable to use your access token.Token Use dark colors for code blocks const accessToken = "YOUR_ACCESS_TOKEN"; const basemapId = "arcgis/outdoor"; const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`; olms.apply(map, basemapURL);
-
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 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.
-
Create a
Vector
source using anTile MVT
feature format. Save it to aparcels
variable.Source Use dark colors for code blocks const accessToken = "YOUR_ACCESS_TOKEN"; const basemapId = "arcgis/outdoor"; const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}` 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`, });
-
Add the data attribution for the vector tile layer source.
- Go to the Santa Monica Mountains Parcels item.
- Scroll down to the Credits (Attribution) section and copy its value.
- Create an
attribution
property and paste the attribution value from the item.Use dark colors for code blocks const accessToken = "YOUR_ACCESS_TOKEN"; const basemapId = "arcgis/outdoor"; const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}` 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'] });
-
Create a
Vector
layer, referencing theTile parcels
source.Source Use dark colors for code blocks 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 });
-
Add the layer to the map with
map.add
.Layer Use dark colors for code blocks const parcelsLayer = new ol.layer.VectorTile({ source: parcelsSource }); map.addLayer(parcelsLayer);
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 Use
attribute.
-
Create a MapLibre style object and set the root properties. Set
version
to 8 and include a source of typevector
. Do not include other source parameters, as you have already created a source using OpenLayers.Use dark colors for code blocks map.addLayer(parcelsLayer); const parcelsStyle = { "version": 8, "sources": { "parcels": { "type": "vector", } }, "layers": [ ] }
-
Add a
fill
layer that references theparcels
source. Setsource-layer
toSanta
to reference the original feature service._Monica _Mountains _Parcels Use dark colors for code blocks const parcelsStyle = { "version": 8, "sources": { "parcels": { "type": "vector", } }, "layers": [ { id:"parcels-fill", source: "parcels", "source-layer": "Santa_Monica_Mountains_Parcels", type: "fill", }, ] }
-
Add a custom
fill-color
to the layer. Useget
to retrieveUse
attribute values, viewed in the previous step. UseType case
to create a conditional expression that assigns a unique color to each use type.Use dark colors for code blocks 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' ] } }, ] }
Add an outline layer
Add a second vector tile layer to the style object to customize the parcel outlines.
-
Add a
line
layer to thelayers
list in the style object. Set the layer ID toparcels-outline
, the source toparcels
, and thesource-layer
toSanta
to reference the original feature service._Monica _Mountains _Parcels Use dark colors for code blocks 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', } ] }
-
Style the color, width, and opacity of the parcel outlines.
Use dark colors for code blocks { 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 } }
Apply the layer style
Use ol-mapbox-style to apply the MapLibre style object to the vector tile layer.
-
Call
olms.apply
with the parcels layer and parcels style to customize the vector tiles. SetStyle() update
toSource false
to preserve the OpenLayers source you provided.Use dark colors for code blocks paint:{ 'line-color':'#000000', 'line-width':0.25, 'line-opacity':0.25 } } ] } olms.applyStyle(parcelsLayer,parcelsStyle, { updateSource: false })
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: