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

spatial/static/spatial/js/spatialMap.js

+/*
+ * Copyright (c) 2018 NIBIO <http://www.nibio.no/>. 
+ * 
+ * This file is part of VIPSWeb.
+ * VIPSWeb is free software: you can redistribute it and/or modify
+ * it under the terms of the NIBIO Open Source License as published by 
+ * NIBIO, either version 1 of the License, or (at your option) any
+ * later version.
+ * 
+ * VIPSWeb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * NIBIO Open Source License for more details.
+ * 
+ * You should have received a copy of the NIBIO Open Source License
+ * along with VIPSWeb.  If not, see <http://www.nibio.no/licenses/>.
+ * 
+ */
+
+/**
+ * @copyright 2018 <a href="http://www.nibio.no/">NIBIO</a>
+ * @author Tor-Einar Skog <tor-einar.skog@nibio.no>
+ */
+
+
+/* ----------------------- Global elements ------------------- */
+
+var maxMapZoom = 10;
+var warningStatusText = {
+	0: 'Sverming av 1. generasjon er over og varslingen er avsluttet',
+	1: 'Mangler data',
+	2: 'Sverming har ikke begynt',
+	3: 'Svermingen er i startfasen',
+	4: 'Svermingen er på sitt mest aktive'
+}
+
+/**
+ * Initializes the spatial map
+ * @param {ol.Coordinate} lonLat - coordinates for the map's center (WGS84)
+ * @param {int} zoomLevel - the zoom level (1-15, 1 is world wide view, 15 is greatest zoom)
+ * @param {string} mapAttribution - The text in the corner of the map giving credits where it's due
+ * @param {string} mapId - The unique id of this map
+ */
+function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
+	var map;
+	var carrotLayer;
+
+	var featureInfoId = mapId + "Info";
+	var featureInfoDiv = document.getElementById(featureInfoId);
+
+	// ---------- Background layer is OpenStreetMap --------------
+	var backgroundLayer = new ol.layer.Tile({
+		source: new ol.source.OSM({
+			attributions: [
+				new ol.Attribution({
+					html: mapAttribution
+				})
+			]
+		})
+	});
+
+	// Create projection for carrot layer
+	proj4.defs(
+		'EPSG:25833',
+		'+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs'
+	);
+
+	// Create wms source
+	var carrotLayerSource = new ol.source.ImageWMS({
+		url: 'https://testvips.nibio.no/cgi-bin/PSILARTEMP',
+		params: { 'LAYERS': 'PSILARTEMP_' + (mapId=="mapToday" ? "TODAY":"TOMORROW"), 'TRANSPARENT': 'TRUE' },
+		serverType: 'mapserver',
+		ratio: 1,
+		projection: ol.proj.get('EPSG:25833')
+	})
+
+	carrotLayer = new ol.layer.Image({
+		source: carrotLayerSource,
+		visible: true,
+		opacity: (mapId=="mapToday" ? 0.5:0.4)
+	})
+
+	// Creating the map
+	map = new ol.Map({
+		target: mapId,
+		layers: [backgroundLayer, carrotLayer],
+		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({
+		center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().getCode()),
+		zoom: zoomLevel,
+		maxMapZoom: maxMapZoom,
+	});
+	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 result = xmlDOM.getElementsByTagName("vipsResult")[0]
+					if(result) {
+						const modelName = result.getElementsByTagName("modelName")[0]
+						const warningStatus = result.getElementsByTagName("warningStatus")[0];
+						
+						// Calculate position of feature info div
+                        const mapRect = document.getElementById(mapId).getBoundingClientRect();
+                        const mapLeft = mapRect.left + window.scrollX;
+                        const mapTop = mapRect.top + window.scrollY;
+						const pixel = map.getEventPixel(evt.originalEvent);
+						const clickLeft = mapLeft + pixel[0] - 180;
+                        const clickTop = mapTop + pixel[1] - 100;
+
+						// Hide when warning status is 0
+						if (warningStatus.getAttribute('value') in warningStatusText) {
+							featureInfoDiv.innerHTML = warningStatusText[warningStatus.getAttribute('value')];
+							featureInfoDiv.style.display = 'block';
+							featureInfoDiv.style.opacity = "1"
+							featureInfoDiv.style.left = clickLeft + "px";
+							featureInfoDiv.style.top = clickTop + "px";
+							
+							// Hide the feature info div after the specified duration
+							var duration = 2500;
+							setTimeout(function() {
+								featureInfoDiv.style.opacity = "0";
+							}, duration);
+						} else {
+							featureInfoDiv.style.display = 'none';
+						}
+					}
+				});
+			
+		}
+	});
+}
+