Menu
I have created a map using layers I added in GeoServer.
I created GetFeatureInfoUrl function to get the attribute table when clicking on layer. But when I click on the map, all the info boxes of all the layers show up. Even if a layer (which is on top of another layer) is turned off, its attribute information comes up.
How can I make it so that only one info box shows up at a time? (So if two layers are on top of each other and user click on the map, the attribute information of the layer which is on top of the other will show up.)
One user online explained me how to do it but did not provide code. He offered the following explanation:
-loop over the layers list
-call get(“visible”) on each layer to get the visibility status set by the layer switcher
-for each visible layer, append its name to a list of visible layer names
-join the list of visible layer names into a single string containing comma-separated layer names
-pass the string of comma-separated visible layer names as an additional parameter QUERY_LAYERS in the map in the last argument of testSource.getGetFeatureInfoUrl”
How can I create this code?
HTML:
[CODE]<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<link rel=”stylesheet” href=”http://openlayers.org/en/v3.12.1/css/ol.css”>
<link rel=”stylesheet” href=”ol3-layerswitcher.css”>
<script src=”http://openlayers.org/en/v3.12.1/build/ol.js”></script>
<script src=”ol3-layerswitcher.js”></script>
</head>
<body>
<div id=”map” style=”width:100%;”></div>
<script src=”javascript4.js”></script>
<div id=”info2″></div>
<div id=”info3″></div>
</body>
</html>
JavaScript:
[CODE]var testSource2 = new ol.source.TileWMS({
url: ‘http://localhost:8080/geoserver/wms’,
params: {‘LAYERS’: ‘Marine:Great_Britain’, ‘TILED’: true},
serverType: ‘geoserver’
});
var testSource3 = new ol.source.TileWMS({
url: ‘http://localhost:8080/geoserver/wms’,
params: {‘LAYERS’: ‘Marine:Bedrock_Geology’, ‘TILED’: true},
serverType: ‘geoserver’
});
var layers = [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: ‘osm’})
}),
new ol.layer.Group({
title: ‘Layers’,
layers: [
//Implementing layers
new ol.layer.Tile({
title: ‘Great Britain’,
source: testSource2
}),
new ol.layer.Tile({
title: ‘Geology – Bedrock’,
source: testSource3
}),
]
})
];
var map = new ol.Map({
layers: layers,
target: ‘map’,
view: new ol.View({
center: [51480.6, 7216744.2], //UK
zoom: 5
})
});
//Function to get features from layer
map.on(‘singleclick’, function(evt) {
document.getElementById(‘info2’).innerHTML = ”;
viewResolution = map.getView().getResolution();
var url = testSource2.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, ‘EPSG:3857’,
{‘INFO_FORMAT’: ‘text/html’});
if (url) {
document.getElementById(‘info2’).innerHTML =
‘<iframe seamless src=”‘ + url + ‘”></iframe>’;
}
});
//Function to get features from layer
map.on(‘singleclick’, function(evt) {
document.getElementById(‘info3’).innerHTML = ”;
viewResolution = map.getView().getResolution();
var url = testSource3.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, ‘EPSG:3857’,
{‘INFO_FORMAT’: ‘text/html’});
if (url) {
document.getElementById(‘info3’).innerHTML =
‘<iframe seamless src=”‘ + url + ‘”></iframe>’;
}
});
//Layer switcher to turn layers on and off
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: ‘Legend’
});
map.addControl(layerSwitcher);