Get rid of Checkbox in front of Group Layer

[kesslerf]

Hey Guys I am trying to use the layerswitcher on the sidebar and so far everything is working great. But there is this ugly little checkbox in front of Data which I did not manage to remove.

Can someone help me out? I tried to inspect etc. but I did not get a solution.

This is my current end of the Map.js file, where I probably have to change something?

var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left'}); var toc = document.getElementById("layers"); ol.control.LayerSwitcher.renderPanel(map, toc); map.addControl(sidebar);

Thanks, Felix

[swalterfub]

Hi, can you please post your group layer definition?

[kesslerf]

new ol.layer.Group({
                // A layer must have a title to appear in the layerswitcher
                title: 'Data',
                // Adding a 'fold' property set to either 'open' or 'close' makes the group layer
                // collapsible
                fold: 'open',
                layers: [
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Baden-Württemberg",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:baden_wuertemberg_maske"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Hessen",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:hessen2019"
                                }

This are the first two layers, the other ones are added the same way.

[walkermatt]

Setting the groupSelectStyle option to none might be what you are after?

[kesslerf]

Unfortunately it did not help/change anything. Maybe I added it at the wrong position?

Here is my full code:

var center_start = [495445, 5715029];
var zoom_start = 8;

var projection25832 = new ol.proj.Projection({
    code: 'EPSG:25832',
        // The extent is used to determine zoom level 0. Recommended values for a
        // projection's validity extent can be found at https://epsg.io/.
    extent: [-1877994.66, 3932281.56, 1836715.13, 9440581.95],
    units: 'm'
}); 

(function() {
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Group({
                // A layer must have a title to appear in the layerswitcher
                'title': 'Basemaps',
                combine: false,
                layers: [
                            new ol.layer.Tile({
                                title: "Topo+",
                                'type': 'base',
                                visible: false,
                                source: new ol.source.TileWMS({
                                    url:"https://sgx.geodatenzentrum.de/wms_topplus_open?",
                                    params:{
                                        'LAYERS': "p25",
                                        'TILED': false
                                            }
                                        })
                                }),
                            new ol.layer.Tile({
                                title: 'OSM (grau)',
                                'type': 'base',
                                visible: true,
                                source: new ol.source.TileWMS({
                                    url: 'https://ows.terrestris.de/osm-gray/service?',
                                        params: {
                                           'LAYERS': "OSM-WMS",
                                           'VERSION': '1.1.0',
                                            'FORMAT': 'image/png',
                                            'TILED': false
                                            }
                                            })
                                        })
                ]
            })

            ,
            new ol.layer.Group({
                // A layer must have a title to appear in the layerswitcher
                title: 'Data',
                // Adding a 'fold' property set to either 'open' or 'close' makes the group layer
                // collapsible
                groupSelectStyle: 'none',
                layers: [
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Baden-Württemberg",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:baden_wuertemberg_maske"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Hessen",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:hessen2019"
                                }

                        })
                    }),                    
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Niedersachsen",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:niedersachsen2019"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Nordrhein-Westfalen",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:nordrhein_westpfahlen2019"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Rheinland-Pfalz",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:rheinland_pfalz2019"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Saarland",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:saarland2019"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Sachsen",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:sachsen2019"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Sachsen-Anhalt",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:sachsen_anhalt2019"
                                }

                        })
                    }),
                    new ol.layer.Tile({
                        // A layer must have a title to appear in the layerswitcher
                        title: "Thüringen",
                        zIndex: 2,
                        visible: false,
                        source: new ol.source.TileWMS({
                            url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                                params: {
                                    'LAYERS': "forestwatch:thueringen2019"
                                }

                        })
                    })
                        ]
                    })
                ]
            ,
    view: new ol.View({
        projection: projection25832,
        center: center_start,
        zoom: zoom_start
        })
    });

    // Get out-of-the-map div element with the ID "layers" and renders layers to it.
    // NOTE: If the layers are changed outside of the layer switcher then you
    // will need to call ol.control.LayerSwitcher.renderPanel again to refesh
    // the layer tree. Style the tree via CSS.
    var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left', groupSelectStyle: 'none'});
    var toc = document.getElementById("layers");
    ol.control.LayerSwitcher.renderPanel(map, toc);
    map.addControl(sidebar);

})();

[umbe1987]

I think the problem is you declared groupSelectStyle: 'none' in the sidebar, not in the layerswitcher

[kesslerf]

Can you tell me where to put it exactly? I really do not know :(

[walkermatt]

The static renderPanel method accepts a 3rd options argument. Try changing your call to:

ol.control.LayerSwitcher.renderPanel(map, toc, {groupSelectStyle: 'none'});

[kesslerf]

Thank you very much!