Working With Selections

There are several components that allow the user to interactively select features on the Map. Infrastructure Map Server takes care of updating the Map image with the current selection if necessary, but does not display attributes of the selected features to the user. That is up to the application.

Regardless of how the features are selected, the Map component provides the API for an application to retrieve and work with the user's selection. There are two events that can be used by an application to know when the user selection has changed:

• MAP_SELECTION_ON. The Map component triggers this event when a new selection has been created.
• MAP_SELECTION_OFF. The Map component triggers this event when the current selection has been cleared.

When the application receives a MAP_SELECTION_ON event from the Map component, it can use the following functions to work with the selection:

• hasSelection() returns a boolean value which indicates if there is currently a selection or not.
• getSelection( callback ) retrieves the current selection. Retrieving the selection is potentially an asynchronous operation and so the callee provides a callback function that is called when the selection is ready. The callback function is passed a single argument, a Selection object, described below.
• clearSelection() is used to clear the current selection. This removes the selection from the map and invalidates the current selection object.

For an example, see Example 2: Selections

An application will typically call getSelection() in response to the MAP_SELECTION_ON event. Typical code for this might look like:

window.onload=function() {
  // ...
 
  Fusion.registerForEvent(
    Fusion.Event.FUSION_ERROR, 
    fusionError);
  Fusion.registerForEvent(
    Fusion.Event.FUSION_INITIALIZED, 
    fusionInitialized);      
  Fusion.initialize();
}
 
var theMap;
function fusionInitialized() {
  theMap = Fusion.getWidgetById('Map');
  theMap.registerForEvent(Fusion.Event.MAP_SELECTION_ON,
    OpenLayers.Function.bind(this.selectionOn, this));
  theMap.registerForEvent(Fusion.Event.MAP_SELECTION_OFF,
    OpenLayers.Function.bind(this.selectionOff, this));
}
 
function selectionOn() {
  //a new selection has been made, request it
  theMap.getSelection(displaySelection);
}
 
function displaySelection(selection) {
  //display the selection to the user in some way ...
}
 
function selectionOff() {
  //clear the selection results
}


 The parameter passed to the callback routine is an associative array that contains selections from one or more maps. In most cases, there will be one element in the array, with a selection object for the main map. This selection object provides the following API: 
 getNumLayers() returns the number of layers that have features selected. 
 getNumElements() returns the total number of features that are selected. 
 getLowerLeftCoord() returns the lower, left coordinate of the bounding box of all selected features. 
 getUpperRightCoord() returns the upper, right coordinate of the bounding box of all selected features. 
 getLayerByName( name ) gets the layer selection object for a layer from the name of the layer. This returns null if there is no layer with the requested name in the selection results. 
 getLayer( index ) gets the layer selection object for the requested layer where index is between 0 and one less than the value returned by getNumLayers(). 

An application will typically loop over the layers in a selection and retrieve individual results using the Layer Selection object returned by getLayer() or getLayerByName(). Layer selection objects have the following API: 
 getName() returns the name of the layer that the selected features are in. 
 getNumElements() returns the number of features selected in this layer. 
 getNumProperties() returns the number of data properties, or attributes, of the features in this layer. 
 getPropertyNames() returns an array of the names of each of the properties. 
 getPropertyTypes() returns an array of the types of the properties. 
 getElementValue(elementIndex, propertyIndex) returns the actual value of a given property for a given element. 

The following code is an example of how to use the Selection and Layer Selection objects to create a tabular display of selected features. 
function displaySelection(multiSelection) {
  var theMap = Fusion.getWidgetById("Map");
  if (!theMap.hasSelection())
  {
    alert("Nothing selected");
    return;
  }
  var selection = multiSelection[theMap.getMapName()];
 
  //display the selection to the user in some way ...
  //make sure something got selected ...
  if (selection && selection.getNumLayers() > 0) 
  {
    //obtain a reference to the HTML Element that the results
    //will be placed in
    var resultElm = $('selectionResultDiv');
    resultElm.innerHTML = '';
    for (var i=0; i<selection.getNumLayers(); i++) {
      var selectionLayer = selection.getLayer(i);
      var propNames = selectionLayer.getPropertyNames();
      var span = document.createElement('span');
      span.className = 'selectionResultsTitle';
      span.innerHTML = 'Layer ' + selectionLayer.getName();
      resultElm.appendChild(span);
      var table = document.createElement('table');
      table.className = 'selectionResultsTable';
      resultElm.appendChild(table);
      //set up the table header to be the property names
      var thead = document.createElement('thead');
      table.appendChild(thead);
      var tr = document.createElement('tr');
      thead.appendChild(tr);
      for (var j=0; j<propNames.length; j++) {
        var td = document.createElement('td');
        td.innerHTML = propNames[j];
        tr.appendChild(td);
      }
      //output the selection values
      var tbody = document.createElement('tbody');
      table.appendChild(tbody);
      for (var j=0; j<selectionLayer.getNumElements(); j++) {
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (var k=0; k<propNames.length; k++) {
          var td = document.createElement('td');
          td.innerHTML = selectionLayer.getElementValue(j, k);
          tr.appendChild(td);
        }
      }
    }
  } else {
    //could display a message of some sort saying nothing was
    //selected
  }
}