Visualization of Results


Introduction

In ArcGIS Server 10, task results are represented in two ways: data representation (shown in result panel) and visual representation (shown on the map as a callout). The following images show effect of identifying a result in ArcGIS Server 10.
 
 

Terminology

There are four distinct features defined by the visual representation. There features are defined and configured in the ‘faces-config.xml’ of an ADF web application.
Callout
The result pane window is referred to as the Callout

LayerDefinition
This is a Java class used to customize the query result. The LayerDefinition can be used to set field aliases, filter return fields, set symbols and set other features related to the resulting layer. The calloutTemplate and resultTemplate are also defined here. This class must be defined in order for the Callout window to display as desired.
calloutTemplate
This is  a XML template which is used to display results in the Callout. It comprises three nodes at top level----header, body and footer.
 
resultTemplate
It is a well-defined XML template for formatting result attributes
 

Supported Map Services

ArcGIS Local Map Service, ArcGIS Internet Map Service, ArcIMS local and ArcIMS Internet Service support callout functions.  WMS map service does not support callout function since WMS protocol does not return geometry information.

Usage

Callout functions are enabled by default in the WEB ADF web map application. Any query result which originates from a layer with LayerDefintion can have a callout. Results can be populated through the Identify task. We’ll step through a usage scenario below using a Manager generated map application.
Identify task in manager generated web application
Create a web application through manager and deploy the application. In this process, the LayerDefinition is automatically configured in faces-config.xml
Click on the ‘Identify’ icon on the toolbar
 
Click on map to identify result. The callout window should appear
 
Show all the feature classes for this location
 
Select one feature class (for example, Montana in ‘States’ layer) and Click on ‘add to results’ on the bottom of the callout window to add result into result panel
 
Switch to ‘pan’ tool and click the map tip graphics to show the callout.
 
 

Customizing the Result

For those who are interested in customized result, there are two approaches to do it: customization through manager and manual customization. These two approaches are same in the sense that both of them interact with LayerDefinition. While manager approach has more convenience, the manual approach provides more flexibility.

Customization Category

Renderer
The Renderer defines how the result (map tip feature) graphics should be rendered by default. It holds a symbol which is used during the rendering. You can set the picture marker for the result in a point layer. For line layers, user could set a line color, width, pattern (dashed, dotted, etc.), and transparency. For polygon layers, you can set the same line properties to define the border of the polygon and also set a fill color. Define your own symbol and pass it to Renderer if you want to customize Renderer.
HighlightRenderer
It defines how the result graphics should be rendered when it is highlighted .In other words, what the result graphics looks like when mouse moves over it.
FieldAlias
Set the filed aliases name for the feature attributes.
CalloutTemplate
Set the content of callout window. You can define any customized content here. ${fieldalias} represents feature class attribute if user wants to insert the result attribute into callout content. For example, if you want to show the city’s population in callout, you can put the variable references ${CITY_NAME} and ${POP1999} into the CalloutTemplate (assuming that ‘CITY_NAME is name attribute and ‘POP1999’ is the population attribute).
 
ResultTemplate
Set the content of result on result window
MaxRecordCount
Set the maximum number of returned records

Manager Approach to Customization

Layer Configuration
Layer configuration defines how results returned from that layer should be shown and what is represented in the callout. This is the default configuration for all the tasks executed on this layer. Each layer can be configured to have its own symbol mark, highlight color and width.
Task Configuration
Task configuration defines how result returned from a task should be shown and what the callout content is.  Each layer could have one and more tasks. Each task could have its own result configuration. Once you define a task configuration on a layer, the layer configuration would be overridden. This gives you more flexibility over the appearance of their results. Consider the following scenario: you have single point layer ---‘Hospital’. You want to put hospitals into two categories. One category is hospitals where visit time is more than 35 minutes; while the other category is hospitals with less than 35 minutes visit time. You need to distinguish them immediately when you look at your map. Hospitals with more than 35 minutes visit time would be shown with bigger size symbol , while hospitals with less than 35 minutes visit time would be shown with smaller size symbol.
 
Here are steps to accommodate this customization:
• Define two separate query tasks.
• One task defines a query which returns all the results which have more than 35 minutes visit time.
• Chose the larger size symbol
• The other task defines a query which returns all the results which have less than 35 minutes visit time. 
• Chose the smaller size its symbol.

After you execute these two tasks, you will see the graphics rendered with respect to the custom query task you created.

How does the callout work?

This part of the documentation is targeted for programmers, technicians, and those who need more flexibility over visual representation (result graphics and callout) of the result.

In ArcGIS server 10, each result can have a callout on the map which shows detailed information of it. Callout is the collaborating work of client and server. Client side sends out an XMLHttpRequest which requests map tip information to the server whenever necessary. By default, ‘cacheFeaturesOnBrowser’ property of ‘WebMap’ instance is enabled for better performance. All results are stored on client side (browser). The AJAX request for results is only sent when result is added or deleted. On server side,  a single GraphicsResource instance holds all the results while a Phaselistener listens for incoming map tip request. After receiving the request, the listener asks for the generation of an XML file containing the result feature classes based on layer information and results held in GraphicsResource. Then the server would send back an AJAX response with map tip results. When client side receives the response, it would parse the information in it, store results information and draw updated results on the map. If you trigger a map tip event (e.g. hovering the mouse over the result area), client side would react according (e.g. update result graphics or show callout) based on stored result information.
 
The interaction with the callout is accomplished with JavaScript. The diagram above shows he architecture used in ‘adf.MapTip.js’ for better understanding of the map tip.
 

Important classes dealing with callout on client side

• adf.MapTip(EsriMapTip)
This class is the core of map tip callout. Four most important classes it uses are adf.Callout (EsriCallOut), MapTipElement, Feature, and CalloutNode. It manipulates all map tips’ behaviors like showing callout window and hiding callout window.
• adf.Map(EsriMap)
This class has an instance of adf.MapTip(EsriMapTip).
• adf.Callout(EsriCallOut)
This class represents the callout window of the map tip.
• MapTipElement
It represents a result area on user’s map.  It is an SVG element in FireFox browser and Chrome while it is a VML element in IE browser.
• Feature
This class contains feature information of the result. It has following properties: Header, Content, Footer, Geometry and Symbol. The property Header, Content and Footer are the information to be shown in the callout window. Property Geometry describes the result location on the map while property Symbol defines symbolic features (e.g. line color, opacity and highlight marker). These properties are retrieved from AJAX response from server. If you want to change any property (e.g. Symbol), you have to do it on server side.
• CalloutNode
This class, actually a structure, contains map tip information for current active result. So at one time, there is only one CalloutNode instance. But there might be many MapTipElements and Features since each result has a corresponding MapTipElement and Feature. CalloutNode has three attributes---pt (Point instance representing anchor point), sourceElement (MapTipElement instance representing result area) and feature (Feature instance representing result feature).
 

Client-Side workflow

The following figure describes the general work flow of map tip.  Other methods like expand(), hide() and collapse() are used by event handler to manipulate map tip box.
 
 

How to customize results manually?

Callout is composed of two parts: callout box and callout content. Callout box is created by JavaScript at client side, while callout content is generated by the server and passed to the client side for rendering in the tip box.

Change callout content

Callout content is composed of three child nodes1
1. title
2. body
3. footer

Steps to change the callout content

1. Create a well formatted XML file; put your customized HTML content in node ‘Body’.
[XML]
<header>Welcome to ${STATE_NAME}</header>
<body>
  <table style="[object]">
    <tody>
      <tbody>
        <tr>
          <td style="[object]">${STATE_NAME} has an area of ${AREA} square miles</td>
        </tr>
        <tr>
          <td>The population in year 1999 is ${POP1999}.
            <br/>
          </td>
        </tr>
        <tr>
          <td>The following is the state flag
            <img src="http://www.50states.com/flag/image/nunst020.gif"/>
          </td>
        </tr>
      </tbody>
    </tody>
  </table>
</body>
<footer/>
2. Put the result generated in step one into CDATA section. The result is as followed.
[XML]
<![CDATA[<header>Welcome to ${STATE_NAME}</header>
<body>
  <table style="[object]">
    <tr>
      <td style="[object]">${STATE_NAME} has an area of ${AREA} square miles.</td>
    </tr>
    <tr>
      <td>The population in year 1999 is ${POP1999}.
        <br/>
      </td>
    </tr>
    <tr>
      <td>The following is the state flag:
        <br/>
        <img src="http://www.50states.com/flag/image/nunst020.gif"/>
      </td>
    </tr>
  </table>
</body>
<footer/>
]]>
3. Find your target layer in your web application faces-config.xml, and put the text generated in step two into calloutTemplate. Now map tip has an eagle image in it.
 

FAQ

I do an ‘identify’ on map with two or more resources, some times, there is no callout window popping up, what might be the problem?
Depending on the type of the feature class, some feature class might take up lots of memory. Try to increase the memory of your application server, which might be the best solution.
Why isn’t there a callout for my result?
Make sure you have layer definition for layer to which the result belongs.  Remember that WMS service does not have a layer definition.
How can I disable the callouts?
You can disable callouts by configuring your JSF config file (faces-config.xml).  Open up the file for editing and navigate to 'mapContext->attributes->map'.  Find the reference to the 'WebMap' bean instance and add 'enableInfoWindow' property to the bean.  Set the value to 'false' to disable callouts.  By default, callouts are enabled.
[XML]
<managed-property>
  <property-name>enableInfoWindow</property-name>
  <value>false</value>
</managed-property>






Development licensing Deployment licensing
Server