[GIS] Toggling feature visibility in Openlayers + GeoExt

geoextjavascriptopenlayers-2wfs

I'm setting up a small web mapping application using PostGIS + mod_tile + FeatureServer + OpenLayers + GeoExt, each of which I'm learning as I go. In addition to the base layer, I've pulled in a few vector layers from FeatureServer, each with many features. For example, a request to my "states" layers returns a GeoJSON feature for each state, and "Congressional districts" returns a feature for each Congressional District. I can render these layers to the map and toggle them in their entirety in a GeoEXT layer tree.

What I'd like to do (seems) straightforward: For each layer, display a grouped list of all features in a layer tree with checkboxes to toggle the visibility/rendering of each feature, individually. I'm struggling to find a straightforward way to do this.

There was a question on the GeoEXT mailing list that included code to set the renderIntent to 'delete' on uncheck:

var layerList = new GeoExt.tree.LayerNode({
    text: 'The United States',
    expanded: true,
    layer: usa, // refers to a vector layer using HTTP protocol to get GeoJSON. 
    leaf: false,
    children : [{
        text: "Alabama",
        leaf: true,
        fid:1,
        checked: false
    },{
        text: "Alaska",
        leaf: true,
        fid:2,
        checked: false
    }, {
    //...  load other fifty states
    }]
});

var layerTree = new Ext.tree.TreePanel({
    title: 'Map Layers',
    root: layerList,
    autoScroll:true,
    listeners: {
        'checkchange': function(node, checked){
            var tempfid = node.attributes.fid;
            if(checked){
                node.parentNode.attributes.layer.getFeatureByFid(tempfid).renderIntent = 'default'; 
                // I am setting visibility with renderIntent because styles are reset when layer is redrawn form panning or zooming.
                node.parentNode.attributes.layer.redraw();
            }else{
                node.parentNode.attributes.layer.getFeatureByFid(tempfid).renderIntent = 'delete';
                node.parentNode.attributes.layer.redraw();
            }
        }
    }
});

I'm thinking there's a better way to do this (perhaps with Strategy.Filter?), but can't seem to wrap my head around it. Could someone point me in the right direction and/or to some examples that include this functionality? Thanks in advance for your help!

Best Answer

This might help you

    //create a  TreeNode
    var treeNode = new Ext.tree.TreeNode({
                text: "Treenode",
                expanded:true,
                bodyStyle: 'background-color:#A4A4A4;'
            });
//Append grouped overlays in the TreeNode
treeNode.appendChild(new GeoExt.tree.OverlayLayerContainer({
            text: "Overlay",
            map: map,
            expanded:true,
            loader: {

                        filter: function(record) {
                            return record.get("layer").name.indexOf("area")!== -1;
                        } 

                    }
        }));

if there are two area layers with name : Market area & Ag. area. The area layers should be appear inside the "Overlay" tree.

Related Question