I am trying to make a GetFeatureInfo request with WMS on Open Layers to Geoserver. The request appears to be made and loads on every click as expected but the "image" crashes every time. The request is made through a Proxy on my own computer which appears to be working well. Here is an image of the events and the code I have been using. As i am quite inexperienced with all components of this any help would be appreciated. Thank you guys.
The script :
<script>
var layers = [];
layers[0] = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/AL2/wms?',
params: { LAYERS: 'AL2:A2', 'TILED': true, projection: 'EPSG:4326', VERSION: '1.1.1' },
servertype: 'geoserver'
})
});
layers[1] = new ol.layer.Tile({
source: new ol.source.OSM()
});
layers[2] = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: layers,
view: new ol.View({
center: ol.proj.fromLonLat([13, 56]),
zoom: 8,
EPSG: 4326,
})
});
function switchLayer(evt) {
layers[evt.value].setVisible(evt.checked);
}
map.on('singleclick', function (event) {
var url = '../../proxy/proxy.aspx?url=' + layers[0].getSource().getFeatureInfoUrl
(event.coordinate,
map.getView().getResolution(), map.getView().getProjection().getCode(),
{
INFO_FORMAT: 'text/html',
Layers: "AL2:A2"
});
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>'
}
});
</script>
HTML:
<!DOCTYPE html >
<meta charset = "utf-8"/>
<title > OpenLayers </title>
<link rel = "stylesheet" href = "https://openlayers.org/en/v6.5.0/css/ol.css" type = "text/css">
<script src = "https://openlayers.org/en/v6.5.0/build/ol.js" script type = "text/javascript" ></script>
</head>
<body>