Archive for October, 2008

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.

InfoTemplate
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 geospatialtraining.com.

Read Full Post | Make a Comment ( None so far )

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 ‘map.graphics.add’ 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 geospatialtraining.com

Read Full Post | Make a Comment ( None so far )

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