The Legend widget

The LegendWidget is a widget that draws a list of symbols and names representing the configured styles for all the visible layers. In de simplevectors application there are 3 vector-layers. Let us for example concentrate on the "countries"-layer. This layer has in it's XML configuration, 2 styledefinitions. The first style, called "South Africa", has a formula "(GMI_CNTRY like ZAF)", while the second has no formula.

While fetching data (panning or zooming around the map), geomajas checks for each feature, what style it should have. If more then one style-definition exists, it validates them one-by-one using the formula from the configuration. If no formula is given, the validation always returns true. So in the example beneath, we have 2 styles, of which the first has a formula, filtering out South Africa (the GMI_CNTRY is a column in the shape's DBF file, and "ZAF" is the code for South Africa). All other countries will be given the second style.

<styleDefs>
    <styleDef id="1">
        <name>South Africa</name>
        <formula>(GMI_CNTRY like ZAF)</formula>
        <style>
            <fillColor>#33BB77</fillColor>
            <fillOpacity>0.6</fillOpacity>
            <strokeColor>#339977</strokeColor>
            <strokeOpacity>1</strokeOpacity>
            <strokeWidth>2</strokeWidth>
        </style>
    </styleDef>
    <styleDef id="2">
        <name>Countries</name>
        <formula></formula>
        <style>
            <fillColor>#66BB33</fillColor>
            <fillOpacity>0.6</fillOpacity>
            <strokeColor>#668833</strokeColor>
            <strokeOpacity>1</strokeOpacity>
            <strokeWidth>2</strokeWidth>
        </style>
    </styleDef>
</styleDefs>

Let us now have a look at the HTML code (see online here). We have added a geomajas.widget.LegendWidget by the name of "mainLegend", analogous to previous widget additions.

<div style="width: 100%; margin: 0px; padding: 0px;">
    <div id="toolio-the-toolbar" dojoType="geomajas.widget.DynamicToolbar"
        style="padding: 0px; width:600px; height:25px; border: 1px solid #999;
        position:absolute; left:50px; top:50px;">
    </div>
    <div id="mainMap" dojoType="geomajas.widget.MapWidget"
        style="width:600px; height:400px; border: 1px solid #999;
        position:absolute; left:50px; top:76px;">
    </div>
    <div id="mainLayerTree" dojoType="geomajas.widget.LayerTree"
        style="width:250px; height:200px; border: 1px solid #999;
        position:absolute; left:675px; top:50px;">
    </div>
    <div id="mainLegend" dojoType="geomajas.widget.LegendWidget"
        style="width:250px; height:200px; border: 1px solid #999;
        position:absolute; left:675px; top:275px;">
    </div>
</div>

But there is a difference in initializing the LegendWidget. The legend does not have a server side XML file. This is because it only needs 1 thing, and that is a pointer to the MapWidget's MapModel object. The MapModel is just as the name suggests the model behind a map. It contains the Layer objects shown on the map. The legend needs this MapModel, because it needs the style definitions from the layers that are stored in this MapModel.

Remember when we configured a Toolbar on the client in the second chapter? Now we have to do something similar. The map's MapModel is only initialized after the configuration step. This means that again we have to attach a function to the end of the ConfigManager's "onConfigDone" function. We call the attached function "postConfiguration". The code for initializing the legend is very simple: we get the MapWidget and the LegendWidget, and the the map's MapModel on the legend.

dojo.addOnLoad(function() {
    globals["applicationUrl"] = "simplevectors"; // Name of the application

    // Get the map through configuration:

    // Client-server communication through commands.
    globals["dispatcher"] = new CommandDispatcher (); 

    // Interpreter for the XML configurations
    var configManager = new ConfigManager (globals["dispatcher"]); 

    // Connect a function after configuration is done.
    dojo.connect (configManager, "onConfigDone", postConfiguration); 

    // Fetch the configuration for application "helloworld".
    configManager.getConfigWithJson();
});

function postConfiguration () {
    var legend = dijit.byId("mainLegend");
    var mapWidget = dijit.byId("mainMap");
    legend.setMapModel(mapWidget.getMapModel());
}

An example of the Legend is shown below, note that the first 2 styles belong to the countries layer. The order in which the styles for the layers are shown, is determined in the map configuration (maps.xml), in the MapConfig tag.