Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/workers
Class: Graphic

require(["esri/graphic"], function(Graphic) { /* code goes here */ });

Description

(Added at v1.0)
A Graphic can contain geometry, a symbol, attributes, or an infoTemplate. A Graphic is displayed in the GraphicsLayer. The GraphicsLayer allows you to listen for events on Graphics.

Samples

Search for samples that use this class.

Constructors

NameSummary
new Graphic(geometry?, symbol?, attributes?, infoTemplate?)Creates a new Graphic object.
new Graphic(json)Creates a new Graphic object using a JSON object.

Data Attributes

NameTypeDescription
data-class-break"<Number>"Class break index as returned by ClassBreaksRenderer.getBreakIndex.
data-geometry-type"<String>"Geometry type: "point", "polyline", "polygon" or "multipoint".
data-hidden"" (empty string)Added to the graphic's node when it is hidden.
data-selected"" (empty string)Added to the graphic's node when it is selected.
data-unique-value"<String>"Graphic's unique value as returned by UniqueValueRenderer.getUniqueValueInfo.

Properties

NameTypeSummary
attributesObjectName value pairs of fields and field values associated with the graphic.
geometryGeometryThe geometry that defines the graphic.
infoTemplateInfoTemplateThe content for display in an InfoWindow.
symbolSymbolThe symbol for the graphic.
visibleBooleanIndicate the visibility of the graphic.

Methods

NameReturn typeSummary
attr(name, value)GraphicAdds a new attribute or changes the value of an existing attribute on the graphic's DOM node.
draw()GraphicDraws the graphic.
getContent()StringReturns the content string based on attributes and infoTemplate values.
getDojoShape()ShapeReturns the dojo/gfx/shape.Shape of the Esri graphic.
getInfoTemplate()InfoTemplateReturns the info template associated with the graphic.
getLayer()LayerReturns a reference to the associated layer.
getNode()SVG group |
SVG element |
VML Shape |
Group Element
Returns the DOM node used to draw the graphic.
getNodes()SVG group | SVG element | VML Shapes or Group ElementsReturns one or more DOM nodes used to draw the graphic.
getShape()ShapeReturns the dojox/gfx/shape.Shape of the Esri graphic.
getShapes()Shape[]Returns one or more dojox/gfx/shape.Shape used to draw the graphic.
getTitle()StringReturns the title string based on attributes and infoTemplate values.
hide()NoneHides the graphic.
setAttributes(attributes)GraphicDefines the attributes of the graphic.
setGeometry(geometry)GraphicDefines the geometry of the graphic.
setInfoTemplate(infoTemplate)GraphicDefines the InfoTemplate for the InfoWindow of the graphic.
setSymbol(symbol)GraphicSets the symbol of the graphic.
show()NoneShows the graphic.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.
Constructor Details

new Graphic(geometry?, symbol?, attributes?, infoTemplate?)

Creates a new Graphic object. Specify parameters in the given order using null if you aren't providing a value for an option.
Parameters:
<Geometry> geometry Optional The geometry that defines the graphic.
<Symbol> symbol Optional Symbol used for drawing the graphic.
<Object> attributes Optional Name value pairs of fields and field values associated with the graphic.
<InfoTemplate> infoTemplate Optional The content for display in an InfoWindow.
Sample:
require([
  "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
  "esri/Color", "esri/InfoTemplate", "esri/graphic", ... 
], function(Point, SimpleMarkerSymbol, Color, InfoTemplate, Graphic, ... ) {
  var pt = new Point(xloc,yloc,map.spatialReference)
  var sms = new SimpleMarkerSymbol().setStyle(
    SimpleMarkerSymbol.STYLE_SQUARE).setColor(
    new Color([255,0,0,0.5]));
  var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"};
  var infoTemplate = new InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/>
    Longitude: ${Xcoord} <br/>
    Plant Name:${Plant}");
  var graphic = new Graphic(pt,sms,attr,infoTemplate);
  ...
});

new Graphic(json)

Creates a new Graphic object using a JSON object.
Parameters:
<Object> json Required JSON object representing the graphic.
Sample:

Create a line

require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myLine ={geometry:{"paths":[[[-91.40625,6.328125],[6.328125,19.3359375]]],
    "spatialReference":{"wkid":4326}},
    "symbol":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}};
  var gra= new Graphic(myLine);
  ...
});

Create a polygon

require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myPolygon = {"geometry":{"rings":[[[-115.3125,37.96875],[-111.4453125,37.96875],
    [-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375],
    [-115.3125,37.96875]]],"spatialReference":{"wkid":4326}},
    "symbol":{"color":[0,0,0,64],"outline":{"color":[0,0,0,255],
    "width":1,"type":"esriSLS","style":"esriSLSSolid"},
    "type":"esriSFS","style":"esriSFSSolid"}};
  var gra = new Graphic(myPolygon);
  ...
});

Create a multipoint

require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myMultiPoint = {"geometry":{"points":[[-92.109375,44.296875],[-86.1328125,31.9921875],
    [-73.4765625,45.703125]],"spatialReference":4326},"symbol":{"color":[255,255,255,64],
    "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",
    "outline":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}}};
  var gra = new Graphic(myMultiPoint);
  ...
});

Create a point and specify an infoTemplate

require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myPoint = {"geometry":{"x":-104.4140625,"y":69.2578125,
    "spatialReference":{"wkid":4326}},"attributes":{"XCoord":-104.4140625,
    "YCoord":69.2578125,"Plant":"Mesa Mint"},"symbol":{"color":[255,0,0,128],
    "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS",
    "style":"esriSMSSquare","outline":{"color":[0,0,0,255],"width":1,
    "type":"esriSLS","style":"esriSLSSolid"}},
    "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/>
     Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};
  var gra = new Graphic(myPoint);
  ...
});
Property Details

