Tutorial: Style layers in a web scene

This tutorial shows you how to use the Scene ViewerScene Viewer(™) is a browser-based mapping tool that can view, create, and save web scenes.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 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 pointA point is a type of geometry containing a single set of x,y coordinates and a spatial reference.Learn more 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 a sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more by setting a marker symbol or a 3D model symbol in a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more, and then setting the renderer on the layer. 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 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. In the left-side toolbar, click the Layer Manager.

2. Click the ellipsis to the right of the Trailheads layer, Then click Layer style.

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 Callout:

   • city scale-small
   • Color: dark

6. Enable Labels:

   • Text: TRL_NAME
   • Size: medium
   • Color light

7. Enable Declutter.

8. Disable Improve perspective.

9. Click Done > Done.

10. Click the ellipsis to the right of the Trailheads layer, then click Layer properties.

11. Under Elevation click Relative to ground > Configure more.

12. Set Offset to 1.

13. Set Unit to m.

14. Click Done > Done.

Style trails (lines)

You set a lineA geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference.Learn more symbol or a 3D path symbol in a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more, and set the renderer on the layer. In the Scene ViewerScene Viewer(™) is a browser-based mapping tool that can view, create, and save web scenes.Learn more, 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
   • Width: 7

3. Click the ellipsis to the right of the Trails layer and click Layer properties.

4. Set the Transparency to 20.

5. Under Elevation click Relative to ground > Configure more.

6. Set Offset to 1.

7. Set Unit to m.

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

2. In Layer URL. Enter the following URL:

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

3. In Layer name 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
   • Width: 1.5

10. Set Elevation mode to Relative to ground.

11. Set Offset to 2.

12. Click Done > Done.

Style parks (polygons)

You use a fill symbol or extrude the polygonA polygon is a type of geometry containing an array of rings and a spatial reference. Each ring contains an array of point coordinates, where the first and last point are the same.Learn more based on real-world heights.In the Scene ViewerScene Viewer(™) is a browser-based mapping tool that can view, create, and save web scenes.Learn more, 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. Set Elevation mode to 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 sceneA web scene is a scene 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 scene specification.Learn more 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 SDKLeafletMapLibre GL JSOpenLayers