3D hiking map with line patterns

Explore in the sandboxView live

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 line pattern style is set on the LineSymbol3DLayer on a LineSymbol3D:

Use dark colors for code blocks
            
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"
    }
  }]
};

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.