3D hiking map with line patterns

This sample shows how to apply line patterns to polylines. Patterns provide an additional dimension when visualizing line data, especially in situations where features of the same color need to be differentiated.

In this example, we highlight a beautiful panoramic hiking trail in an Alpine valley and use line patterns to communicate the difficulty of sections along the trail. We also use patterns to distinguish railway lines from cable car routes and show which are only in service during the winter.

The pattern style is set on the LineSymbol3DLayer on a LineSymbol3D:

1
2
3
4
5
6
7
8
9
10
11
12
const symbol = {
  type: "line-3d", // autocasts as new LineSymbol3D()
  symbolLayers: [{
    type: "line", // autocasts as new LineSymbol3DLayer()
    size: "2px",
    material: { color: "black" },
    pattern: {
      type: "style", // autocasts as new LineStylePattern3D()
      style: "long-dash-dot-dot"
    }
  }]
};