Examples are worth many words

Please see the LayerTree examples: http://demo.mapfish.org/trunk/examples/tree/

Widget standouts

There is two ways of generating the LayerTree content:

• Automagically generated LayerTree content
• Model based LayerTree content

Automagically generated LayerTree content

The LayerTree widget is able to auto generate its content, based on the existing OpenLayers map layers. In order to do so, a LayerTree widget has to be declared and rendered, with the model option omitted:

var tree = new mapfish.widgets.LayerTree({
    map: map,
    el: 'myDiv',
    // no 'model' option makes the content auto-generated
    showWmsLegend: true
});
tree.render();

The above code has to be put after the OpenLayers.Map instanciation.

Available options

• showWmsLegend: if true, and if multiple WMS layers are defined in the OpenLayers layer settings, these are shown the tree as sublayers of the OpenLayers layer. This option is only available when layertree content is auto-generated.
• separator: When using WMS sublayers, the default separator is colon (":") to separate the WMS layer name from the sublayer name. If you already have colons in your WMS layer or sublayer names, this can be an issue. Using "|" can be a reasonable alternative.

Model based LayerTree content

For a more fancy tree layout, a tree model has to be created in order to define the tree structure.

Let's create a model:

var model = [
    {
        text: 'Background layers',
        expanded: true,
        children: [
            {
                text: 'OpenLayers WMS',
                icon: 'http://www.openlayers.org/favicon.ico',
                layerName: 'OpenLayers WMS',
                checked: true
            },
            {
                text: 'OpenAerialMap WMS',
                layerName: 'OpenAerialMap',
                checked: false
            }
        ]
    },
    {
        text: 'Overlay layers',
        checked: false,
        children: [
            {
                text: 'OpenStreetMap WMS',
                icon: 'http://www.openstreetmap.org/favicon.ico',
                layerName: 'OpenStreetMap',
                checked: false
            }
        ]         
    }    
];

Do not forget to change your LayerTree declaration in order to specify the model to be used:

var tree = new mapfish.widgets.LayerTree({
    map: map,
    el: 'myDiv',
    model: model
});
tree.render();

Model structure outline

The model structure is an array containing anonymous objects hierarchy. Each object is a treenode, representing a layer, layer group, or layer legend item, depending on its properties.

Usual model properties

• string layerName
  • the existing OpenLayers.Map OpenLayers.Layer name
  • in case of an OpenLayer.Layer.WMS layer with multiple WMS layers set, the WMS layers can be pointed individually, example:

    layerName 'OpenLayers WMS:basic'
    

• string text
  • node text to be displayed
• bool checked
  • optional: if existing, a checkbox will be shown
• string icon (optional)
  • icon, can be either a local path or an external url
• bool expanded (optional)
  • if true, the tree with be initialized showing the node in an expanded state, showing its children