Tutorial: Style layers in a web scene

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

Prerequisites

Steps

Copy the web scene

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

1. Go to the LA Parks and Trails Scene (unstyled) web scene.

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 in a scene by setting a marker symbol or a 3D model symbol in a simple renderer, and then setting the renderer on the layer. All features in the view will display the same symbol. In this instance, all trailheads will display an elevated "push pin" to mark locations with callouts above the terrain.

1. On the left, click the pencil icon to open the Designer.

2. Click the Trailheads layer.

3. In 2D Marker > Options.

4. In Style 2D Marker set the following:

   • Marker: Basic shapes > Circle > Done.
   • Color: #1A1A1A
   • Size: 8 pixels

5. Enable Elevation mode:

   • Relative to ground
   • Offset: 1 meter.

6. Enable Callout:

   • city scale-small
   • Color: dark

7. Enable Labels:

   • Text: TRL_NAME
   • Size: medium
   • Color light

8. Enable Declutter.

9. Disable Improve perspective.

10. Click Done > Done.

Style trails (lines)

You set a line symbol or a 3D path symbol in a simple renderer, and set the renderer on the layer. In the Scene Viewer, you can style line features as 2D lines or 3D paths with a specific color. The features can be drawn on the ground, above, or below.

1. Click Trails > 2D Line > Options.

2. In Style 2D Line, set the following:

   • Color: #BA55D3
   • Transparency: 20%. Click Done.
   • Width: 7

3. Elevation mode: Relatvie to ground.

4. Offset: 1.

5. Click Done > Done.

Style bike-only trails

You can show different visual patterns for a single layer by adding it twice, applying a filter, and then styling it with a different color. Use the filter to style bike-only trails.

1. In the left panel, click Add layers.

2. At the bottom, click Enter Layer URL. Enter the following URL:

   • https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trails/FeatureServer/0

3. Rename the layer to Trails for Bikes > Add.

4. Click the ellipses in the Trails for Bikes layer > Layer properties.

5. In Filter > USE_BIKE.

6. Check Yes and uncheck all and No.

7. Click Done.

8. Click Trails for Bikes > 2D Line > Options.

9. In Style 2D Line, set the following:

   • Color: #FF91FF
   • Transparency: 20%. Click Done.
   • Width: 1.5

10. Elevation mode: Relative to ground.

11. Offset 2.

12. Click Done > Done.

Style parks (polygons)

You use a fill symbol or extrude the polygon based on real-world heights.In the Scene Viewer, you can style polygon features as 2D polygons or 3D extruded features.

1. Click the Parks and Open Space layer > 2D Polygon > Options.

2. In Style 2D Polygon:

   • Color: #228B22
   • Transparency: 80%. Click Done.

3. Elevation mode: On the ground.

4. Click Done > Done.

Explore the web scene

1. In the left toolbar, click Save to save your scene. At minimum you need a title and tags. Your web scene should look something like this.

2. Drag, zoom, and pan the styled web scene.

What's next?

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

Display a web scene

Create and display a scene from a web scene.

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

Display a custom basemap style

Add and display a styled vector tile basemap layer.

JavaScript Maps SDKEsri LeafletMapLibre GL JSOpenLayers