Draw graphics

Overview

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

The Sketch widget can be used to interactively draw and edit graphics on the map. This widget is useful when you want to quickly add a graphic to the map that represents a feature on earth. Graphics behave like features and contain a point, line or polygon geometry, attributes, and a symbol. When graphics are clicked, they can display a pop-up with attribute information. Graphics can be used to visualize geometric shapes but can also be used as input to search for features and perform spatial analyses. Graphics are usually stored in memory for the lifetime of the application, but can also be serialized as JSON and persisted for later use.

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

Steps

Create a starter app

1. Go to the JavaScript Starter App.

2. In CodePen, click Fork and save the pen as ArcGIS 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.

         //*** ADD ***//
         var sketch = new Sketch({
           view: view,
           layer: graphicsLayer
         });
   
         //*** ADD ***//
         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 graphic 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;