Sketch temporary geometries

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

In the current version of the API, you can use the SketchViewModel to draw and update temporary geometries on the map view. The SketchViewModel does not have a user interface component. Instead it will provide the logic for the Sketch widget, which will be added in a future release. Once the Sketch widget is available, geometries can be drawn on the view with just a few lines of a code.

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 its layer property 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 draw-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.

//
// Get the completed graphic from the event and add it to view.
// This event fires when user presses
//  * "C" key to finish sketching point, polygon or polyline.
//  * Double-clicks to finish sketching polyline or polygon.
//  * Clicks to finish sketching a point geometry.
//
  sketchViewModel.on("draw-complete", addGraphic);
  sketchViewModel.on("update-complete", addGraphic);
  sketchViewModel.on("update-cancel", addGraphic);
  function addGraphic(evt) {
    var geometry = evt.geometry
    // Choose a valid symbol based on return geometry
    switch (geometry.type) {
      case "point":
      case "multipoint":
        symbol = pointSymbol;
        break;
      case "polyline":
        symbol = polylineSymbol;
        break;
      default:
        symbol = polygonSymbol;
        break;
    }
    // Create a new graphic; add it to the GraphicsLayer
    tempGraphicsLayer.add(new Graphic(geometry, symbol));
    updateGraphic = null;
  }

The geometries can be updated as outlined below:

  • Move the whole geometry, by clicking the geometry and dragging it to the desired location.
  • Move an individual vertex, by clicking the geometry and dragging it to the desired location.
  • Move multiple vertices, by clicking vertices while pressing shift key and moving them to the desired location.

sketch-update

  //Get the graphic to be updated from "click" event.
  function setUpClickHandler() {
    view.on("click", function (evt) {
      view.hitTest(evt).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 (!updateGraphic) {
            // Save a reference to the graphic we intend to update
            updateGraphic = results[results.length - 1].graphic;
            // Remove the graphic from the GraphicsLayer
            // Sketch will handle displaying the graphic while being updated
            tempGraphicsLayer.remove(updateGraphic);
            sketchViewModel.update(updateGraphic);
          }
        }
      });
    });
  }

Searching...

Sample search results

TitleSample

There were no match results from your search criteria.