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: Graphic
[ AMD Module Require | Legacy Module Require ]
dojo.require("esri.graphic");
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
| Name | Summary |
|---|---|
| new esri.Graphic(geometry?, symbol?, attributes?, infoTemplate?) | Creates a new Graphic object. |
| new esri.Graphic(json) | Creates a new Graphic object using a JSON object. |
Data Attributes
| Name | Type | Description |
|---|---|---|
| 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
| Name | Type | Summary |
|---|---|---|
| attributes | Object | Name value pairs of fields and field values associated with the graphic. |
| geometry | Geometry | The geometry that defines the graphic. |
| infoTemplate | InfoTemplate | The content for display in an InfoWindow. |
| symbol | Symbol | The symbol for the graphic. |
| visible | Boolean | Indicate the visibility of the graphic. |
Methods
| Name | Return type | Summary |
|---|---|---|
| attr(name, value) | Graphic | Adds a new attribute or changes the value of an existing attribute on the graphic's DOM node. |
| clone() | Graphic | Creates a deep clone of the graphic object. |
| draw() | Graphic | Draws the graphic. |
| getChildGraphics() | Graphic[] | Returns the graphics summarized by an aggregate graphic in a clustering or feature reduction visualization. |
| getContent() | String | Returns the content string based on attributes and infoTemplate values. |
| getDojoShape() | Shape | Returns the dojo/gfx/shape.Shape of the Esri graphic. |
| getInfoTemplate() | InfoTemplate | Returns the info template associated with the graphic. |
| getLayer() | Layer | Returns 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 Elements | Returns one or more DOM nodes used to draw the graphic. |
| getParentGraphic() | Graphic | Applicable to label graphics. |
| getShape() | Shape | Returns the dojox/gfx/shape.Shape of the Esri graphic. |
| getShapes() | Shape[] | Returns one or more dojox/gfx/shape.Shape used to draw the graphic. |
| getSourceLayer() | Layer | In contrast to the getLayer method, getSouceLayer does not change when a graphic is added to another layer. |
| getTitle() | String | Returns the title string based on attributes and infoTemplate values. |
| hide() | None | Hides the graphic. |
| isAggregate() | Boolean | Indicates if the graphic represents a cluster of features. |
| setAttributes(attributes) | Graphic | Defines the attributes of the graphic. |
| setGeometry(geometry) | Graphic | Defines the geometry of the graphic. |
| setInfoTemplate(infoTemplate) | Graphic | Defines the InfoTemplate for the InfoWindow of the graphic. |
| setSymbol(symbol) | Graphic | Sets the symbol of the graphic. |
| show() | None | Shows the graphic. |
| toJson() | Object | Converts object to its ArcGIS Server JSON representation. |
Constructor Details
Creates a new Graphic object. Specify parameters in the given order using null if you aren't providing a value for an option.
Parameters:
< |
Optional | The geometry that defines the graphic. |
< |
Optional | Symbol used for drawing the graphic. |
< |
Optional | Name value pairs of fields and field values associated with the graphic. |
< |
Optional | The content for display in an InfoWindow. |
Sample:
var pt = new esri.geometry.Point(xloc,yloc,map.spatialReference)
var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(
esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new esri.Color([255,0,0,0.5]));
var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"};
var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/>
Longitude: ${Xcoord} <br/>
Plant Name:${Plant}");
var graphic = new esri.Graphic(pt,sms,attr,infoTemplate);
//create a graphic with no attributes or info template var graphic = new esri.Graphic(pt, sms);
Creates a new Graphic object using a JSON object.
Parameters:
< |
Required | JSON object representing the graphic. |
Sample:
Create a line
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 esri.Graphic(myLine);
Create a polygon
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 esri.Graphic(myPolygon);
Create a multipoint
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 esri.Graphic(myMultiPoint);
Create a point and specify an infoTemplate
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 esri.Graphic(myPoint);
Property Details
<Object
ObjectName 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()
<Boolean
BooleanIndicate the visibility of the graphic. The default value is true.
Known values:
true | falseDefault value:
trueMethod Details
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:
GraphicReturns the graphics summarized by an aggregate graphic in a clustering or feature reduction visualization. Use isAggregate() to first check if the graphic calling this method represents an aggregation of points. See FeatureLayer.setFeatureReduction() for more details. (Added at v3.22)
Return type:
Graphic[]Returns the content string based on attributes and infoTemplate values.
Return type:
StringReturns 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:
ShapeSample:
graphic.getDojoShape().moveToFront(); graphic.getDojoShape().moveToBack();
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:
InfoTemplateReturns 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:
LayerReturns 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 ElementReturns 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 ElementsApplicable to label graphics. This returns the parent graphic associated to the label. (Added at v3.27)
Return type:
GraphicReturns 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:
ShapeSample:
graphic.getShape().moveToFront(); graphic.getShape().moveToBack();
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[]In contrast to the getLayer method,
getSouceLayer does not change when a graphic is added to another layer. (Added at v3.21)Return type:
LayerReturns the title string based on attributes and infoTemplate values.
Return type:
StringIndicates if the graphic represents a cluster of features. This only applies to point graphics in a FeatureLayer, CSVLayer, or StreamLayer. See FeatureLayer.setFeatureReduction() for more details about clustering and feature reduction. (Added at v3.22)
Return type:
BooleanDefines the attributes of the graphic.
Return type:
GraphicParameters:
< |
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
Defines the geometry of the graphic.
Return type:
GraphicParameters:
< |
Required | The geometry that defines the graphic. |
Sample:
gsvc.simplify([ polygonGraphic.geometry ], function(geometries){
polygonGraphic.setGeometry(geometries[0]);
});
See also: geometry
Defines the InfoTemplate for the InfoWindow of the graphic. When a user clicks a graphic, the InfoWindow opens with this template.
Return type:
GraphicParameters:
< |
Required | The content for display in an InfoWindow. |
Sample:
var infoTemplate = new esri.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);
See also: infoTemplate, Map.showInfoWindow()
Sets the symbol of the graphic.
Return type:
GraphicParameters:
< |
Required | The symbol for the graphic. |
Sample:
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([98,194,204]), 2), new esri.Color([98,194,204,0.5]) ); var graphic = results[i].feature; graphic.setSymbol(symbol);
See also: symbol