Sketch temporary geometries

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

This sample demonstrates how to draw and update temporary point, multipoint, polyline, and polygon graphics using SketchViewModel in a 2D MapView. SketchViewModel wires up all the relevant events for adding temporary graphics to the view while a user is drawing. This saves the effort of writing lots of code for sketching graphics with different geometries, and adding them to the view.

To use the SketchViewModel, create a new instance of the class, and set its layer and the symbols for point, polyline, and polygon graphics.

// create a new sketch view model
const sketchViewModel = new SketchViewModel({
  view,
  layer: graphicsLayer,
  pointSymbol,
  polylineSymbol,
  polygonSymbol
});

To create a point, polyline or polygon, call create() on SketchViewModel and pass in the type of the geometry to be created. In this sample, each HTML button calls create() with a different geometry type.

drawPolygonButton.onclick = function () {
  // create a polygon geometry using sketch
  sketch.create("polygon");
  setActiveButton(this);
};

To start drawing, click one of the geometry buttons located on the upper right side. To sketch a point, click on the view or press the C key, while the pointer is on the view. This will complete sketching a point at the location of the pointer and will fire SketchViewModel's create-complete event. You can then get the completed graphic from the event and add it to the view. To sketch a polyline or polygon graphic, click on the view, or press the F key to add a vertex at the location of the pointer. Holding Control key will force new vertices to be parallel or perpendicular to the previous vertex. You can also drag the pointer to create a freehand-style polygon or polylines. While sketching polyline and polygon graphics, you can also press the Z key to undo your changes, or the R key to redo your changes. Double-click the pointer, or press C key to complete drawing the sketch. While sketching a polygon graphic, you can automatically complete the graphic by clicking the first vertex.

// sketchViewModel event listeners
sketchViewModel.on("create-complete", addGraphic);
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);

//*************************************************************
// called when sketchViewModel's create-complete event is fired.
//*************************************************************
function addGraphic(event) {
  // Create a new graphic and set its geometry to
  // `create-complete` event geometry.
  const graphic = new Graphic({
    geometry: event.geometry,
    symbol: sketchViewModel.graphic.symbol
  });
  graphicsLayer.add(graphic);
}

  // Runs when sketchViewModel's update-complete or update-cancel
  // events are fired.
  function updateGraphic(event) {
    // Create a new graphic and set its geometry event.geometry
    var graphic = new Graphic({
      geometry: event.geometry,
      symbol: editGraphic.symbol
    });
    graphicsLayer.add(graphic);

    // set the editGraphic to null update is complete or cancelled.
    editGraphic = null;
  }

// set up logic to handle geometry update and reflect the update on "graphicsLayer"
function setUpClickHandler() {
  view.on("click", function (event) {
    view.hitTest(event).then(function (response) {
      var results = response.results;
      if (results.length > 0) {
        for (var i = 0; i < results.length; i++) {
          // Check if we're already editing a graphic
          if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
            // Save a reference to the graphic we intend to update
            editGraphic = results[i].graphic;

            // Remove the graphic from the GraphicsLayer
            // Sketch will handle displaying the graphic while being updated
            graphicsLayer.remove(editGraphic);
            sketchViewModel.update(editGraphic);
            break;
          }
        }
      }
    });
  });
}