Tutorial: Style a vector tile layer

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

Steps

Access the Vector Tile Style Editor

In most cases, you style the features in a feature layerA feature layer (client-side) is a data layer that can access and display features from a feature service that has the same type of geometry and attribute fields.Learn more 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 tiles 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.

1. In your web browser, go to ArcGIS.com to sign in to your portal with your ArcGIS Location PlatformArcGIS Location Platform, formerly known as ArcGIS Platform, is a Platform as a Service (PaaS) product that gives developers access to location services, APIs, and tools to build mapping and spatial analysis applications. It is subscription-based and requires an ArcGIS Location Platform account.Learn more or ArcGIS OnlineArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account.Learn more account. Or, go to your Enterprise portal to sign in with your ArcGIS EnterpriseAn ArcGIS Enterprise account is an identity for an instance of ArcGIS Enterprise. It can be used to access ArcGIS Enterprise tools, applications, and services, and to develop applications.Learn more account.

2. Go to the Santa Monica parcels vector tiles item page.

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

1. 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 rgba(255,222,62,0.7) to rgba(255, 222, 62, 0.7).
   • Santa_Monica_parcels/Commercial: from rgba(194,158,215,0.7) to rgba(107, 120, 255, 0.7).
   • Santa_Monica_parcels/Industrial: from rgba(0,76,115,0.7) to rgba(97, 219, 242, 0.7).
   • Santa_Monica_parcels/Government: from rgba(252,146,31,0.7) to rgba(13, 113, 255, 0.7).

2. Click on the Santa_Monica_parcels/Institutional layer.

3. In the navigation panel, click Edit JSON. You will see the layer id highlighted on line 85.

4. On line 98, change the fill-color to rgba(107, 181, 255, 0.7) > Update to see the new color.

5. Scroll down and locate the Santa_Monica_parcels/Miscellaneous layer on line 103.

6. On line 116, change the fill-color to rgba(0, 149, 224, 0.7) > Update to see the new color.

7. Scroll down and locate the Santa_Monica_parcels/Recreational layer on line 121.

8. On line 134, change the fill-color to rgba(59, 47, 191, 0.7) > 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 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 you can access and display in an application. You can also set the security of the item to the appropriate sharing level.

1. In the navigation panel, click on the Save as icon.
2. In the box, set the:
   • Title
   • Tags
   • Folder
3. 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:

Tutorials

Add a vector tile layer

Access and display a vector tile layer in a map.

JavaScript Maps SDKLeafletMapLibre GL JSOpenLayers

Workflows

Create a vector tile service for an app

Learn how to import parcel data, style a feature layer, and then create a vector tile service for an app.