Tutorial: Style layers in a web map

Learn how to use Map Viewer to style layers in a web map.

This tutorial shows you how to use the Map Viewer to style feature layers in a web map. The layers are created from the Los Angeles GeoHub dataset.

Prerequisites

Steps

Copy the web map

Use the unstyled LA Parks and Trails Map as a starting point for the tutorial. Or, if you prefer, use your own web map from the Create a web map tutorial.

1. Go to the LA Parks and Trails Map (unstyled) web map.

2. Click Sign In > Save > Save As to copy the map. At minimum, you need a title and tags to save the web map.

Style trailheads (points)

You can style point features by setting a symbol, such as simple shapes or icons, in a simple renderer. Use a hiker icon to display all features in the view.

1. In the left panel, click Layers > Trailheads to open the layer's properties.

2. In the right panel, click Styles > Location (Single symbol) > Symbol style to open a symbol panel.

3. In the dropdown menu, select Points of Interest.

4. Scroll down and select the hiker icon with a black background and white foreground. Adjust the icon size to 18 pixels.

5. Click Done > Done.

Style trailheads with labels

Use labels to display trailhead names.

1. In the Properties panel, click Labels > +Add label class . Verify that Enable labels is switched on.

2. Select the TRL_NAME attribute in size 13pixels > Edit label style

3. Close the panel.

Style trails (lines)

You can classify features by numeric field values to show differences in the data. You style line features using a symbol and a simple renderer.

1. Go back to the Layers panel on the left.

2. Click Trails.

3. On the right, in the Properties panel, click Edit layer style.

4. In Pick a style > Location (single symbol).

5. In Symbol style, set the following:

   • Color: Black
   • Transparency: 0
   • Width: 1.15

6. Set the Pattern to a dotted line.

7. Click Done > Done

Style bike-only trails

Use the Filter tool to style bike-only trails.

1. In the right panel, click Add data > Web service.

2. Enter the Trails-Trails_0 layer URL: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0 > Add to map.

3. Click Layers.

4. Rename Trails 0 to: Bike Only Trails.

5. Click on the layer to open the Properties panel.

6. Click Filter > +Add Expression to set the fields: USE_BIKE is YES > Save.

7. On the right, in the Properties panel, click Edit layer style.

8. In Pick a style > Location (single symbol).

9. Click Symbol style and set the following properties:

   • Select color: `#efefef (white/gray)
   • Stroke:
     • Pattern : a solid line
     • Width: 2

10. Click Done > Done.

Style park areas (polygons)

You can apply different styles to features by classifying them by unique field values. You style polygons with a simple fill symbol and adding it to a simple renderer. Use the TYPE field in the Parks and Open Space layer to classify the data and apply a different color symbol to each land type.

1. Double click the Parks and Open Space layer to open the Properties panel.

2. Click Styles.

3. In Choose attributes > +Fields.

4. Select TYPE > Add.

5. In Try a drawing style > Types(unique symbols).

6. Click Symbol style to select a color ramp. Set the fill transparency to 0.

7. Click Done > Done.

8. In the left panel, click Save to save your map.

Explore the web map

1. In the left panel, click Legend to see the styled layers. Your web map should look something like this.

2. Click on features in the map to display attribute data.

You can load the styled web map with its item ID. When the web map is loaded, all of the data and basemap layer settings will be applied.

What's next?

Learn how to use additional tools, APIs, and location services in these tutorials:

Display a web map

Create and display a map from a web map.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKPython API

Display a custom basemap style

Add and display a styled vector tile basemap layer.

JavaScript Maps SDKEsri LeafletMapLibre GL JSOpenLayers

Style a feature layer

Use symbols and renderers to style feature layers.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKEsri LeafletMapLibre GL JSOpenLayersCesiumJS