Problem with getGetFeatureInfoUrl

[elcaiaimar]

Hello, first I put my code:

 

html:

<span style="width:900px; height:500px" id="map"> <span id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <span id="popup-content"></span> </span> </span>

 

JS:

button.addEventListener('click', function(e) { map.on('click', function(evt) { document.getElementById('popup-content').innerHTML = ''; var coordinate = evt.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url = pozos_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'});

 

var url1 = manzanas_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay.setPosition(coordinate); if (url) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url + '"></iframe>'; }

 

if (url1) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url1 + '"></iframe>'; } container.style.display = 'block'; }) });

 

In this moment, with this code, I obtain information only about one var (url or url1). Url have information about wells and url1 about flats. In my html page I have a map with openlayers and when I click on wells I get its information but when I click on flats I dont obtain anything.

 

I think the problem is in the if, I would have to difference them with some argument, but I don't know what

 

would anybody know how could I solve this? If we need more information, please, tell me

 

Thank you very much!

[justsomeguy]

I'm not too sure what your code is doing. You have a button, and when you click on that button then you add click event listeners to the map. So you don't want those click event listeners on the map until you click the other button to add them? If that click that button more than once, it's going to add multiple click listeners to the map.And then after they click on the map, you get 2 URLs and, if the first one returned something, then you set the iframe to that URL. If the second URL returned something, regardless of what happened with the first URL, then you set the iframe to the second URL. Why set the iframe to the first URL if you're going to change it to the second one?

[elcaiaimar]

Hello justsomeguy!

 

Well, I have a button inside of my map, and when I click him, I active my function. This is that when I click in my map, I get information. You can see this: http://openlayers.org/en/v3.0.0/examples/getfeatureinfo-tile.html. (Here, you don't have any button to activate getfeatureinfo)

 

In my case, when I click on the map, I get a popup with the information. But now, I have two layers (with different information).

As you can see in my code or in the example code, var url only have information about one layer (bold words):

 

EXAMPLE:

 

var url = wmsSource.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857',{'INFO_FORMAT': 'text/html'});

 

MY CODE:

var url = pozos_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'});

 

Now, I'm looking for that when I click on one layer (wells) on my map, I get information about this layer, and when I click on the other layer (buildings), I obtain information about this one.

 

I've added var url1 because it has information about manzanas_src (buildings) and I've tried with if (url1)...to obtain it, but It doesn't works, I continue obtaining information about only one layer. I'm sure is not a good way, I'm novice in JS yet.

 

You will have seen that the information go through popup-content. May be I would have to do a popup-content1 for the new information and have on the html:

 

<span style="width:900px; height:500px" id="map"> <span id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <span id="popup-content"></span>

<span id="popup-content1"></span> </span> </span>

 

But using some if with some argument. I don't know, if you know it, please tell me.

 

Thank you very much!

[justsomeguy]

I'm not familiar with OpenLayers. So is the url1 variable always empty? If so, it seems like that is the problem to solve.

[elcaiaimar]

Url1 has information (about buildings) but when I click on the buildings on my map, I get a popup without information, and it should appear.

Url has information too (about wells) and when I click on him, I obtain the correct information. But if I changed the code like that:

 

button.addEventListener('click', function(e) { map.on('click', function(evt) { document.getElementById('popup-content').innerHTML = ''; var coordinate = evt.coordinate; var viewResolution = /** @type {number} */ (view.getResolution());

var url1 = manzanas_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay.setPosition(coordinate);

if (url1) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url1 + '"></iframe>'; } container.style.display = 'block'; }) });

Now, I would obtain information about buildings, but no about wells

[elcaiaimar]

Ok, I almost got it. I have my js functions clear, but now, I need to diferenciate them from html file. In my js file I have two functions map.on('click', function(evt)that return the information with popup-content or popup-content1. Now, I want to introduce some argument in {% if %} so if the JS function returns popup-content, only shows the popup with the popup-content, and the same with popup-content1. Would anybody know how can I solve this?HTML CODE:<span style="width:900px; height:500px" id="map"> {% if %} <span id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <span id="popup-content"></span> </span> {% endif %} {% if %} <span id="popup1" class="ol-popup"> <a href="#" id="popup-closer1" class="ol-popup-closer"></a> <span id="popup-content1"></span> </span> {% endif %}</span>JS CODE:var content = document.getElementById('

popup-content');var content1 = document.getElementById('popup-content1');var closer = document.getElementById('popup-closer');var closer1 = document.getElementById('popup-closer1');button.addEventListener('click', function(e) { map.on('click', function(evt) { document.getElementById('popup-content').innerHTML = ''; var coordinate = evt.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url = pozos_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay.setPosition(coordinate); if (url) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url + '"></iframe>'; } container.style.display = 'block'; }), map.on('click', function(evt1) { document.getElementById('popup-content1').innerHTML = ''; var coordinate = evt1.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url1 = manzanas_src.getGetFeatureInfoUrl( evt1.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay1.setPosition(coordinate); if (url1) { document.getElementById('popup-content1').innerHTML = '<iframe seamless src="' + url1 + '"></iframe>'; } container1.style.display = 'block'; }) });

[justsomeguy]

Use CSS for that. Hide the elements to begin with, and if you put content in it then show it again.