I am trying to make a getFeatureInfo request (OL4) and display a popup with data, that come from a geoserver layer.
Initially I did this:
map.on('click', function (evt) {
var viewResolution = map.getView().getResolution();
var coord = evt.coordinate;
if (grid_layer.getVisible() && grid_layer.get('name') != 'Basemap') {
var url = grid_layer.getSource().getGetFeatureInfoUrl(coord, viewResolution, 'EPSG:3857', {
'INFO_FORMAT': 'text/html',
'FEATURE_COUNT': '2',
});
if (url) {
$("#popup").css("display", "block");
popup_overlay.setPosition(coord);
content.innerHTML = '<iframe src="' + url + '" id="id_iframe" style="border:0px #BD8D46 dotted;" scrolling="auto" frameborder="no" align="center"></iframe>';
}
}
});
I take care of the style using the *.ftl styling method on geoserver. This works more or less ok but it also creates a blank popup when I click anywhere on the map.
I checked online and I found some other solution, which I try to implement below:
map.on('click', function (evt) {
var viewResolution = map.getView().getResolution();
var coord = evt.coordinate;
if (grid_layer.getVisible() && grid_layer.get('name') != 'Basemap') {
var url = grid_layer.getSource().getGetFeatureInfoUrl(coord, viewResolution, 'EPSG:3857', {
'INFO_FORMAT': 'text/javascript',
'FEATURE_COUNT': '2',
});
if (url) {
var parser = new ol.format.GeoJSON();
console.log(parser)
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'parseResponse'
}).then(function(response) {
var result = parser.readFeatures(response);
if (result.length) {
console.log(result)
var iso3 = [];
for (var i = 0, ii = result.length; i < ii; ++i) {
iso3.push(result[i].get('iso3_all'));
}
$("#popup").css("display", "block");
popup_overlay.setPosition(coord);
content.innerHTML = iso3.join(',');
}
});
}
}
});
Although this solution seems to work initially, I can not actually select the content of my popup window. It's not selectable (not possible to copy paste it etc.)
For example in the below screenshot the text of the popup is is selectable:
I am not sure why this is happening and if its related with the CSS of the popup but I haven't changed something in relation to the first snippet. Also when I interact with the application (zoom and click), I get the following error. Maybe it somehow related.:
parseResponse is not a function