Attaching an InfoWindow to Graphics with the ArcGIS Server JavaScript API

Posted on October 23, 2008. Filed under: ESRI, GeoSpatial Training Services |

In our last post we covered the topic of creating graphics using the ArcGIS Server JavaScript API.  In that post we showed how to use various objects to set the geometry and symbology for a graphic.  We’ll build on that material in this post by showing how you can attach attributes to a graphic and then display them in an InfoWindow when the graphic is clicked.

You can view and interact with the final map here and then we’ll discuss how it was created. As I mentioned we are simply adding additional code to the last post which showed you how to create the graphic objects by setting the geometry and symbology.  If you’d like to follow along as we discuss the code, simply right click the page and click View Source.

An InfoWindow is an HTML popup window that displays when you click a graphic on the map.  Normally it contains the attributes of the clicked graphic, but it can also contain custom content that you specify as a developer.  The content of these windows is specified through an InfoTemplate object which specifies a title for the window and the content to display in the window.  You can create these InfoTemplate objects using one of the three constructors seen below.  We’ll cover how to use each of these constructors.

Using a Wildcard
The easiest way to create an InfoTemplate object is to use a wildcard for the content that will automatically insert all the fields of a dataset into the InfoWindow.  Here is an example.

Here we are using the second constructor from the list of three constructors displayed above which takes parameters for both a title of the window as well as the content of the window.  Notice the line:

This is part of the query that is performed against a layer in a map service and defines the output fields that will be returned as a result.  There are many other fields in the layer, but here we are defining only a sub-set of fields that should be returned.  Now, we create a new instance of InfoTemplate using a constructor.

The first parameter passed into the constructor (“County Attributes”) is the title for the window.  The second parameter is a wildcard indicating that all the attribute’s name value pairs should be printed to the window.

Finally, we use the Graphic.setInfoTemplate( ) method to assign the newly created InfoTemplate to a graphic.

This is the code that was used to produce the InfoWindow produced by clicking a graphic feature in the example.

Want More Control Over Content Displayed in an InfoWindow?
In the event that you only want to display a subset of the fields for your graphic you can specifically define the content for the InfoTemplate.  Using a wildcard is often a good, simple way to display the attributes of your graphic feature.  However, if you need more control over the content and fields that are displayed you can specifically define these characteristics.

Notice in the example above that we’re still using the same constructor to create the InfoTemplate.  However, instead of defining a wildcard to return all the fields we are specifically defining that only the NAME and POP90_SQMI attribute are to be returned.  This is accomplished through Dojo syntax (${key}) which identifies the fields that will be used to perform parameter substitution.  For example, we use ${NAME} to specify that the contents of the NAME field should be substituted in this placeholder.

Here, the content is wrapped inside HTML table row tags (<tr> and <td>).  In addition, we are defining more using friendly field names (“County Name”, “Population SQ MI”) rather than accepting the actual field name.  Here is the result:

Using JSON Objects in InfoTemplate Constructor
Another way to create an InfoTemplate is through the use of a constructor that accepts a JSON object.  JavaScript Object Notation or JSON is a lightweight data-interchange format for storing and exchanging data and is built using a collection of ordered, name/value pairs.

Here is an example JSON object:

Each JSON object is enclosed by brackets {}.  Inside the brackets you have name (title, content) value pairs that define the object.  This object is passed into the InfoTemplate constructor.

The result will be the same InfoWindow that we created containing only the NAME and POP90_SQMI fields.

Creating an Empty InfoTemplate Object
The final method of creating and populating an InfoTemplate object is to create an empty InfoTemplate object and use the setContent( ) and setTitle( ) methods to assign the content.  You can see a code example of this method below.

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 if you are affiliated with a government, non-profit, or educational institution.  You can register for the course online or by contacting 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: