Adding a LayerTree

We will now show you how to add another geomajas widget, called LayerTree, to the mix. The layertree is a widget meant for controlling layers. While a toolbar has buttons to control a MapWidget, the buttons on a LayerTree are usually specific for individual layers. The layertree allows for the selection of a layer, after which you can for example toggle it's visibility or it's labels. The HTML code is again very similar to what we have seen before (see online here):

<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>

    <!-- And now the LayerTree: -->
    <div id="mainLayerTree" dojoType="geomajas.widget.LayerTree"
        style="width:250px; height:200px; position:absolute; left:675px;
        top:50px;">
    </div>
</div>

This will create a page with a toolbar, a map and a layertree. As for the configuration of the layertree, we have to check the XML configuration files again. In this case a file called "layerTree.xml".

<layerTree id="mainLayerTree">
    <targetMap>mainMap</targetMap>
    <toolRef>LayerVisibleTool</toolRef>
    <toolRef>LayerLabeledTool</toolRef>
</layerTree>

You may have noticed that the configuration of a layertree is almost identical to that of a toolbar. It has an ID, which refers to the layertree widget ID in the HTML page, and it has a reference to a MapWidget ("mainMap"). The references to the 2 configured tools can again be found in the tools.xml file. The first is a selection button which toggles the selected layer's visibility, and the second is a toggle button for the labels of the selected layer. Note that only vectorial layers can have labels.