Closed kesslerf closed 4 years ago
Hi, can you please post your group layer definition?
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.
Setting the groupSelectStyle
option to none
might be what you are after?
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);
})();
I think the problem is you declared groupSelectStyle: 'none' in the sidebar, not in the layerswitcher
Can you tell me where to put it exactly? I really do not know :(
The static renderPanel method accepts a 3rd options argument. Try changing your call to:
ol.control.LayerSwitcher.renderPanel(map, toc, {groupSelectStyle: 'none'});
Thank you very much!
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