Tutorial: Style layers in a web map

Learn how to use Map ViewerMap Viewer is a browser-based mapping tool that can view, create, and save web maps. It can also perform mapping, visualization, and spatial analysis operations.Learn more to style layersA layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services.Learn more in a web mapA web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification.Learn more.

This tutorial shows you how to use the Map ViewerMap Viewer is a browser-based mapping tool that can view, create, and save web maps. It can also perform mapping, visualization, and spatial analysis operations.Learn more to style feature layersA 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 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 featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more by setting a symbolA symbol defines the properties used to display a geometry or text.Learn more, such as simple shapes or icons, in a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more. Use a hiker icon to display all features in the viewA view is a UI component that draws the layers in a map or scene and controls their extent (area) and geographic features.Learn more.

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 featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more by numeric field values to show differences in the data. You style line features using a symbolA symbol defines the properties used to display a geometry or text.Learn more and a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more.

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 > Add layer from URL.

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 new 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 featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more by classifying them by unique field values. You style polygons with a simple fill symbolA symbol defines the properties used to display a geometry or text.Learn more and adding it to a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more. 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 mapA web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification.Learn more should look something like this.

2. Click on featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more in the map to display attributeAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more data.

You can load the styled web map with its item IDAn item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file.Learn more. When the web map is loaded, all of the data A data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene.Learn more and basemap layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more 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 SDKLeafletMapLibre 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 SDKLeafletMapLibre GL JSOpenLayersCesiumJS