Skip to content
Snippets Groups Projects

feat: Add test page (spatial) with mapserver layer in openlayers map

Merged Lene Wasskog requested to merge feature/gridv-6-mapserver-layer into develop
2 files
+ 39
12
Compare changes
  • Side-by-side
  • Inline
Files
2
@@ -36,6 +36,8 @@ var carrotLayer;
*/
function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
var featureInfo = document.getElementById(mapId + "Info");
// ---------- Background layer is OpenStreetMap --------------
var backgroundLayer = new ol.layer.Tile({
source: new ol.source.OSM({
@@ -51,7 +53,7 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
proj4.defs(
'EPSG:25833',
'+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs'
);
);
// Create wms source
var carrotLayerSource = new ol.source.ImageWMS({
@@ -74,6 +76,7 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
renderer: 'canvas'
});
// Setting zoom and center for the map (need to do this after creating map. so that we can transform our
// center to correct map projection)
var view = new ol.View({
@@ -83,10 +86,29 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
});
map.setView(view);
map.on('singleclick', function (evt) {
const coordinate = proj4('EPSG:3857', 'EPSG:25833', evt.coordinate)
const url = carrotLayerSource.getGetFeatureInfoUrl(
coordinate,
view.getResolution(),
'EPSG:25833',
{ 'INFO_FORMAT': 'text/xml' }
);
if (url) {
fetch(url)
.then((response) => response.text())
.then((body) => {
const parser = new DOMParser();
const xmlDOM = parser.parseFromString(body,"text/xml");
const vipsResult = xmlDOM.getElementsByTagName("vipsResult")[0]
if(vipsResult) {
const modelName = vipsResult.getElementsByTagName("modelName")[0]
const warningStatus = vipsResult.getElementsByTagName("warningStatus")[0];
featureInfo.innerHTML = '<h4>' + modelName.textContent + '</h4><p>coordinates = ' + proj4('EPSG:3857', 'EPSG:4326', evt.coordinate) + ' <br/>warningStatus = ' + warningStatus.getAttribute('value') + '</p>'
}
});
}
});
}
// Attempting to adjust map to small screen
if (map.getSize()[0] < 500) {
var zoom = map.getView().getZoom();
map.getView().setZoom(zoom - 1);
}
}
\ No newline at end of file
Loading