How to track pending tiles and display a busy indicator in a Web mapping application
Rex Hansen contributed this post about how to use some of the enhanced JavaScript in Service Pack 2 to track pending tiles and display a busy indicator (such as an animated "Loading" graphic) over the Web ADF's Map control:
As a Web ADF developer working in an asynchronous communication environment, it is often beneficial to provide an end user with some indication that a user action is being processed. Since most Web ADF applications are centered on working with a map, the ability of an end user to effectively interact with map contents is essential. The Web ADF has the ability to asynchronously retrieve map data from multiple sources and consolidate it in a single map control. In general, data sources often differ in the time it takes to respond to a request. Since the Web ADF Map control is capable of rendering map data as it is returned to the browser, it’s possible that some portion of data in the map is visible and accessible before another portion. In this case, it will likely be important to let the end user know when the map control has finished loading map data from any and all sources.
To support this capability, 9.2 service pack 2 includes an enhanced Web ADF JavaScript Map object. The JavaScript Map object has a set of “event handlers” on the pendingTiles property. The pendingTiles property references an array of map image tiles to be rendered. The array is updated when the map needs new image tiles based on the current extent. Events on the pendingTiles property are listed below:
| Event |
Description |
| add_onRequestsPending |
Triggered when the number of items in the pendingTiles array changes from 0 to a higher value |
| add_onRequestsRemove |
Triggered when an item is removed from the pendingTiles array |
| add_onRequestsCompleted |
Triggered when the number of item in the pendingTiles array changes to 0 |
Use these handlers on the Map object’s pendingTiles property to register a JavaScript function with the event. For example:
map.pendingTiles.add_onRequestsPending(showBusyIndicator)
where map is the Map object and showBusyIndicator is a JavaScript function to call when the number of items in the pendingTiles array changes from 0 to a higher value.
The JavaScript function showBusyIndicator may appear as follows.
function showBusyIndicator(sender) {
showLayer("BusyIndicator");
if (sender!=null) {
window.status = "Pending Tiles: " + sender.pendingTiles.length;
}
The argument to the function is a reference to the JavaScript Map object. This argument can be used to gain access to map properties, such as the number of map image tiles left in the pendingTiles array. In this example, the number of pending tiles is output to the browser window’s status bar. If the argument is null, the pendingTiles array contains 0 items. The Web ADF includes two convenient JavaScript functions to show or hide a layer (div) based on its id, named showLayer and hideLayer, respectively. The functions are contained in the display_common.js file which is by default embedded with the Web ADF controls. In this example, the showLayer function is used to make the contents in the div tag with an id of “BusyIndicator” visible.
Included below is a simple Web page with a MapResourceManager, Map, and a div tag containing an image. The JavaScript Map object events are handled after the form to let the content of the form load before interacting with it.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="ESRI.ArcGIS.ADF.Web.UI.WebControls, Version=9.2.2.1350, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86"
Namespace="ESRI.ArcGIS.ADF.Web.UI.WebControls" TagPrefix="esri" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<esri:MapResourceManager ID="MapResourceManager1" runat="server">
<ResourceItems>
</ResourceItems>
</esri:MapResourceManager>
<esri:Map ID="Map1" runat="server" Height="453px" Width="556px" MapResourceManager="MapResourceManager1">
</esri:Map>
</div>
<div id="BusyIndicator" style="z-index: 1000; left: 25px; width: 100px; position: absolute; top: 422px;height: 100px">
<img src="images/CircleThickbox.gif" />
</div>
</form>
<script language="javascript" type="text/javascript">
function showBusyIndicator(sender) {
showLayer("BusyIndicator");
if (sender!=null) {
window.status = "Pending Tiles: " + sender.pendingTiles.length;
}
}
function showPendingTiles(sender) {
if (sender!=null) {
window.status = "Pending Tiles: " + sender.pendingTiles.length;
}
}
function hideBusyIndicator(sender) {
hideLayer("BusyIndicator");
if (sender!=null) {
window.status = "";
}
}
// add busy indicator functions to the map
map = Maps["Map1"];
map.pendingTiles.add_onRequestsPending(showBusyIndicator);
map.pendingTiles.add_onRequestsRemove(showPendingTiles);
map.pendingTiles.add_onRequestsCompleted(hideBusyIndicator);
</script>
</body>
</html>