Style layers in a web map

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

You can change the basemap and style data layers from a web map using the Map Viewer. You style data layers by defining symbols and applying them with a renderer. Layers can be styled with a single symbol for all locations, or with multiple symbols based on attribute or numeric values. You can also configure pop-ups and labels. Once the layers in a web map are styled, you can load it into an application using the web map's item ID.

In this tutorial, you change the basemap and style feature layers 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.

Update the basemap

It is generally best practice to start with the basemap when styling a web map. Basemaps set the context for the other layers that will be drawn over it. To improve the quality of the basemap, use the World Hillshade image tile layer as the basemap, and add the World Topographic Map vector tile layer over it.

1. In the left-panel, click Basemap > Current Basemap > Add layer.

   • In the drop down, click Living Atlas and type: topographic vector.
   • Click World Topographic Map (by Esri) > Use as basemap (at the bottom).

2. Go back to the Basemap panel > Add layer.

   • In the drop down, click Living Atlas and type: world hillshade.
   • Click World Hillshade (by Esri) > Add layer to basemap (at the bottom).

3. Close the panel to go back to the Basemap panel. Under Base, drag World Topographic Map above World Hillshade.

4. In the left-panel, click Basemap to close the window.

Style trailheads (points)

You can style point features by setting a symbol, such as simple shapes or icons, in a simple renderer. All features in the view will display the same symbol. In this instance, all trailheads will display a hiker icon.

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 trail width (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. Use the Trails layer to show elevation gain of each trail. Trails with more elevation gain will be wider than trails with less elevation gain.

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

2. Double click Trails-Trails_0.

3. On the right, in the Properties panel, click Styles.

4. Under Choose attributes > +Field > ELEV_GAIN > Add.

5. Find Select a drawing style > Counts and Amounts (size) > Symbol style and set the following:

   • Custom color : #BA55D3 (purple)
   • Line transparency : 25%
   • Size range > Custom:
     • Min: 3
     • Max: 7

6. 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 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. Click Styles > Try a drawing style > Location (single symbol).

8. Click Symbol style and set the following properties:

   • Custom color: #FF91FF (light purple/pink)
   • Stroke:
     • Pattern : a dotted line
     • Width: 2

9. 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 80%.

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:

Create a web map

Use Map Viewer to create a web map for your application.

Map Viewer 

Display a web map

Create and display a map from a web map.

JavaScript .NET Kotlin Swift Java Qt 

Display a custom basemap style

Add and display a styled vector tile basemap layer.

JavaScript Esri Leaflet MapLibre OpenLayers 

Style a feature layer

Use symbols and renderers to style feature layers.

JavaScript .NETJava Qt Esri Leaflet MapLibre OpenLayers CesiumJS