[GIS] Grouping of layer with GeoServer and OpenLayers

geoserveropenlayers-2

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

Best Answer

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);
    }
Related Question