0

I am trying to develop a web mapping application. I have more than two WMS layers and trying to GetFeatureInfo onclick the layer. I tried the answer posted on this link. But whenever I click on one layer three popups are displayed in spite of clicking only on one layer. I am stuck on how to resolve the issue.

Below is the code am working on:

    map.on('singleclick', function (evt1) {
    var coordinate = evt1.coordinate;
    content.innerHTML = '';
    var viewResolution =(view.getResolution());
    var url = '';
    content.innerHTML = ''; 
    layers.forEach(function (layer, i, layers) {
      if (layer.getVisible() && layer.get('name')!='Basemap') {
            url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
                'INFO_FORMAT': 'text/html','FEATURE_COUNT': '300', 'WIDTH':500, 'HEIGHT':500,
            });

            if (url) {
              var left_f = "left_frame";
              content.innerHTML += '<p><b>You clicked here:</b></p><iframe class="'+left_f+'" seamless src="' + url +
                    '"></iframe>';
                overlay.setPosition(coordinate);
            }else{
                        content.innerHTML = '';
            }
        }
    });

});

Query:

GetFeatureInfo with a popup on click single layer or multiple layers. Is there any other way to solve this query?

I am new with OpenLayers and have basics of JavaScript. Below screenshots of output are attached.

Result1 Result2

1 Answer 1

1

You are looping through your layers and making a getFeatureInfo request for each one, which is why you see 3 popups. Instead you should make one getFeatureInfo request for the 3 layers.

ql = []
layers.forEach(function (layer, i, layers) {
  if (layer.getVisible() && layer.get('name')!='Basemap') {
     ql.append(layer.get('name');  

  }
  url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
            'INFO_FORMAT': 'text/html',
            'FEATURE_COUNT': '300', 
            'QUERYLAYERS':ql.join(',')
        });
 //Fetch info
 var left_f = "left_frame";
          content.innerHTML += '<p><b>You clicked here:</b></p><iframe class="'+left_f+'" seamless src="' + url +
                '"></iframe>';
            overlay.setPosition(coordinate);

}); 
3
  • I have gone through your answer, but it doesn't work. Not able to sort out the problem as am getting type error on 'layer.getSource().getGetFeatureInfoUrl', might be append function is not working. How can solve the issue?: @IanTurton
    – Shreya
    Jun 26, 2018 at 11:10
  • No idea I'm afraid, I copied that line from your code
    – Ian Turton
    Jun 26, 2018 at 11:29
  • My code is working well since I updated the code, referred from your answer am getting an error. What actually append function will do, and what response "url" will get from that.
    – Shreya
    Jun 27, 2018 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.