Line markers and label placement

This sample shows how to apply line markers to polylines. Markers can enhance the cartographic information of a line by providing additional visual cues about the associated feature. This scene shows the route of an expedition led by F. Bellingshausen that set out in 1819 to prove or disprove the existence of the Antarctic continent. The arrow line markers make it easy to identify the direction of the routes.

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

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
const lineSymbol: {
  type: "line-3d",   // autocasts as new LineSymbol3D()
  symbolLayers: [{
      type: "line",   // autocasts as new LineSymbol3DLayer()
      material: { color: [121, 72, 0] },
      size: "3px",
      marker: {
        type: "style",    // autocasts as new LineStyleMarker3D()
        style: "arrow",
        placement: "end"
      }
    }]
  }

The sample also features new capabilities of LabelSymbol3D with a TextSymbol3DLayer. You can define the material, the background and also the font.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const labelSymbol = {
  type: "label-3d", // autocasts as new LabelSymbol3D()
  symbolLayers: {
    type: "text", // autocasts as new TextSymbol3DLayer()
    material: { color: "black" },
    size: 16, // Defined in points
    background: {
      color: [236, 232, 221, 0.7]
    },
    font: {
      family: "IM FELL DW Pica",
      style: "italic",
      weight: "normal"
    }
  }
};

When preparing the labelingInfo, you can choose the content with a labelExpressionInfo and define the location of the label with the property labelPlacement. .

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
labels.labelingInfo = {     // autocasts as new LabelClass()
  symbol: labelSymbol,
  labelExpressionInfo: {
    expression: labelExpression
  },
  labelPlacement: "above-left",
}

For this sample we use the VirtualLighting, which makes sure that the scene is always nicely lit and there are no parts of the globe in shadow. The position of the light follows the camera and is set behind the camera with a small offset to the left side.

Use dark colors for code blocksCopy
1
2
3
view.environment.lighting = {
  type: "virtual"    // autocasts as new VirtualLighting()
}

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