Creating Graphics using the ArcGIS Server JavaScript API

Posted on October 7, 2008. Filed under: Uncategorized |

Graphics in the ArcGIS Server JavaScript API are points, lines, polygons, or text that are drawn on top of your map in a layer that is independent of any other data layers associated with a map service.  Most people associate a graphic object with the symbol that is displayed on a map to represent the graphic.  However, each graphic in an ArcGIS Server JavaScript application can be composed of up to four objects including:

  • Geometry of the graphic
  • Symbology associated with the graphic
  • Attributes that describe the graphic
  • Info template that defines the format of the InfoWindow that appears when a graphic is clicked.

Although a graphic can be composed of up to four objects it is not always necessary apply all properties of a graphic.  The objects you choose to associate with your graphic will be dependent upon the needs of the application that you are building.  For example, in an application that displays GPS coordinates on a map you may not have a need to associate attributes nor display an InfoWindow for the graphic when clicked.  However, in most cases you will be defining the geometry and symbology for a graphic.

In this post you will learn how to create and display graphics on a map using the ArcGIS Server JavaScript API.  We are going to create a thematic map showing population density by county for the State of Colorado.  You will also be introduced to query tasks.   Tasks can be executed against ArcGIS Server, and include things like spatial and attribute queries, identification of features, geocoding, and more.

You can view and interact with the final map here (or simply take a look at the image below) and then we’ll discuss how it was created.  If you’d like to follow along as we discuss the code, simply right click the page and click View Source.

The Basics
In previous posts I covered the basic coding procedures for creating a map and setting the extent of the map so I won’t cover the details of how this is done with this post.  Please review these posts for information on those topics.

Creating the Symbology Objects
Various objects can be used to create symbology for graphics including SimpleMarkerSymbol, SimpleLineSymbol, and SimpleFillSymbol which are used to define simple symbology for points, lines, and polygons respectively.  In addition, TextSymbol objects are used to create text graphics.  In this particular example I’m using the SimpleFillSymbol class to create a variety of symbols that will be used to color code counties by population density.  As with all symbols you can assign a color which we have done with the setColor method which is passed a new instance of dojo.Color.  Dojo colors are created as R,G,B values with an optional transparency value.  In this case we’re setting a transparency value of .85 so that we can see through the counties to the underlying base map.

More Symbol Information
SimpleFillSymbol along with SimpleMarkerSymbol and SimpleLineSymbol inherit from esri.symbol.Symbol.

Each of the symbols inherit the setColor( ) method from esri.symbol.Symbol.  In addition, SimpleFillSymbol also inherits the setOutline(outline) method from esri.symbol.FillSymbol which can be used to assign an outline color and style for the polygon.  SimpleFillSymbol has a number of styles which can be assigned to the symbol with a solid fill being the default.  Additional styles including cross hatching, diagonal lines, horizontal lines, and more.  We’ve simply used the default solid fill style in our example.

Initialize and Execute Query
Data layers in a map service can be queried through the use of a QueryTask object which accepts input parameters that define the attribute and/or spatial characteristics of the query in the form of a Query object.  These queries can be attribute, spatial, or a combination of the two.  For example, an attribute query might search for all land parcels with a valuation of greater than $100,000.  A spatial query could be used to find all land parcels that intersect a 100 year floodplain, and a combination query might search for all land parcels with a valuation of greater than $100,000 and whose geometry intersects the 100 year floodplain.  In this example we are performing an attribute query on the counties layer in the ESRI_StateCityHighway_USA map service.  Take a look at the code below and then we’ll discuss what is taking place.

We first create a new instance of QueryTask which takes a URL pointer to the counties layer inside the ESRI_StateCityHgihway_USA layer.  Then, after creating a new instance of the Query class we set the Query.where property to search for only those records where the state name is Colorado.  This defines our attribute query.  We also indicate that we’d like the task to return the geometric description of each feature that meets the query by setting the Query.returnGeometry value to ‘true’.  In addition, we define a single output field (“POP90_SQMI”) that should be returned for each feature.  It is this population per square mile value that we will use to define the symbol associated with each feature.  Our final step is to call the QueryTask.execute method, passing in the Query object that contains the parameters we just defined.  This will execute the query against the layer in ArcGIS Server and the results will be returned to the ‘addPolysToMap’ function which was specified as the callback function in our call to QueryTask.execute.

Add Polygons to Map and Set Symbology
As I mentioned, the QueryTask.execute method takes two parameters, the second of which defines the callback function that will be called when the query has been executed.  This function will be passed a FeatureSet object containing an array of graphics (features or records) that satisfy the attribute and/or spatial constraints specified in the query operation.  Thus, in our code example, the ‘addPolysToMap’ function is called.  Take a look at this code block below and then we’ll discuss.

This code block loops through each record returned by the query.  Inside the loop we pull out the attributes of the feature (graphic) which in this case amounts to only the single ‘POP90_SQMI’ field.  The geometry of each graphic is also contained within the returned FeatureSet.  The field value for each record is placed into a ‘pop’ variable and then evaluated with an ‘if’ statement.  The symbol assigned to this record is dependent upon the value for the record and is accomplished through the Graphic.setSymbol method.  Finally, the feature (graphic) is added to the graphics list through the ‘’ method.  Before any of your graphics are displayed on the map you must add them to the GraphicsLayer.  Each map has a GraphicsLayer which contains an array of graphics that is initially empty until you add the graphics.  This layer can contain any type of graphic object meaning that you can mix in points, lines, and polygons at the same time.  Graphics are added to the layer through the add( ) method as I mentioned.

Next Up
As I mentioned earlier in this post, you can assign geometry, symbology, attributes, and an InfoTemplate to a graphic.  In this exercise we assigned only geometry and symbology.  In our next installment we’ll show you how to use attributes and an InfoTemplate to display attribute information about graphics.

More Information
The October 20th – November 21st session of “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps” is SOLD OUT, but we are offering a second session January 12th – February 12th.  You can save 15% on this session by signing up before October 15th.  You can register for the course online or contact us at sales at


Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: