Overview

You will learn: how to use the Sketch widget to interactively draw point, line, and polygon graphics.

Applications can provide the ability for users to draw and edit graphics on a map. Graphics represent geometric shapes such as points, lines, and polygons and are generally stored in memory in a graphics layer. The Sketch widget provides an interface that can be used to created and edit the different types of graphics. All graphics contain a geometry, symbol, and optionally, a set of attributes and the definition for a pop-up. To provide a custom user interface, or for more programmatic control over drawing, you can also use the SketchViewModel. If you would like to create and edit features in a feature layer, you can use the Editor widget for a more complete editing experience.

In this tutorial, you will use the Sketch widget to draw and edit point, line, and polygon graphics.

Click a tool in the widget and then the map below to create graphics.

Steps

Create a starter app

  1. Open the JavaScript Starter App on CodePen.

  2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Draw graphics.

Add a graphics layer

In order to store graphics you need to create a GraphicsLayer and add it to the map.

  1. In the require statement, add the GraphicsLayer module.

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "esri/layers/GraphicsLayer"
        ], function(Map, MapView, GraphicsLayer) {
    
  2. At the top of the code in the main function, create a GraphicsLayer and add it to the layers collection of the map. This layer will be used to store the graphics.

          //*** ADD ***//
          var graphicsLayer = new GraphicsLayer();
    
          var map = new Map({
            basemap: "topo-vector",
            //*** ADD ***//
            layers: [graphicsLayer]
          });
    

Add a sketch widget

The Sketch widget gives you the ability to draw and edit graphics interactively. Add the widget to the view.

  1. In the require statement, add the Sketch module.
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/GraphicsLayer",
          //*** ADD ***//
          "esri/widgets/Sketch",
        ], function(Map, MapView, GraphicsLayer, Sketch) {
    
  2. At the end of the code in the main function, create the widget and set the layer to the GraphicsLayer created earlier. Add the widget to the top right corner of the view by adding it to the view's DefaultUI.
          var sketch = new Sketch({
            view: view,
            layer: graphicsLayer
          });
    
          view.ui.add(sketch, "top-right");
    

Draw graphics

  1. Run the app and select the point, line, and polygon edit tools and draw a number of graphics on the map.
  2. Click on the graphics to enable the sketch editor and try editing (reshaping) the graphics.
  3. Click on graphics and try deleting them with the delete tool.

Congratulations, you're done!

Your app should look something like this.

Challenge

Change the symbol styles

After the sketch is created, change the symbols for the graphics by changing the fill and stroke colors to a solid red line with a semi-transparent while fill. Apply these colors to the SketchViewModel symbols.

       //*** Red stroke, 1px wide ***//
       var stroke = {
         color: [255,0,0],
         width: 1
       }

       //*** White fill color with 50% transparency ***//
       var fillColor = [255,255,255,.5];

       //*** Override all of the default symbol colors and sizes ***//
       var pointSymbol = sketch.viewModel.pointSymbol;
       pointSymbol.color = fillColor;
       pointSymbol.outline = stroke;
       pointSymbol.size = 8;

       var polylineSymbol = sketch.viewModel.polylineSymbol;
       polylineSymbol.color = stroke.color;
       polylineSymbol.width = stroke.width;

       var polygonSymbol = sketch.viewModel.polygonSymbol;
       polygonSymbol.color = fillColor;
       polygonSymbol.outline = stroke;

Add attributes and a pop-up

Use the Sketch create event to add a pop-up to the graphic after it is created. Learn more about pop-ups in the Configure pop-ups and Display point, line, and polygon graphics tutorials.

      //*** ADD ***//
      sketch.on("create", function(event) {
        if (event.state === "complete") {
          var attributes = {
            name: "My Graphic",
            type: event.graphic.geometry.type
          }
          event.graphic.attributes = attributes;

          var popupTemplate = {
            title: "{name}",
            content: "I am a {type}."
          }
          event.graphic.popupTemplate = popupTemplate;
        }
      });

NOTE: The graphic will autocast the popupTemplate and create a class instance from the object. Learn more about autocasting in the documentation.

Create and update feature layer data

If you would like to interactively create and update features (both geometry and attributes) for feature layers, visit the documentation to learn about the Editor widget.