<Object> attributes

Name value pairs of fields and field values associated with the graphic.
NOTE: Date field values are always represented as numeric values. This means that when updating existing features, date fields must have numeric values and not date objects.
See also: setAttributes()

<Geometry> geometry

The geometry that defines the graphic.
See also: setGeometry()

<InfoTemplate> infoTemplate

The content for display in an InfoWindow.

<Symbol> symbol

The symbol for the graphic.
See also: setSymbol()

<Boolean> visible

Indicate the visibility of the graphic. The default value is true.
Known values: true | false
Default value: true
Method Details

attr(name, value)

Adds a new attribute or changes the value of an existing attribute on the graphic's DOM node. Removes the attribute if the value is null or undefined. Add at v3.7.. Note: use the attributes property or setAttributes() method to set the graphic attributes. (Added at v3.7)
Return type: Graphic
Parameters:
<String> name Required The name of the attribute.
<String> value Required The value of the attribute. Set this value as null to remove the attribute.

draw()

Draws the graphic. (Added at v3.7)
Return type: Graphic

getContent()

Returns the content string based on attributes and infoTemplate values.
Return type: String

getDojoShape()

Returns the dojo/gfx/shape.Shape of the Esri graphic. One common use for the getDojoShape method is to change the drawing order of a graphic using the moveToFront and moveToBack methods. Deprecated at v3.8. Use getShape and getShapes instead.
Return type: Shape
Sample:
graphic.getDojoShape().moveToFront();
graphic.getDojoShape().moveToBack();

getInfoTemplate()

Returns the info template associated with the graphic. If no info template is associated with the graphic it returns the info template associated with the parent layer of the graphic. (Added at v3.5)
Return type: InfoTemplate

getLayer()

Returns a reference to the associated layer. The layer is always returned, even if the graphic is no longer part of that layer. Prior to version 3.10, it would return a graphics layer that contains the graphic in addition to returning null if the graphic was not added to a layer. (Added at v2.0)
Return type: Layer

getNode()

Returns the DOM node used to draw the graphic. Returns null or undefined if the graphic is drawn on HTML Canvas. The SVG element will likely return a Path, Circle, or Rect. (Added at v3.7)
Return type: SVG group |
SVG element |
VML Shape |
Group Element
Sample:
map.graphics.on("click", function(e){
  //get the associated node info when the graphic is clicked
  var node = e.graphic.getNode();
  console.log(node);
});

getNodes()

Returns one or more DOM nodes used to draw the graphic. Multiple nodes are used when a graphics layer has a renderer with backgroundFillSymbol. The SVG element will likely return a Path, Circle, or Rect. (Added at v3.8)
Return type: SVG group | SVG element | VML Shapes or Group Elements

getShape()

Returns the dojox/gfx/shape.Shape of the Esri graphic. One common use is to change the drawing order of a graphic using the moveToFront and moveToBack methods. (Added at v3.8)
Return type: Shape
Sample:
graphic.getShape().moveToFront();
graphic.getShape().moveToBack();

getShapes()

Returns one or more dojox/gfx/shape.Shape used to draw the graphic. Multiple shapes are used when a graphics layer has a renderer with backgroundFillSymbol. (Added at v3.8)
Return type: Shape[]

getTitle()

Returns the title string based on attributes and infoTemplate values.
Return type: String

hide()

Hides the graphic.

setAttributes(attributes)

Defines the attributes of the graphic.
Return type: Graphic
Parameters:
<Object> attributes Required The name value pairs of fields and field values associated with the graphic.
Sample:
gra.setAttributes( {"XCoord":evt.mapPoint.x,"YCoord":evt.mapPoint.y,"Plant":"Mesa Mint"});
See also: attributes

setGeometry(geometry)

Defines the geometry of the graphic.
Return type: Graphic
Parameters:
<Geometry> geometry Required The geometry that defines the graphic.
Sample:

gsvc.simplify([ polygonGraphic.geometry ], function(geometries){

  polygonGraphic.setGeometry(geometries[0]);

});

See also: geometry

setInfoTemplate(infoTemplate)

Defines the InfoTemplate for the InfoWindow of the graphic. When a user clicks a graphic, the InfoWindow opens with this template.
Return type: Graphic
Parameters:
<InfoTemplate> infoTemplate Required The content for display in an InfoWindow.
Sample:
require([
  "esri/InfoTemplate", ... 
], function(InfoTemplate, ... ) {
  var infoTemplate = new InfoTemplate();

  infoTemplate.setTitle("${NAME}");

  infoTemplate.setContent("<b>2000 Population: </b>${POP2000}<br/>"

         + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"

         + "<b>2007 Population: </b>${POP2007}<br/>"

         + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}");

  graphic.setInfoTemplate(infoTemplate);
  ...
});

setSymbol(symbol)

Sets the symbol of the graphic.
Return type: Graphic
Parameters:
<Symbol> symbol Required The symbol for the graphic.
Sample:
require([
  "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ... 
], function(SimpleFillSymbol, SimpleLineSymbol, Color, ... ) {    
  var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
    new Color([98,194,204]), 2), new Color([98,194,204,0.5])
  );
  var graphic = results[i].feature;
  graphic.setSymbol(symbol);
  ...
});
See also: symbol

show()

Shows the graphic.

toJson()

Converts object to its ArcGIS Server JSON representation.
Return type: Object