Draw widget

The Draw widget allows users to create simple markup, including points, lines, polygons, and text, on maps. Users can add measurements to drawn graphics for coordinate position, length, perimeter, and area.

Examples

Use this widget to support app design requirements such as the following:

• You want town planners to draw lines for rural roads.
• You want construction site managers to create polygons of underground utility features.
• You want conservation agents to draw points representing wildlife sightings.

Usage notes

This widget requires connection to a Map widget.

When you include this widget in an app, a panel or toolbar provides users with the following tools for drawing features:

• Select feature, Select by rectangle, and Select by lasso—Choose a method for selecting drawn features. When you draw on 3D web scenes, only Select feature is available.
• Draw a point, Draw a polyline, Draw a polygon, Draw a rectangle, Draw a circle, and Draw a text—Sketch a feature on the map or scene.
  • Preview—View a preview of the symbology of the feature to be drawn.
  • Source—For points, select from a list of categories containing premade symbols. Different symbols are available in each category.
  • Symbol customization options—Select a predefined symbol from the box. Customize the symbol using the following settings:
    • Points—Customize size, fill color, outline color, outline width, and fill transparency. Only the size setting is available for picture point symbols.
    • Polylines—Customize width, dash type, color, and transparency.
    • Polygons, rectangles, and circles—Customize fill color, outline color, outline width, and transparency.
    • Text—Customize text content, font, font size, color, outline width, outline color, opacity, background color, and background opacity.
  • Measurement tools—Include relevant measurements in appropriate units on drawn features.
    • For points, turn on Show location measurement to include degree minute second (DMS) or decimal degree (DD) measurements.
    • For polylines, turn on Show length measurement to include kilometer, meter, mile, or feet measurements.
    • For polygons, rectangles, and circles, turn on Show area measurement to include square kilometer, square meter, hectare, acre, square mile, or square feet measurements. Turn on Show perimeter measurement to include kilometer, meter, mile, or feet measurements.
• Undo and Redo—Undo or redo actions. These buttons are based on the actions performed using the widget.
• Settings—Turn on the following tools and settings:
  • Enable tooltip—Show numerical information while drawing features.
    • You can press Tab to type values in the tooltips that appear while you are drawing features. Press Enter to set input values. You can also press Tab to navigate between input fields.
    • You can click Lock constraint to turn off editing for an input field and click Unlock constraint to turn on editing for an input field.
    • For point and text features, you can enter coordinate and elevation values. Press Enter to place a point on the map.
    • For polyline and polygon segments, you can enter values for segment lengths, angles, and elevation. You can click Direction mode and select from the following two options for defining the angle of a line segment:
      • Deflection—The angle is measured in degrees relative to the previously drawn segment. A deflection value of zero creates a line that continues the previous segment in a straight line. Positive values are measured in a clockwise direction. Negative values are measured in a counterclockwise direction.
      • Absolute—The angle is measured in degrees using the coordinate system of the map. A direction value of 0 creates a line directed due north. Positive values are measured in a clockwise direction. Negative values are measured in a counterclockwise direction.
  • Enable snapping—Snapping allows you to draw features that connect to each other. The pointer will jump, or snap to, nearby edges, vertices, and other geometric elements. Turn on this setting to enable the following tools (if they are configured in the widget settings in Flexible mode):
    • Geometry guides—Allows snapping to the feature being drawn, and shows smart guides such as 90 degrees and parallel.
    • Feature to feature—Allows snapping to other features.
    • Grid—Overlays a grid on the map. You can snap drawings to the grid.
    • Snapping layers—Choose which map layers should work with the enabled snapping tools.
    • Grid options—When you turn on Grid, the following grid options appear:
      • Placement—You can use the three tools to adjust the grid position, rotation, or both.
      • Angle—Enter a value in degrees to define how much to rotate the grid. The angle is measured in degrees using the coordinate system of the map. A value of 0 directs the y-axis of the grid toward due north. Positive values are measured in a counterclockwise direction. Negative values are measured in a clockwise direction.
      • Cells between major lines—Enter a number of grid cells to appear between lines with thicker stroke.
      • Dynamically scale grid based on zoom—Turn on this setting to have the grid stay the same size on the screen at all zoom levels.
      • Rotate grid with map—Turn on this setting to have the grid rotate with the map when the user rotates with the Map widget Navigation tool.
      • Theme—Choose a color for the grid. Dark is appropriate for light backgrounds. Light is appropriate for dark backgrounds. You can also choose a custom color.
• Clear all—Remove all drawn features from the currently active web map.
• Expand and Collapse—When using the widget in toolbar mode, expand or collapse panels associated with the widget, including the customization panels for points, polylines, and other features.

Settings

The Draw widget includes the following settings:

• Select a Map widget—Select a Map widget.
• Arrangement—Choose a layout for the widget tools, either Panel or Toolbar.
• Drawing tools—Include tools for users to draw features on the map or scene. Drawing tools include Point, Line, Polygon, Rectangle, Circle, and Text.
• Enable measurement—Allow users to include measurements on drawings. Choose which units to include. DD and DMS are angular units used with points. Kilometers, Meters, Miles, Feet, Nautical miles, and Yards are used to measure length for lines and perimeter for polygons, rectangles, and circles. Square kilometers, Square meters, Hectares, Acres, Square miles, Square feet, and Square yards are used to measure area for polygons, rectangles, and circles.
  • Decimal places—Choose the number of decimal places (between 0 and 10) for measurements associated with points, lines (including perimeters), and areas.
• Draw settings—You can include the following tools and capabilities in the widget at run time:
  • Tooltip—Include the Enable tooltips option in the widget panel at run time. You can have the option be turned on by default.
  • Snapping—Include snapping settings. This setting has two modes:
    • Flexible mode—You can choose which snapping settings to include in the widget, enable them by default, and set default snapping layers. At run time, users can turn tools on and off and select snapping layers. The Grid setting is only available in Flexible mode.
    • Prescriptive mode—With this mode, the snapping settings you configure here are unchangeable by the user at run time.
• Advanced—Expand to configure settings related to map layers and 3D drawing effects.
  • Display drawings in the map layers—Include drawn features as a layer in the Map Layers widget and the Map widget Layers tool.
  • 3D drawing effect—Choose a height method for drawing 3D features. This setting appears when you connect a web scene to the Map widget.
    • Relative to ground—Draw features at a specific elevation relative to the terrain surface. This method is appropriate for drawing features at a known height relative to the ground.
    • Relative to scene—Draw features on top of extruded polygons, 3D Object SceneLayers, or BuildingSceneLayers, depending on which one has higher elevation. This method is similar to Relative to ground, except if a drawing is directly above a building or any other feature, it is drawn at a specific elevation relative to that feature. If a drawing is not directly above a building or any other feature, it is aligned to the elevation of the ground or the IntegratedMeshLayer.
    • On the ground—Drape drawn features on the terrain surface. This method is appropriate for drawing features that are flat on the ground, such as roads.

    To learn more about 3D elevation visualization methods, see Elevation options in the ArcGIS Maps SDK for JavaScript documentation.