.. _geoext.layout.legend:

Create a LegendPanel
====================

Add a legend to the map is as easy as adding to the :file:`map.html` code:

.. code-block:: javascript

    var legendPanel = new GeoExt.LegendPanel({
        defaults: {
            style: 'padding:5px'
        },
        bodyStyle: 'padding:5px'
    });
    legendPanel.render(document.body);

The legend panel will not only change when you load or unload layers, but also when you change layer visibility (which you can do in our application already).

As for the `treePanel`, the last line renders the legend panel inside the body tag of the page. You can use the `renderTo` property as well.

Reload the page (which url should point to @workshop_url@/map.html) in your browser. You should see something like the following:

.. figure:: layout_legend.png

    A legend in a panel