wiki:CodeSamples/JavaScript/AJAXViewerEventHooking

Version 1 (modified by jbirch, 16 years ago) ( diff )

Restructuring

Hooking to events in the AJAX viewer

The AJAX viewer in its current form is quite limited in terms of customizability. It would be nice if you could listen to capture certain events in the ajax viewer and add on your custom javascript. This page will show how to do the following:

  • Checking when the map has been loaded.
  • Handling viewer selection.

It is assumed you know what anonymous functions are and how they work.

Checking when the map has been loaded

Before we can hook on to events in the ajax viewer, we need to check that the DOM for the ajax viewer has been loaded. This sample shows how to do it.

Assume your viewer page looks something as follows: 

<html>
<head>
	<title>Viewer Sample Application</title>
</head>
<frameset rows="30,*" frameborder="no" framespacing="0">
	<frame id="titleFrame" frameborder="no" marginwidth="0" marginheight="0" scrolling="no" src="title.html">
	<frame id="viewerFrame" frameborder="no" marginwidth="0" marginheight="0" scrolling="no" src="[URL TO AJAX VIEWER]">
</frameset>
</html>

Insert the following script block in the head of the page: 

<script type="text/javascript">

// Map loaded handler
function OnMapInitialized() {
    // Map has been initialized now we're off to the races.
    alert("Map has been initialized");
}

window.onload = function() {
    //Timer variable
    var timer; 

    // This is our "watch" function. What we are doing here is 
    // repeatedly checking the mapInit value of the Map Frame. When
    // mapInit is true, then the map has been loaded.
    var watch = function() {
        
        // What we are doing here is attempting to access the mapInit
        // variable of the Map frame. The reason the code is in a try-catch
        // is because chances are that this code access the DOM
        // of the map frame before its DOM has been initialized.
        try {
            var mapFrame = viewerFrame.mapFrame;
            if(mapFrame.mapInit) {
 
                // Remove the timer so this watch function stops executing
                clearInterval(timer);
                 
                // Call our custom handler
                OnMapInitialized();
            }
        }
        catch(e) {
        }
    };
    
    // Start the "watching" process. We basically invoke the watch function 
    // every 200ms until the map has been loaded.
    timer = setInterval(watch, 200);
};

</script>

Handling viewer selection

This sample will show how to handle the selection in the ajax viewer. This assumes the html is the same as the previous example.

The code "overrides" the OnSelectionChanged function of the map frame (this is called by the map frame when selection changes) and replaces it with our own.

Insert the following script block in the head of the page: 

<script type="text/javascript">

//Function variable to store the original OnSelectionChanged
var origOnSelectionChanged = null;

//Our custom selection handler
function MySelectionHandler()
{
    //This is important. We don't want to replace the original function, rather
    //we want to attach our code into the execution sequence. So we call the original
    //function first.
    origOnSelectionChanged();

    //Now our code goes here. For our example, we'll just show the number of objects selected.
    var count = viewerFrame.GetMapFrame().GetSelectedCount();
    alert(count + " features selected");
}
window.onload = function() {
    //Timer variable
    var timer; 

    // This is our "watch" function. What we are doing here is 
    // repeatedly checking the mapInit value of the Map Frame. When
    // mapInit is true, then the map has been loaded.
    var watch = function() {
        
        // What we are doing here is attempting to access the mapInit
        // variable of the Map frame. The reason the code is in a try-catch
        // is because chances are that this code access the DOM
        // of the map frame before its DOM has been initialized.
        try {
            var mapFrame = viewerFrame.mapFrame;
            if(mapFrame.mapInit) {
 
                // Remove the timer so this watch function stops executing
                clearInterval(timer);
                 
                // Replace the OnSelectionChanged function with our own function.
                // It is safe to do this now because the DOM for the map frame is fully initialized.
                
                // Store old function
                origOnSelectionChanged = mapFrame.OnSelectionChanged;
                // Now replace with our own.
                mapFrame.OnSelectionChanged = MySelectionHandler;
            }
        }
        catch(e) {
        }
    };
    
    // Start the "watching" process. We basically invoke the watch function 
    // every 200ms until the map has been loaded.
    timer = setInterval(watch, 200);
};
</script>

when you make a selection on the map, the code will display a dialog showing how many features were selected.

Note: Our custom handler executes when a selection has changed. So clearing the selection, for example will also call the handler even though we haven't actually made a selection.

Note: See TracWiki for help on using the wiki.