Style vector tiles | OpenLayers

Learn how to style vector tiles.

Style vector tiles using API key authentication

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

Choose API key authentication if you:

Want the easiest way to get started.
Want to build public applications that access ArcGIS Location Services and secure items.
Have an ArcGIS Location Platform or ArcGIS Online account.

Choose user authentication if you:

Want to build private applications.
Require application users to sign in with their own ArcGIS account and access resources their behalf.
Have an ArcGIS Online account.

To learn more about both types of authentication, go to Authentication.

You can choose one of the following to create a new CodePen:

Option 1: Complete the Display a map tutorial; or,
Option 2: Start from the Display a map tutorial .

Set up authentication

Create a new API key credential with the correct privileges to get an access token.

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.

Set developer credentials

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

Update the accessToken variable to use your API key.

Expand
Use dark colors for code blocks
 /* Use for API key authentication */  const accessToken = "YOUR_ACCESS_TOKEN"; 
Expand

In both the index.html and callback.html files, replace YOUR_CLIENT_ID and YOUR_REDIRECT_URL with the client ID and redirect URL of your OAuth credentials.

index.html
Use dark colors for code blocks
 /* Use for user authentication */  const clientId = "YOUR_CLIENT_ID"; // Your client ID from OAuth credentials  const redirectUri = ""YOUR_REDIRECT_URI""; // The redirect URL registered in your OAuth credentials  const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({  clientId,  redirectUri,  portal: "https://www.arcgis.com/sharing/rest" // Your portal URL  });   const accessToken = session.token; 

callback.html
Use dark colors for code blocks
 arcgisRest.ArcGISIdentityManager.completeOAuth2({  clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials  redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials  portal: "https://www.arcgis.com/sharing/rest" // Your portal URL  }); 

Run the app and ensure you can sign in successfully.

If you are unable to sign in, make sure you have the correct redirect URL and port. This URL varies based on your application and typically takes the format of https://<server>[:port]/callback.html or http://my-arcgis-app:/auth. For example, if you are running an application on http://127.0.0.1:5500/, set http://127.0.0.1:5500/callback.html as your redirect URL in the index.html and callback.html file and your developer credential. They all have to match!

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 VectorTile source using an MVT feature format. Save it to a parcelsSource variable.

Expand
Use dark colors for code blocks
 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

Add the data attribution for the vector tile layer source.

Go to the Santa Monica Mountains Parcels item.
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
 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

Create a VectorTile layer, referencing the parcelsSource source.

Expand
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  }); 
Expand

Add the layer to the map with map.addLayer.

Expand
Use dark colors for code blocks
 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.

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
 map.addLayer(parcelsLayer);   const parcelsStyle = {  version: 8,  sources: {  parcels: {  type: "vector"  }  },  layers: [   ]   }; 
Expand

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
 const parcelsStyle = {  version: 8,  sources: {  parcels: {  type: "vector"  }  },  layers: [   {  "id": "parcels-fill",  "source": "parcels",  "source-layer": "Santa_Monica_Mountains_Parcels",  "type": "fill",   },   ]   }; 
Expand

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

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

Style the color, width, and opacity of the parcel outlines.

Expand
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  }   } 
Expand

Apply the layer style

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

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

Display a custom basemap style

Add a custom vector basemap style to a map.

Change the basemap style

Switch a vector basemap style on a map.

Find nearby places and details

Find places near a location and get detailed place information.