Area measurement layer

Explore in the sandboxView live

This sample shows how to display area measurements for polygons that are selected by the user. Add an instance of AreaMeasurementLayer to a WebScene. Add a click event listener on the view. If the user clicked on a parcel polygon, add the polygon to the geometry property of the AreaMeasurementLayer.

                 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const areaMeasurementLayer = new AreaMeasurementLayer();
map.layers.add(areaMeasurementLayer);

view.when(() => {
  const hitTestLayers = view.map.layers.filter((layer) => layer.title === "Parcels");
  view.on("click", async (event) => {
    // remove the current measured geometry from the layer when the user clicks on the map
    areaMeasurementLayer.geometry = null;
    // get results only from the "Parcels" layer
    const hitTestResult = await view.hitTest(event, { include: hitTestLayers });
    if (hitTestResult.results.length > 0) {
      const geometry = hitTestResult.results[0].graphic.geometry;
      // pass the polygon geometry to the areaMeasurementLayer to display a new measurement
      areaMeasurementLayer.geometry = geometry;
    }
  });
});

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