Class: GraphicE-mail This TopicPrintable VersionGive Us Feedback

Description

dojo.require("esri.graphic");

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.  

Class hierarchy

esri.Graphic

Constructor

Constructor Description
esri.Graphic(geometry, symbol, attributes, infoTemplate) Creates a new Graphic object. All parameters are required and must be specified in the order given.
esri.Graphic(json) Creates a new Graphic object using a JSON object.

Properties

Property Type Description
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. The default value is true.

Methods

Method Return Value Description
getContent() String Returns the content string based on attributes and infoTemplate values.
getDojoShape() dojox.gfx.Shape Returns the Dojo gfx shape of the ESRI graphic.
getLayer() GraphicsLayer Returns the graphics layer that contains the graphic. Returns null if the graphic is not added to a layer.
getTitle() String Returns the title string based on attributes and infoTemplate values.
hide() none Hides the graphic.
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. When a user clicks a graphic, the InfoWindow opens with this template.
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 Detail

esri.Graphic(geometry, symbol, attributes, infoTemplate)

Creates a new Graphic object. All parameters are required and must be specified in the order given.
Parameters:
<Geometry> geometry Required The geometry that defines the graphic.
<Symbol> symbol Required Symbol used for drawing the graphic.
<Object> attributes Required Name value pairs of fields and field values associated with the graphic.
<InfoTemplate> infoTemplate Required The content for display in an InfoWindow.
Code snippets:
var pt = new esri.geometry.Point(xloc,yloc,map.spatialReference)
var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(
  esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(
  new dojo.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);

esri.Graphic(json)

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

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);
Properties Detail

<Object> attributes

Name value pairs of fields and field values associated with the graphic.
See also:
setAttributes  

<Geometry> geometry

The geometry that defines the graphic.
See also:
setGeometry  

<InfoTemplate> infoTemplate

The content for display in an InfoWindow.
See also:
setInfoTemplate  

<Symbol> symbol

The symbol for the graphic.
See also:
setSymbol  

<Boolean> visible

Indicate the visibility of the graphic. The default value is true.
Methods Detail

getContent()

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

getDojoShape()

Returns the Dojo gfx shape of the ESRI graphic.
Return value: dojox.gfx.Shape

getLayer()

Returns the graphics layer that contains the graphic. Returns null if the graphic is not added to a layer. (As of v2.0)
Return value: GraphicsLayer

getTitle()

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

hide()

Hides the graphic.
Return value: none

setAttributes(attributes)

Defines the attributes of the graphic.
Return value: Graphic
Input Parameters:
<Object> attributes Required The name value pairs of fields and field values associated with the graphic.
Code snippets:
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 value: Graphic
Input Parameters:
<Geometry> geometry Required The geometry that defines the graphic.
Code snippets:
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 value: Graphic
Input Parameters:
<InfoTemplate> infoTemplate Required The content for display in an InfoWindow.
Code snippets:
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  

setSymbol(symbol)

Sets the symbol of the graphic.
Return value: Graphic
Input Parameters:
<Symbol> symbol Required The symbol for the graphic.
Code snippets:
      
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));
var graphic = results[i].feature;
graphic.setSymbol(symbol);

See also:
symbol  

show()

Shows the graphic.
Return value: none

toJson()

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