Grouping of layer with GeoServer and OpenLayers

Question

I need help to display layers group/non group 1. with checkbox to select layer or group 2. icon/symbol for each layer.

I saw example codes from OpenLayers where it's adding the layers statically. I would like to populate it dynamically so in future if a layer is added/remove it will be displayed without changing any code.

Sample layout of what I want to achieve is posted below, please note that checkboxes are displayed as dots.

Groping of Layer

• Layer

• • School
  • Road
  • • Metal Road
    • Unmetal Road
  • Parecls
  • Water Feature
  • Cities
  • Disulict
  • India

Answer 1

I do this using JQuery, not the Openlayers Layer Selector

Basically:

1. create a set of check boxes in Jquery based on your dynamic table, xml, json, wherever you get it from
2. Add a onclick handler to each check box that calls the openlayers function to create and display the layer. Keep Track of the displayed layer status with a Boolean variable so you can use it as a toggle

Here is an example of the layer toggling functions (Make sure you declare the variable bathy with the right scope, ie: toy can access it from the onclick event on the check boxes)

    function showBathy() {


            //========================================================================
            // ==  Setup and Add Bathy Layer
            //========================================================================

                    bathy = new OpenLayers.Layer.WMS(
                        "Bathymetric", 
                        urlArray,
                            {
                                LAYERS: 'bathy',
                                STYLES: '',
                                format: format,
                                gutter: gutter,
                                transparent:true,
                                tiled: tiled,
                                tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                            },
                            {
                                buffer: buffer,
                                displayOutsideMaxExtent: true,
                                isBaseLayer: false,
                                singleTile: singleTile,
                                ratio: 1,
                                transitionEffect: transitioneffect,
                                displayInLayerSwitcher:true,
                                yx : {'EPSG:4326' : true},
                        eventListeners: {
                                "loadstart": layerLoadStart,
                                "loadend": layerLoadEnd
                                }


                            }
                    );



                    map.addLayers([bathy]);


    }
    function hideBathy() {


                             map.removeLayer(bathy,false);
    }