How To Customize Legend widget

Introduction

This HowTo describes how customize the Legend widget for display the groups/layers the way you want. In this HowTo, we'll see what are the two possible methods to customize this widget and make a example for each. It's basicly the same pattern as the SelectionPanel widget.

First method: customize by defining a function

This allow you to create a javascript function that will be executed on MAP_LOADED/MAP_RELOADED events. In this function, you can access to the groups/layers via the this.layerRoot property.

Example

1. Create the javascript function implementation

   function VerySimpleLegend() {
       var div = this.oLegend.domObj;
   
       for (var i=0; i< this.layerRoot.groups.length; i++) {
           var currentGroup = this.layerRoot.groups[i].groups;
          
           for (var j=0; j< currentGroup.length; j++) {
               var group = document.createElement('h2'); 
               group.innerHTML = currentGroup[j].groupName;
               div.appendChild(group);
          
               for (var k=0; k<currentGroup[j].layers.length; k++) {
                   var span = document.createElement('span');
                   span.style.paddingLeft = "10px";
                   span.innerHTML = currentGroup[j].layers[k].layerName;
                   div.appendChild(span);
               }
           }
       }
   }
   

This example will only produce a list of all groups with its layers.

2. Configuration needs in the ApplicationDefinition.xml

   <Widget xsi:type="WidgetType">
     <Name>maplayersTab</Name>
     <Type>Legend</Type>
     <StatusItem/>
     <Extension xsi:type="CustomContentType">
       <LegendRenderer>VerySimpleLegend</LegendRenderer>
     </Extension>
   </Widget>
   

Second method: customize by creating a renderer class

This method let you define a special behavior for the Legend. It can be a little bit more complicated than the first one but it can be very useful for those who have to make a complex behavior. It also keep a structured application using the Object Oriented programming.

Basicly, creating a renderer class is not very complicated. You'll have to create a class that inherit from the Fusion.Widget.Legend.LegendRenderer and implement these five functions: initialize, renderLegend, mapLoaded, mapReloaded, mapLoading. The first function is for initialize the base class and initialize all specific properties of your renderer (creating div, button, image, adding CSS, etc.). The second is the main function that will draw the legend. The last three functions are only for handle the events and do specific actions. (Fusion.Event.MAP_LOADED, Fusion.Event.MAP_RELOADED, Fusion.Event.MAP_LOADING).

Example 1: simple renderer

Fusion.Widget.Legend.VerySimpleLegend = OpenLayers.Class(Fusion.Widget.Legend.LegendRenderer,  
{
    initialize : function(legend, widgetTag) {   
        Fusion.Widget.Legend.LegendRenderer.prototype.initialize.apply(this, [legend]);    
    },
    
    mapLoaded: function() {
        this.renderLegend();
    },
    
    mapReloaded: function() {
        this.renderLegend();
    },
    
    renderLegend: function() {
        var div = this.oLegend.domObj;
        div.innerHTML = "";
        for (var i=0; i< this.layerRoot.groups.length; i++) {
            var currentGroup = this.layerRoot.groups[i].groups;
            for (var j=0; j< currentGroup.length; j++) {
                var group = document.createElement('h2'); 
                group.innerHTML = currentGroup[j].groupName;
                div.appendChild(group);
                for (var k=0; k<currentGroup[j].layers.length; k++) {
                    var span = document.createElement('span');
                    span.style.paddingLeft = "10px";
                    span.innerHTML = currentGroup[j].layers[k].layerName;
                    div.appendChild(span);
                    // do something more complex.... produce table, bind events etc... 
                }
            }
        }
    }
});

Note that i haven't implemented the mapLoading function. This renderer just doesn't need to handle this event.

2. Configuration needs in the ApplicationDefinition.xml

<Widget xsi:type="WidgetType">
  <Name>maplayersTab</Name>
  <Type>Legend</Type>
  <StatusItem/>
    <Extension xsi:type="CustomContentType">
      <LegendRenderer>Fusion.Widget.Legend.VerySimpleLegend</LegendRenderer>
    </Extension>
</Widget>