Build the Layer Tree Manually

[geographika]

Currently all layers are displayed in the layer tree. Ideally it would be possible to construct the layer tree manually, specifying layer order and folders / sub-folders as required.

In the original MapView GeoExt layer loaders were originally used to load different categories of layers. In the end the application required fine tuning so the tree was created in code using syntax such as:

{
    text: "Road Layers",
    expanded: true,
    children: [
        this.createParameterLayer("RoadSchedule"),
        this.getSingleLayerConfig("RoadScheduleJunctions"),
        this.getSingleLayerConfig("RoadClasses"),
        this.getSingleLayerConfig("TIIRoadNetwork")
    ]
},

Layers were "found" using their WFS/WMS server name rather than text as the latter was more likely to change.

In the initial prototype it would be useful to have a "Base Layers" folder and a "Layers" folder.

[geographika]

Looks like an approach similar to the following would work:

1. Override the makeLayerStore function in LayerTree.js
2. Get the layers in the map and build a Ext.data.TreeStore (see https://docs.sencha.com/extjs/6.0.2/classic/Ext.tree.Panel.html - with nodes/children added as in ExtJS4)
3. Apply any relevant node properties from the layer config (text, qtip etc.) these are applied to the https://docs.sencha.com/extjs/6.0.2/classic/Ext.data.NodeInterface.html

See also https://geoext.github.io/geoext3/master/docs/#!/api/GeoExt.data.store.LayersTree

[geographika]

As discussed earlier - something along the following would be good to implement:

• 2 folders in the prototype, one with base layers, and one with other the overlays
• ability to apply properties from the default.json config file to the relevant NodeInterface (qtip / iconCls)

The approach would likely be coded - creating nodes and children programatically similar to the ExtJS example below. Trying to dynamically create an entire tree directly from the config file would likely be too complex and still prone to missing future custom requirements.

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: 'detention', leaf: true },
            { text: 'homework', expanded: true, children: [
                { text: 'book report', leaf: true },
                { text: 'algebra', leaf: true}
            ] },
            { text: 'buy lottery tickets', leaf: true }
        ]
    }
});