Building a layer tree

If you look up the examples for this chapter, you will see some files with the ch03_layertree prefix. These files contain the first example. In this example, we will build the base of our layer tree and add the two layers from the previous example to it. First, take a look at the HTML file. We only add one single div element to the map, which we will dynamically fill with content:

    [...]
    <div id="layertree" class="layertree"></div>
    <div id="map" class="map">
    [...]

Styling the layer tree

In the next step, we will style the content of the layer tree with CSS. If you look at the CSS file for the example, you can see that there are quite a lot declarations in it. First, we will create some rules for the whole element:

.layertree {
    width: 20%;
    height: calc(100% - 3.5em);
    float: left;
    [...]
}

Tip

In spite of not showing the full HTML and CSS code here, in order to preserve valuable space,...