Measure while drawing


Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

A 2D measurement widget is not part of the ArcGIS 4.8 API for JavaScript. It will be added in a future release. In the current version of the API, you can implement your own 2D measuring tools using draw class and geometryEngine. The DirectLineMeasurement3D widget and the AreaMeasurement3D widget can be used for measurements in 3D.

This sample demonstrates how to draw a Polygon, using DrawPolygonAction, and measure its area in the process of drawing. To start drawing and measuring, click the button located just below the zoom controls.

To draw a polygon using the Draw class, call draw.create("polygon"). This method will return a reference to an instance of the PolygonDrawAction. Listen to the events on this object to implement custom measuring logic for the polygon as it is being drawn.

function enableCreatePolygon(draw, view) {
  // create() will return a reference to an instance of PolygonDrawAction
  var action = draw.create("polygon");

  // focus the view to activate keyboard shortcuts for drawing polygons

  // listen to the following events on PolygonDrawAction object.
  // call drawPolygon() function in response to these events.
  action.on("vertex-add", drawPolygon);
  action.on("cursor-update", drawPolygon);
  action.on("vertex-remove", drawPolygon);
  action.on("draw-complete", drawPolygon);

// this function is called from the polygon draw action events
// to provide a visual feedback to users as they are drawing a polygon
function drawPolygon(event) {
  var vertices = event.vertices;

  //remove existing graphic;

  // create a new polygon
  var polygon = createPolygon(vertices);

  // create a new graphic representing the polygon, add it to the view
  var graphic = createGraphic(polygon);;

  // calculate the area of the polygon
  var area = geometryEngine.geodesicArea(polygon, "acres");
  if (area < 0) {
    // simplify the polygon if needed and calculate the area again
    var simplifiedPolygon = geometryEngine.simplify(polygon);
    var area = geometryEngine.geodesicArea(simplifiedPolygon, "acres");
  // start displaying the area of the polygon
  labelAreas(polygon, area);

Sample search results