Assigning OpenLayers Layers to different layer trees 'automatically'

Question

I am developing an OpenLayers 3 web application were I would like to incorporate multiple layer trees. Instead of manually adding each layer to a layer tree I would like to do it using the method below.

I have this JSFiddle set up that it has a map with multiple layers and one Layer Tree. I would like to duplicate the layer tree multiple (4) times and have a parameter (as per the one in each layer of the example) that then assigns a layer to different layer trees.

I imagine it involves an extra if statement when building the layer tree at the bottom of the code, similar to the slider option already in there, but I don't seem to be able to make it work.

The solution should also ideally remove the "all layers" group at the top of each Layer Tree.

Answer 1

When you're declaring your layers you can simply add a 'layerType' attribute from which you can later use to add and remove layers as a group.

var birmingham = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-1.900878, 51.483952], 'EPSG:4326', 'EPSG:3857')),
    name: 'Birmingham',
    layerType: 'layerOne'
});

When declaring your vector sources you can then loop through your layers and push layers into a vector source based on that defined layerType attribute.

Hope that helps.