2

I'm loading WMS layers to OpenLayers map in the following way :

Here is a JSFiddle example : http://jsfiddle.net/Alophind/9r95T/

 function LoadLayers(data) {
    jQuery.each(data, function (i, val) {
        if (val.layer != "") {
            var layer = new OpenLayers.Layer.WMS(val.name, geoserver,
                    {
                        LAYERS: val.layer,
                        STYLES: '',
                        format: format,
                        tiled: true,
                        transparent: true,
                        tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom
                    },
                    {
                        buffer: 0,
                        visibility: false,
                        displayOutsideMaxExtent: false,
                        isBaseLayer: false,
                        yx: { 'EPSG:4326': true }
                    }
                );
            arrLayers.push(layer);
        }
    });
}

and I instantiate a GeoExt tree like this :

mapPanel = Ext.create('GeoExt.panel.Map', {
        border: true,
        region: "center",
        map: map,
        layers: arrLayers
    });

    var store = Ext.create('Ext.data.TreeStore', {
        model: "GeoExt.data.LayerTreeModel",
        root: {
            expanded: true,
            children: [
                {
                    plugins: ['gx_overlaylayercontainer'],
                    expanded: true
                }
            ]
        }
    });

    tree = Ext.create('GeoExt.tree.Panel', {
        border: true,
        region: "west",
        title: "Layers",
        width: 200,
        split: true,
        store: store,
        collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        //store: store,
        rootVisible: false,
        lines: false
    });

I want to be able to put the layers in the tree as subnodes . for example :

Root
|
|-Buildings
|     |---Layer 1
|
|-Cars
|     |--- Layer 3

How can I do it ?

I've managed to add the following code manullay :

tree.getRootNode().appendChild({
            text: "Root,
            group: true,            
            children: [
                    {
                        text: "Buildings",
                        layer: "MyTest:BuildingsSHP",
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_layer"
                    },
                    {
                        "text": "Cars",
                        "layer": "MyTest:CarsSHP",
                        "leaf": true,
                        "checked": false,
                        "children": [],
                        "nodeType": "gx_layer"
                    }
                ],
            expanded: true
        });

And I do get new nodes in the tree... But when I click the check box , nothing happens (they don't show in map and not added to the legend panel)

What else am I missing ?

  • Not related to the answer, but why on earth are you using jQuery.each insted of Ext.each ? Why are you even using jQuery at all if you are using Ext. Just saying. – pakman Sep 10 '14 at 19:36
1

To create subnodes set leaf to false:

{
        text: "Root,
        group: true,            
        children: [{
                    text: Buildings,
                    leaf: false,
                    expanded: true,
                    children: [{
                        text: "Buildings Layer 1",
                        layer: "MyTest:BuildingsSHP",
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_layer"
                    }],
                },{
                    "text": "Cars",
                    "layer": "MyTest:CarsSHP",
                    "leaf": true,
                    "checked": false,
                    "children": [],
                    "nodeType": "gx_layer"
                }
            ],
        expanded: true
    }

All layers in the tree must be firsthand added to the map, before you can interact with them. The layer name must correspond to the node name in the tree.

  • The checkbox still not working. when I check nothing happen. I don't see any WMS request being sent. – Alophind Oct 10 '13 at 4:04
  • I've added JSFiddle Example – Alophind Oct 10 '13 at 5:24
  • I've managed to make the checkbox working using "oncheckchange" – Alophind Oct 25 '13 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.