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


I do this using JQuery, not the Openlayers Layer Selector


  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(
                                LAYERS: 'bathy',
                                STYLES: '',
                                format: format,
                                gutter: gutter,
                                tiled: tiled,
                                tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                                buffer: buffer,
                                displayOutsideMaxExtent: true,
                                isBaseLayer: false,
                                singleTile: singleTile,
                                ratio: 1,
                                transitionEffect: transitioneffect,
                                yx : {'EPSG:4326' : true},
                        eventListeners: {
                                "loadstart": layerLoadStart,
                                "loadend": layerLoadEnd



    function hideBathy() {


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.