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

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

}); 
  • 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 '18 at 11:10
  • No idea I'm afraid, I copied that line from your code – Ian Turton Jun 26 '18 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 '18 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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