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 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 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

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. 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.

// 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.
sketch.on("draw-complete", function (evt) {
  if (evt.geometry.type === "multipoint") {
    evt.graphic.symbol = {
      type: "simple-marker",
      style: "square",
      color: "green",
      size: "16px",
      outline: {
        color: [255, 255, 255],
        width: 3
  // add the graphic to the graphics layer

Sample search results


There were no match results from your search criteria.