Style feature layers | ArcGIS for Developers

ArcGIS Tutorials ArcGIS Online Styling & Visualization

Overview

You will learn: how to use the Map Viewer to style layers and create meaningful visualizations.

The ArcGIS Online Map Viewer allows you to easily change the basemap and layer styles in a web map. The viewer provides styling suggestions (smart mapping) when layers are loaded, but you can change symbols, colors, and shapes interactively with different styling tools. Layers can be styled with a single symbol for all locations or with multiple symbols that are based on attribute or numeric values. Labels and pop-ups can also be configured and styled. Once a web map is styled, it can be loaded into an application and all of the layer settings will be honored. Learn how to load a web map in the Display a web map tutorial.

In this tutorial, you will use the Map Viewer to style the Trailheads, Trails, and Parks and Open Space layers to create a more meaningful visualization.

Steps

Copy the web map

Go to the LA Parks and Trails Map (unstyled) web map in ArcGIS Online.

You can also use your own web map if you completed the Create a web map tutorial.
Click Sign In and Save > Save As to copy the map.
In the top bar, click Details > Contents (Show Contents of Map) to show the Contents panel.
In the top bar, search for Mahou Riviera, Malibu, CA, USA and zoom out until you can see some of the trails, trailheads, and park areas.

Add a vector basemap and hillshade

When styling a web map, it's generally best to start with the basemap to set the context for the other layers that will be drawn on top. To improve the quality of our map we can replace the default basemap with a high quality vector basemap and a hillshade.

Add the World Topographic vector layer as the basemap.

In the top bar, click + Add > Browse Living Atlas Layers:
- Search for Layers: World Topographic Map Vector (by Esri)
- Click the map icon or World Topographic Map to expand the panel.
- At the bottom, click Use as Basemap to add the basemap to the map.
- Close the panel.

Add the World Hillshade layer to provide a 3D relief effect.

In the Living Atlas layers Search:
- Search for Layers: World Hillshade.
- Scroll down the list until you find World Hillshade (by Esri).
- Click the icon to add it to the map.
- At the top of the panel, click the icon to close the panel.

Move the World Hillshade layer to the basemap.

In Contents, click World Hillshade > More Options ... > Move to Basemap.

Basemaps can be composed of multiple layers. In this case the basemap contains two layers: the World Hillshade and the World Topogrpahic vector layer. The layers are drawn from the bottom up, so order is important. The World Hillshade is on the bottom so it draws first and World Topographic layer on top and draws next. The World Topographic layer is semi-transparent, so this gives the basemap a 3D shadow effect.
- Click World Topographic Map > World Hillshade > More Options ... > Move Down.

Style trailheads with a hiker image and labels

You can change the style of point features to be simple shapes or icons (images). You can choose from a library of images or use your own. Change the Trailheads symbols to a hiking icon from the National Parks Service library and then add labels to show trail names.

In Contents, click Trailheads > Change Style and select the following:

Point feature layers can be styled using a variety of symbols such as simple marker shapes that you define the outline and fill styles for or icons that you select from a library. You can also use your own image to style each point by selecting Use an Image and setting the URL to the location of the resource.
- 1. Choose an attribute to show: Show location only
- 2. Select a drawing style:
  - In Location (Single symbol) click Options > Symbols and change it to:
    - Shape
      - National Park Service > Hiker (black background, white foreground)
      - Symbol Size > 18px
- Click Ok > OK > Done

Add labels to show the names of the trailheads.

In Contents, click Trailheads > More Options ... > Create Labels. Set the following:
- Label Features: (checked)
- Text: TRL_NAME
  - Size: 13
  - Bold: (disabled)
  - Italics: (enabled)
  - Underline: (disabled)
  - Color: White
  - Halo: (checked), 1, Forest Green
- Alignment: Bottom Center
- Click Ok to close the panel.

Style trail width by elevation gain

You can classify features by numeric field values to show differences in the data. Change the style of the Trails layer to emphasize the elevation gain of each trail. Set the color to purple and set the thickness of the line according to the values in the ELEV_GAIN field. Trails with more elevation gain will be wider and trails with less gain will be thinner.

In Contents, click Trails > Change Style and select the following:
- 1. Choose an attribute to show: ELEV_GAIN
- 2. Select a drawing style:
  - In Counts and Amounts (Size) click Options and set the following:
    - At the top right, click Symbols
      - Set the color to: #BA55D3 (purple)
      - Click Ok to close the window.
    - Further down, set the Size to:
      - Min: 3
      - Max: 7
    - Set the Transparency to 25%.
- Click Ok > Done
Click Trails - Trails 0 > More Options ... > Rename and change the name to: Trails > OK.

Style a trails layer to show bike-only trails

You can show different visual patterns for a single layer by adding it twice, applying a filter, and then applying a different style to the features. Copy the Trails layer and filter the data with the USE_BIKE field to only show trails that allow bikes. Use light colored dots to represent the trails and then overlay this layer on the original layer. This will make it possible to distinguish between bike and non-bike trails.

In Contents, click Trails > More Options ... > Copy.
Click Trails copy > More Options ... > Rename and change the name to: Trails for Bikes > OK.
Click Trails for Bikes > More Options ... > Move Down to move the layer above Trails.
Click Trails for Bikes > Filter and set the following:
- Select the field: USE_BIKE
- Operator: is
- Value: YES > Unique
- Click Apply Filter to close the window and set the filter.
Click Trails for Bikes > Change Style and select the following:
- 1. Choose an attribute to show: Show location only
- 2. Select a drawing style:
  - In Location (Single symbol) click Options:
    - Click Symbols and change the following:
      - Color: #FF91FF (light purple/pink) click > OK
      - Line Width: 2
      - Pattern: Dotted Line (The first dotted symbol)
- Click Ok > Ok > Done

Style park areas with unique colors

You can apply different styles to features by classifying them by unique field values. Change the style of Parks and Open Spaces layer to show the different types of parks in the map. Use the TYPE field in the layer to classify the data and apply a different color symbol to each land type.

In Content, click Parks and Open Space > Change Style and select the following:
- 1. Choose an attribute to show: TYPE
- 2. Select a drawing style:
  - In Types (Unique symbols) click Options and set the following:
    - At the top, to the right of COUNT, click the Change all symbols (orange, blue, and yellow) color bar.
      - Click the icon to invert the color ramp.
      - Click Ok to close the window.
    - Near the bottom, set overall Transparency to 80%
    - Click Ok > Done

Explore the web map

Click Show Map Legend to see the styled layers.
Zoom in and out of the map.
Save your map.

Congratulations, you're done!

Your styled web map should look something like this.

Challenge

Experiment with different colors

When styling a layer using attributes and values, the default color ramps are a good starting point, but you can always manually select the desired color to create your own color and styling scheme. Go back to the Parks and Open Space Layer and use the Change Style panel to manually set the colors for the different types of areas.

Feel free to experiment with different colors, but here is the suggested color sequence:

Local Park: Light Purple
Natural Areas: Light Green
Regional Open Space: Light Blue
Reginal Recreation Park: Light Red

Learn more about layer stylings and style workflows

Visit ArcGIS Online to learn more about styling layers and how to use Arcade to write scripts to automate styling workflows.