Draw graphics

Overview

You will learn: how to build an app to interactively sketch graphics on a map.

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

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

      //*** 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;
        }
      });

Create and update feature layer data