Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: Draw
[ AMD Module Require | Legacy Module Require ]
require(["esri/toolbars/draw"], function(Draw) { /* code goes here */ });
Description
(Added at v1.0)
Toolbar that supports functionality to create new geometries by drawing them: points (POINT or MULTI_POINT), lines (LINE, POLYLINE, or FREEHAND_POLYLINE), polygons (FREEHAND_POLYGON or POLYGON), or rectangles (EXTENT). To edit geometries of existing graphics, use the Edit Toolbar.
Mouse behavior when drawing features
- For POINT, click to add a point.
- For MULTI_POINT, click to add points, double-click to add the last point of the multi-point.
- For POLYLINE and POLYGON, click to add vertices, double-click to add the last vertex.
- For FREEHAND_POLYLINE and FREEHAND_POLYGON, press mouse down where to start, draw the feature, then let go when finished drawing.
- For LINE, EXTENT, press mouse down where to start and let go where to end the feature.
esri.bundle.toolbars.draw.addPoint = "Add a new tree to the map";To view all the customizable widget strings view any of the samples in a browser with debugging tools open and type
console.dir(esri.bundle) in the console. Debugging tools are available as an integrated part of most modern browsers.Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new Draw(map, options?) | Creates a new Draw object. |
Constants
| Name | Description |
|---|---|
ARROW | Draws an arrow. |
CIRCLE | Draws a circle. |
DOWN_ARROW | Draws an arrow that points down. |
ELLIPSE | Draws an ellipse. |
EXTENT | Draws an extent box. |
FREEHAND_POLYGON | Draws a freehand polygon. |
FREEHAND_POLYLINE | Draws a freehand polyline. |
LEFT_ARROW | Draws an arrow that points left. |
LINE | Draws a line. |
MULTI_POINT | Draws a Multipoint. |
POINT | Draws a point. |
POLYGON | Draws a polygon. |
POLYLINE | Draws a polyline. |
RECTANGLE | Draws a rectangle. |
RIGHT_ARROW | Draws an arrow that points right. |
TRIANGLE | Draws a triangle. |
UP_ARROW | Draws an arrow that points up. |
Properties
| Name | Type | Summary |
|---|---|---|
| fillSymbol | SimpleFillSymbol | Symbol to be used when drawing a Polygon or Extent. |
| lineSymbol | SimpleLineSymbol | Symbol to be used when drawing a Polyline. |
| markerSymbol | SimpleMarkerSymbol | Symbol to be used when drawing a Point or Multipoint. |
| respectDrawingVertexOrder | Boolean | When set to false, the geometry is modified to be topologically correct. |
Methods
| Name | Return type | Summary |
|---|---|---|
| activate(geometryType, options?) | None | Activates the toolbar for drawing geometries. |
| deactivate() | None | Deactivates the toolbar and reactivates map navigation. |
| finishDrawing() | None | Finishes drawing the geometry and fires the onDrawEnd event. |
| setFillSymbol(fillSymbol) | None | Sets the fill symbol. |
| setLineSymbol(lineSymbol) | None | Sets the line symbol. |
| setMarkerSymbol(markerSymbol) | None | Sets the marker symbol. |
| setRespectDrawingVertexOrder(set) | None | Sets whether the polygon geometry should be modified to be topologically correct. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| draw-complete | {
geographicGeometry: < | Fired when the user has completed drawing. |
| draw-end | {
geometry: < | This event is deprecated. Use draw-complete instead. |
Constructor Details
Creates a new Draw object. A map is a required parameter.
Parameters:
< |
Required | Map the toolbar is associated with. |
< |
Optional | Parameters that define the functionality of the draw toolbar. See the options for a list of valid values. |
options properties: < |
Optional | Determines how much time to wait before adding a new point when using a freehand tool. The default value is 75. |
< |
Optional | If true, tooltips are displayed when creating new graphics with the draw toolbar.
require([
"esri/map", "esri/toolbars/draw", ...
], function(Map, Draw, ... ) {
var map = new Map( ... );
var toolbar = new Draw(map, { showTooltips: false });
...
});
|
< |
Optional | Determines how far the mouse moves before adding a new point when using one of the freehand tools. The default value is 8. |
< |
Optional | Determines how far to offset the tool tip from the mouse pointer. The default value is 15. |
Sample:
require([
"esri/map", "esri/toolbars/draw", ...
], function(Map, Draw, ... ) {
var map = new Map( ... );
var toolbar = new Draw(map, {
tooltipOffset: 20,
drawTime: 90
});
...
});
Property Details
<SimpleFillSymbol
SimpleFillSymbolSee also: setFillSymbol()
<SimpleMarkerSymbol
SimpleMarkerSymbolSymbol to be used when drawing a Point or Multipoint.
See also: setMarkerSymbol()
<Boolean
BooleanWhen set to false, the geometry is modified to be topologically correct. When set to true, the input geometry is not modified.
Known values:
true | falseDefault value:
falseMethod Details
Activates the toolbar for drawing geometries. Activating the toolbar disables map navigation.
Parameters:
< |
Required | The type of geometry drawn. See the Constants table for valid values. |
< |
Optional | Options that define the functionality of the draw toolbar. See the object specifications table below for the structure of the options object.
|
Object Specifications:
<
options>< |
Required | Determines how much time to wait before adding a new point when using a freehand tool. The default value is 75. |
< |
Required | If true, tooltips are displayed when creating new graphics with the draw toolbar. The default value is true. |
< |
Required | Determines how far the mouse moves before adding a new point when using one of the freehand tools. The default value is 8. |
< |
Required | Determines how far to offset the tool tip from the mouse pointer. The default value is 15. |
Sample:
require([
"esri/toolbars/draw", ...
], function(Draw, ... ) {
var toolbar = new Draw( ... );
toolbar.activate(Draw.POINT);
...
});
See also: deactivate()
Finishes drawing the geometry and fires the onDrawEnd event. Use this method to finish drawing a polyline, polygon or multipoint when working with the compact build on a touch supported device like the iPhone. (Added at v2.0)
Sample:
drawToolbar.finishDrawing();
See also: on("draw-complete")
Sets the fill symbol.
Parameters:
< |
Required | The fill symbol. |
See also: fillSymbol
Sets the line symbol.
Parameters:
< |
Required | The line symbol. |
See also: lineSymbol
Sets the marker symbol.
Parameters:
< |
Required | The marker symbol. |
See also: markerSymbol
Sets whether the polygon geometry should be modified to be topologically correct.
Parameters:
< |
Required | When set to false, the geometry is modified to be topologically correct. When set to true, the input geometry is not modified. |
Event Details
[ On Style Events | Connect Style Event ]
Fired when the user has completed drawing. It returns the geometry of the drawn feature with the feature's geographic coordinates. (Added at v3.6)
Event Object Properties:
< |
Geometry of the drawn shape in geographic coordinates (latitude, longitude). Only available when the map's spatial reference is Web Mercator or Geographic (4326). |
< |
Geometry of the shape that was drawn. Coordinates of this geometry have the same spatial reference of the map. |
See also: finishDrawing()
This event is deprecated. Use
draw-complete instead. Fires when drawing has ended.Event Object Properties:
< |
Geometry drawn on the client. |
Sample:
require([
"esri/toolbars/draw", "esri/graphic", ...
], function(Draw, Graphic, ... ) {
function createToolbar(map) {
var toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
function addToMap(evt) {
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
...
});