Graphic

AMD: require(["esri/Graphic"], (Graphic) => { /* code goes here */ });
ESM: import Graphic from "@arcgis/core/Graphic";
Class: esri/Graphic
Inheritance: Graphic Accessor
Since: ArcGIS API for JavaScript 4.0

A Graphic is a vector representation of real world geographic phenomena. It can contain geometry, a symbol, and attributes. A Graphic is displayed in the GraphicsLayer.

To learn how to work with graphics, see the Intro to graphics tutorial.

let polyline = {
  type: "polyline",  // autocasts as new Polyline()
    paths: [
      [-111.30, 52.68],
      [-98, 49.5],
      [-93.94, 29.89]
    ]
};

let polylineSymbol = {
  type: "simple-line",  // autocasts as SimpleLineSymbol()
  color: [226, 119, 40],
  width: 4
};

let polylineAtt = {
  Name: "Keystone Pipeline",
  Owner: "TransCanada"
};

let polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: polylineSymbol,
  attributes: polylineAtt
});

view.graphics.add(polylineGraphic);
See also:

Constructors

new Graphic(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
Objectmore details

Name-value pairs of fields and field values associated with the graphic.

more detailsGraphic
Stringmore details

The name of the class.

more detailsAccessor
Geometrymore details

The geometry that defines the graphic's location.

more detailsGraphic
Booleanmore details

Indicates whether the graphic refers to an aggregate, or cluster graphic.

more detailsGraphic
Layermore details

If applicable, references the layer in which the graphic is stored.

more detailsGraphic
PopupTemplatemore details

The template for displaying content in a Popup when the graphic is selected.

more detailsGraphic
Symbolmore details

The Symbol for the graphic.

more detailsGraphic
Booleanmore details

Indicates the visibility of the graphic.

more detailsGraphic

Property Details

attributes Object

Name-value pairs of fields and field values associated with the graphic.

Example:
let graphic = new Graphic();
graphic.attributes = {
  "name": "Spruce",
  "family": "Pinaceae",
  "count": 126
};
declaredClass Stringreadonly inherited
Since: ArcGIS API for JavaScript 4.7

The name of the class. The declared class name is formatted as esri.folder.className.

geometry Geometryautocast

The geometry that defines the graphic's location.

Z-values defined in a geographic or metric coordinate system are expressed in meters. However, in local scenes that use a projected coordinate system, vertical units are assumed to be the same as the horizontal units specified by the service.

Example:
// First create a point geometry
let point = {
  type: "point",  // autocasts as new Point()
  longitude: -71.2643,
  latitude: 42.0909
};

// Create a symbol for drawing the point
let markerSymbol = {
  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
  color: [226, 119, 40]
};

// Create a graphic and add the geometry and symbol to it
let pointGraphic = new Graphic({
  geometry: point,
  symbol: markerSymbol
});
isAggregate Booleanreadonly
Since: ArcGIS API for JavaScript 4.18

Indicates whether the graphic refers to an aggregate, or cluster graphic. Aggregate graphics represent clusters of features. If a graphic is an aggregate, you can use its Object ID to query the features comprising the cluster.

See also:
layer Layer

If applicable, references the layer in which the graphic is stored.

popupTemplate PopupTemplateautocast

The template for displaying content in a Popup when the graphic is selected. The PopupTemplate may be used to access a graphic's attributes and display their values in the view's default popup. See the documentation for PopupTemplate for details on how to display attribute values in the popup.

As of 4.8 to get the actual popupTemplate of the graphic, see the getEffectivePopupTemplate() method that either returns this value or the popupTemplate of the graphic's layer.

See also:
Example:
// The following snippet shows how to set a popupTemplate on the returned results (features)
// from an IdentifyTask

 idResult.feature.popupTemplate = {
 title: "{NAME}",
   content: [{
     // Pass in the fields to display
     type: "fields",
     fieldInfos: [{
       fieldName: "NAME",
       label: "Name"
     }, {
       fieldName: "REGION",
       label: "Region"
    }]
   }]
};

The Symbol for the graphic. Choosing a symbol for a graphic depends on the View type (SceneView or MapView), and the geometry type of the graphic.

Each graphic may have its own symbol specified when the parent layer is a GraphicsLayer. For a FeatureLayer the symbol of each graphic should not be set by the developer since the graphics' rendering properties are determined by the layer's renderer.

Example:
view.on("click", function(event){
  let graphic = new Graphic({
    geometry: event.mapPoint,
    symbol: {
      type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
      color: "blue",
      size: 8,
      outline: { // autocasts as new SimpleLineSymbol()
        width: 0.5,
        color: "darkblue"
      }
    }
  });
});
visible Boolean

Indicates the visibility of the graphic.

Default Value:true

Method Overview

Name Return Type Summary Class
Graphicmore details

Creates a deep clone of the graphic object.

more detailsGraphic
*more details

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product.

more detailsGraphic
*more details

Returns the value of the specified attribute.

more detailsGraphic
PopupTemplatemore details

Returns the popup template applicable for the graphic.

more detailsGraphic
Numbermore details

Returns the Object ID of the feature associated with the graphic, if it exists.

more detailsGraphic
more details

Sets a new value to the specified attribute.

more detailsGraphic
Objectmore details

Converts an instance of this class to its ArcGIS portal JSON representation.

more detailsGraphic

Method Details

clone(){Graphic}

Creates a deep clone of the graphic object.

Returns:
Type Description
Graphic Returns a deep clone of the graphic.
fromJSON(json){*}static

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameter:
json Object

A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns:
Type Description
* Returns a new instance of this class.
getAttribute(name){*}

Returns the value of the specified attribute.

Parameter:
name String

The name of the attribute.

Returns:
Type Description
* Returns the value of the attribute specified by name.
getEffectivePopupTemplate(defaultPopupTemplateEnabled){PopupTemplate}
Since: ArcGIS API for JavaScript 4.8

Returns the popup template applicable for the graphic. It's either the value of popupTemplate or the popupTemplate from the graphic's layer.

Parameter:
defaultPopupTemplateEnabled Boolean
optional
Default Value: false

Whether support for default popup templates is enabled. When true, a default popup template may be created automatically if neither the graphic nor its layer have a popup template defined.

Returns:
Type Description
PopupTemplate Returns the popup template of the graphic.
getObjectId(){Number}

Returns the Object ID of the feature associated with the graphic, if it exists.

Returns:
Type Description
Number The ObjectID of the feature associated with the graphic.
setAttribute(name, newValue)

Sets a new value to the specified attribute.

Parameters:
name String

The name of the attribute to set.

newValue *

The new value to set on the named attribute.

toJSON(){Object}

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.

Returns:
Type Description
Object The ArcGIS portal JSON representation of an instance of this class.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.