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;
    [...]
}

We float the layer tree to the left-hand side of our map as expected from the GIS software. Next, we style the containers and layer elements:

.layertree .layertree-buttons {
    height: 2em;
    border-bottom: 1px solid grey;
}
.layertree .layercontainer {
    position: relative;
    height: calc(100% - 2em);
    overflow-y: auto;
}
.layercontainer .layer {
    position: relative;
    height: 2em;
    [...]
}
.layer span:first-of-type {
    position: absolute;
    left: 1.5em;
    max-width: calc(100% - 1.5em);
    [...]
}

We position the button and layer containers, respectively, give them height values for overflow to work, and go on to the layer elements. The first span in the element will be the layer's name. We give it the absolute position so that later on, the visibility check box can be positioned before it. Finally, we borrow OpenLayers 3's ol-unselectable class for our cause.

To make the whole layer management logic clear and reusable, we choose an API-like solution. We create a layer tree object with a constructor and leave every operation to it using the object methods. This way, we only have to provide a reference to our map object, id of the layer tree element, and id of the message bar element. Everything else will be handled by our object automatically:

var layerTree = function(options) {
    'use strict';
    if(!(this instanceof layerTree)) {
        throw new Error('layerTree must be constructed with the new keyword.');
    } else if (typeof options === 'object' && options.map && options.target) {
        if (!(options.map instanceof ol.Map)) {
            throw new Error('Please provide a valid OpenLayers 3 map object.');
        }
        this.map = options.map;
        var containerDiv = document.getElementById(options.target);
        if (containerDiv === null || containerDiv.nodeType !== 1) {
            throw new Error('Please provide a valid element id.');
        }
        this.messages = document.getElementById(options.messages) ||
                                   document.createElement('span');

In the first part of the code, we process the parameters that are provided by the user. The parameters are expected to be wrapped in an object with property names, such as map, target, and messages. As you can see, we are using two methods to validate the user input. If an essential parameter is missing or the constructor is called a simple function, we throw a user-friendly error, while in other cases, we just use a predefined value.

Next, we create the container elements and add them to the target element:

        var controlDiv = document.createElement('div');
        controlDiv.className = 'layertree-buttons';
        containerDiv.appendChild(controlDiv);
        this.layerContainer = document.createElement('div');
        this.layerContainer.className = 'layercontainer';
        containerDiv.appendChild(this.layerContainer);

Now that the environment is set up, we can proceed to add layers to the layer tree. For this task, we create a function that expects a layer object as input and creates a registry based on the layer properties:

        var idCounter = 0;
        this.createRegistry = function(layer) {
            layer.set('id', 'layer_' + idCounter);
            idCounter += 1;
            var layerDiv = document.createElement('div');
            layerDiv.className = 'layer ol-unselectable';
            layerDiv.title = layer.get('name') || 'Unnamed Layer';
            layerDiv.id = layer.get('id');
            var layerSpan = document.createElement('span');
            layerSpan.textContent = layerDiv.title;
            layerDiv.appendChild(layerSpan);
            this.layerContainer.insertBefore(layerDiv, this.layerContainer.firstChild);
            return this;
        };

There is one big consideration we have to make here: how do we link the layers to the appropriate layer tree elements? To overcome this problem, we use quite a secure method by creating a private idCounter member and a privileged createRegistry method, which can access this variable. We call it createRegistry as it creates a registry inside our layer tree; therefore, this name refers to our code's architectural design. This way, the code can only be broken if someone (or something) changes the id property of the layer object. We create the layer element, add the unique ID to it, and insert it on top of the layer stack, visually representing the order of the layers.

Finally, we close our constructor by throwing an error if the input is not an object or any of the parameters are missing:

    } else {
        throw new Error('Invalid parameter(s) provided.');
    }
};

There's only one thing left to do: instantiate the layer tree in the init function, and add the layers to the layer tree via its createRegistry method. We also have to add a name parameter to our layers as the method will try to use it to display the layer's name. As we created the constructor function and the chainable method earlier, we can execute the whole process in one call:

var tree = new layerTree({map: map, target: 'layertree', messages: 'messageBar'})
    .createRegistry(map.getLayers().item(0))
    .createRegistry(map.getLayers().item(1));

As layers are wrapped in an ol.Collection object in OpenLayers 3, we can call them with the item method one by one. If you save the whole code and open it in a browser, you will see our layer tree up and running in the way that we have designed it: