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 geometries using SketchViewModel in a 2D MapView. SketchViewModel wires up all the relevant events for adding temporary geometries to the view while a user is drawing. This saves the effort of writing lots of code for sketching different geometry types, 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 geometries.

// create a new sketch view model
var sketch = new SketchViewModel({
  view: view,
  layer: tempGraphicsLayer,
  pointSymbol: { // used to symbolize points
    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
    style: "square",
    color: "red",
    size: "16px",
    outline: {  // autocasts as new SimpleLineSymbol()
      color: [255, 255, 0],
      width: 3  // points
    }
  },
  polylineSymbol: { // used to symbolize polylines
    type: "simple-line",  // autocasts as new SimpleMarkerSymbol()
    color: "#8A2BE2",
    width: "4",
    style: "dash"
  },
  polygonSymbol: { // used for symbolizing polygons
    type: "simple-fill",  // autocasts as new SimpleMarkerSymbol()
    color: "rgba(138,43,226, 0.8)",
    style: "solid",
    outline: {
      color: "white",
      width: 1
    }
  }
});

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, 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 polylines and polygons, 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, you can automatically complete the geometry 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
  });
  tempGraphicsLayer.add(graphic);
}

function updateGraphic(event) {
  // event.graphic is the graphic that user clicked on and its geometry
  // has not been changed. Update its geometry and add it to the layer
  event.graphic.geometry = event.geometry;
  tempGraphicsLayer.add(event.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 "tempGraphicsLayer"
// ************************************************************************************
function setUpClickHandler() {
  view.on("click", function(event) {
    view.hitTest(event).then(function(response) {
      var results = response.results;
      // Found a valid graphic
      if (results.length && results[results.length - 1].graphic) {
        // Check if we're already editing a graphic
        if (!editGraphic) {
          // Save a reference to the graphic we intend to update
          editGraphic = results[results.length - 1].graphic;
          // Remove the graphic from the GraphicsLayer
          // Sketch will handle displaying the graphic while being updated
          tempGraphicsLayer.remove(editGraphic);
          sketchViewModel.update(editGraphic);
        }
      }
    });
  });
}