Learn how to modify the style of a vector tile layer with the Vector Tile Style Editor.
You can update the styles of an existing vector tile layer with the Vector Tile Style Editor, including the labels, colors, layer zoom, and visibility.
In this tutorial, you create and save a new style for the Santa Monica Parcels vector tile layer with the Vector Tile Style Editor.
Prerequisites
You need an account for ArcGIS Platform, ArcGIS Online, or ArcGIS Enterprise to style hosted data services. If you need an account, go to Get started.
Steps
Access the Vector Tile Style Editor
In most cases, you style the features in a feature layer before publishing a vector tile layer. However, if you want to update the style of a published vector tile layer, you can use the Vector Tile Style Editor. In this step, you will use the Santa Monica Parcels vector tile layer as a starting point for the tutorial. Or, if you prefer, use your own vector tile layer from the Create a vector tile service for an app workflow.
-
In your web browser, go to ArcGIS.com to sign in with your ArcGIS Developer or ArcGIS Online account. Or, go to your Enterprise portal to sign in with your ArcGIS Enterprise account.
-
Go to the Santa Monica Parcels Example item page.
-
On the right, click Edit in Vector Tile Style Editor.
Update layer styles
You can use the Edit layer styles or Edit JSON tools to edit layer styles. Use both to update the colors of the layer.
-
In the Vector Style Editor, expand Santa Monica Parcels to see the layers and associated colors. For each selected layer, update the Color in the Appearance box for the following layers:
-
Santa_Monica_parcels/Residential: from
#ffde3eto#0066cc. -
Santa_Monica_parcels/Commercial: from
#c29ed7to#6b78ff. -
Santa_Monica_parcels/Government: from
#f8a952to#0d71ff. -
Santa_Monica_parcels/Industrial: from
#004c73to#61dbf2
-
-
Click on the Santa_Monica_parcels/Institutional layer.
-
In the navigation panel, click on the code icon. You will see the layer
idhighlighted on line 114. -
On line 130, change the
fill-colorto#6bb5ff> Update to see the new color. -
Scroll down and locate the Santa_Monica_parcels/Recreational layer on line 144.
-
On line 160, change the
fill-colorto#3b2fbf> Update to see the new color. -
Scroll down and locate the Santa_Monica_parcels/Miscellaneous layer on line 156.
-
On line 172, change the
fill-colorto#0095e0> Update to see the new color.
Save the layer
When you are finished styling the layer you can save and share the style. Saving the style will create a new item you can access and display in an application. You can also set the security of the item to the appropriate sharing level.
- In the navigation panel, click on the Save as icon.
- In the box, set the:
- Title
- Tags
- Folder
- Optionally, set the sharing level of layer.
The new style should look something like this.
What's next
Learn how to use additional tools, APIs, and location services in these tutorials:
