Draw widget

The Draw widget allows you to draw simple graphics and text on the map. You can also use it to add line distance or polygon area to the feature as text.

This widget provides basic sketching and markup functionality to a web app. It also displays some measurements (if configured to do so) for drawn features, such as length for lines and area and perimeter for polygons. When the widget initially opens, a window appears that contains the following draw tools:

  • Point
  • Line
  • Polyline
  • Freehand polyline
  • Arrow
  • Triangle
  • Rectangle
  • Circle
  • Ellipse
  • Polygon
  • Freehand polygon
  • Text

Draw tools

Configure the Draw widget

This widget can be set to open automatically when an app starts. Click the Do not open this widget when the app starts button Do not open this widget when the app starts on the widget to turn on the option to open the widget automatically. (For widgets you need to add to the app first, you can make this setting after configuring the widget.)

To configure the Draw widget, complete the following steps:

  1. Hover over the widget and click the Configure this widget button Configure this widget to open the configuration window.
    Note:

    If you need to add the widget to the app first, click a widget placeholder on the Widget tab. In the Choose Widget window that opens, select the widget and click OK.

  2. By default, all supported units appear on the Locations, Distances, and Areas tabs.

  3. Set the location, distance, or area units.
    1. Select the unit for the location, distance, or area. The abbreviation and conversion factor are not editable.

      Draw Locations configuration

      Draw Distances configuration

      Draw Areas configuration

    2. Optionally change the order of the units. Click the up or down arrow Up/down arrows of the unit in the Actions column to modify the order.
    3. To delete a unit of measure, click the close button Close of the unit in the Actions column.
    4. To add a unit of measure, select Add location unit, Add length unit, or Add area unit on the Locations, Distances, or Areas tab, respectively.
  4. Check Add the drawing as an operational layer of the map to include Points, Lines, Areas, and Text layers in the Layers List. With this setting turned on, users can select from common layer options such as zooming to the layer's extent and setting a visibility range.
  5. Click OK to close the dialog box.

Use the Draw widget

To get started with the Draw widget, complete the following steps:

  1. Click a button to select the drawing mode.
  2. Optionally change the drawing style using the symbol picker.
    1. For points, select the marker category (different symbols are available in each category) to set the symbol size, color, transparency, outline color, and outline width of the symbol. Only the size field is available for picture marker symbols.

      Basic point symbol editor

    2. For lines, select a predefined symbol from the box. You can also customize the color, style, transparency, and width of the symbol.

      Line symbol editor

    3. For polygons, select a predefined symbol from the box. You can also customize the fill color, transparency, outline color, and outline width of the symbol.
    4. For text, type in the Text box, and select a font color and size for the text.

      Text symbol editor

  3. Optionally show a corresponding measurement in the map for the point location, line length, or polygon area or perimeter. You can also choose a unit of measurement and set the font color and size for the text.

    Picture point symbol editor with Show location measurement turned on

  4. Draw the desired features and text on the map.
  5. If the app was configured to add your drawings as an operational layer of the map, open the Layer List widget to see your new Points, Lines, Areas, and Text layers. You can select from common layer options, such as zoom to the layer's extent and set a visibility range.
  6. Click Undo or Redo to cancel or repeat your drawings, or click Clear to remove them all from the map.