Query Elevation (points)

Explore in the sandboxView live

This sample demonstrates how to query an ElevationLayer for the elevation of a point.

It instantiates two elevation layers that contain the elevation of the earth surface before and after the 2014 Oso landslide. When the user clicks on the map, it queries both layers for the elevation at the clicked position and shows the difference between before and after the landslide.

This sample also 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. In this scene the arrow marker makes it clear in which direction the landslide changed the elevation.

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
14
15
const lineSymbol = {
  type: "line-3d", // autocasts as new LineSymbol3D()
  symbolLayers: [
    {
      type: "line", // autocasts as new LineSymbol3DLayer()
      material: { color: [150, 26, 15] },
      size: 2,
      marker: {
        type: "style", // autocasts as new LineStyleMarker3D()
        style: "arrow",
        placement: "end"
      }
    }
  ]
};

In this sample, the value of the elevation difference is displayed using a TextSymbol3DLayer inside a PointSymbol3D with a verticalOffset. The graphics have been added to view.graphics, which can be used to display client-side visualizations that do not need to be persisted in webscenes.

Use dark colors for code blocksCopy
                     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const textSymbol = {
  type: "point-3d", // autocasts as new PointSymbol3D()
  verticalOffset: {
    screenLength: 10 // Offset the text to be above the line
  },
  symbolLayers: [
    {
      type: "text", // autocasts as new TextSymbol3DLayer()
      material: { color: "black" },
      size: 12,
      background: { color: [255, 255, 255, 0.75] },
      verticalAlignment: "bottom" // Aligns the text's bottom to be above the input position
    }
  ]
};
view.graphics.add(
  new Graphic({
    geometry: inputPosition,
    symbol: textSymbol
  })
);

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