Measure while drawing

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

This sample demonstrates how to draw a Polygon, using PolygonDrawAction, 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.

// draw polygon button
document.getElementById("draw-polygon").addEventListener("click", function () {
  view.graphics.removeAll();
  // 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
  view.focus();

  // listen polygonDrawAction events to give immediate visual feedback
  // to users as the polygon is being drawn on the view.
  action.on("vertex-add", drawPolygon);
  action.on("cursor-update", drawPolygon);
  action.on("vertex-remove", drawPolygon);
  action.on("redo", drawPolygon);
  action.on("undo", drawPolygon);
  action.on("draw-complete", drawPolygon);
});