Learn how to perform data-driven styling to customize the appearance of vector tiles based on their underlying feature data.
You can use MapLibre GL JS to display vector tile data using custom styles. The MapLibre style specification 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 Developer or ArcGIS Online account to access the developer dashboard and create an API key.
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.
-
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, either complete the Display a map tutorial or .
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.
-
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
-
In CodePen, update
api
to use your key.Key Use dark colors for code blocks const apiKey = "YOUR_API_KEY"; const basemapEnum = "arcgis/streets"; const map = new maplibregl.Map({ container: "map", // the id of the div element style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${apiKey}`, zoom: 12, // starting zoom center: [-118.805, 34.027] // starting location [longitude, latitude] });
Add a vector tile source
Use a source of type vector
to reference the Santa Monica Mountains Parcels vector tile service in your application.
-
Add an event handler to the map
load
event.Use dark colors for code blocks <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:HumanGeography"; const map = new maplibregl.Map({ container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, // starting zoom center: [-118.4877, 34.0227] // starting location [longitude, latitude] }); map.once("load", () => { }); </script>
-
Inside the load event handler, add a vector tile source with id
parcels
. The source tells MapLibre GL JS how to access the data for the layer, but does not visually add it to the map.Use dark colors for code blocks map.once("load", () => { map.addSource("parcels", { type: "vector", tiles: [ "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf" ] }); });
Style parcels by use type
Use a layer of type fill
to style land parcels according to their Use
category.
-
Add a
fill
layer that references theparcels
source you created. Setsource-layer
toSanta_
to reference the original feature service.Monica_ Mountains_ Parcels Use dark colors for code blocks map.once("load", () => { map.addSource("parcels", { type: "vector", tiles: [ "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf" ] }); map.addLayer({ id: "parcels-fill", type: "fill", source: "parcels", "source-layer": "Santa_Monica_Mountains_Parcels", }); });
-
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 map.addLayer({ id: "parcels-fill", type: "fill", source: "parcels", "source-layer": "Santa_Monica_Mountains_Parcels", 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
The MapLibre style specification has limited options for customizing polygon outlines. Add a second vector tile layer to customize the parcel outlines.
-
Add a
line
layer that also references theparcels
source. Style the color, width, and opacity of the parcel outlines.Use dark colors for code blocks 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' ] } }); map.addLayer({ id: "parcels-outline", type: "line", source: "parcels", "source-layer": "Santa_Monica_Mountains_Parcels", paint: { 'line-color':'#000000', 'line-width':0.25, 'line-opacity':0.25 } });
-
Use
move
to display the outline layer on top of the fill layer.Layer Use dark colors for code blocks 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' ] } }); map.addLayer({ id: "parcels-outline", type: "line", source: "parcels", "source-layer": "Santa_Monica_Mountains_Parcels", paint: { 'line-color':'#000000', 'line-width':0.25, 'line-opacity':0.25 } }); map.moveLayer('parcels-outline');
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: