CODEWITHSUNDEEP
javascriptopenlayersgeoserver
OliBoi
OliBoi

Reputation: 49

Multiple info boxes showing up when I click on map (GeoServer layers)

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:

How can I create this code?

HTML:

<!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:

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);

Upvotes: 0

Views: 637

Answers (1)

Werner Raath
Werner Raath

Reputation: 1492

I believe the issue lies that you do not check in your map.on('singleclick') for what layer is being clicked on. Create a single map.on('singleclick') handler, since your code in both listeners are exactly the same.

map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
    var source = layer.getSource();        
   ...
});

Now you will get the source for the layer that you have clicked on and be able to use that with your mentioned code.

Upvotes: 0

Related Questions