feat: Feature info at click in map

VIPSWeb/static/css/vipsweb.css

@@ -130,7 +130,14 @@ a.signinLink, a.signinLink:visited {
 
 }
 
-
+.featureInfo {
+	display: none;
+	position: absolute;
+	background-color: white;
+	border: 1px solid black;
+	padding: 5px;
+	transition: opacity 0.5s ease-out;
+}
 
 a.dropdown-toggle{
 	height: 65px;

docs/install.md

@@ -29,6 +29,11 @@ pip install -r requirements.txt
 ./manage.py migrate
 ```
 
+5. Run application
+```
+python3 manage.py runserver
+```
+
 ## Running with mod_wsgi
 The official Django documentation for this [can be found here](https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/modwsgi/) 
 

spatial/static/spatial/js/spatialMap.js

@@ -26,19 +26,27 @@
 /* ----------------------- 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} zoom - the zoom level (1-15, 1 is world wide view, 15 is greatest zoom)
+ * @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 featureInfo = document.getElementById(mapId + "Info");
+	var featureInfoId = mapId + "Info";
+	var featureInfoDiv = document.getElementById(featureInfoId);
 
 	// ---------- Background layer is OpenStreetMap --------------
 	var backgroundLayer = new ol.layer.Tile({
@@ -91,6 +99,7 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
 
 	map.on('singleclick', function (evt) {
 		const coordinate = proj4('EPSG:3857', 'EPSG:25833', evt.coordinate)
+
 		const url = carrotLayerSource.getGetFeatureInfoUrl(
 			coordinate,
 			view.getResolution(),
@@ -102,12 +111,36 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
 				.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>'
+					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') === '0') {
+							featureInfoDiv.style.display = 'none';
+						} else {
+							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);
+						}
 					}
 				});
 			

spatial/templates/spatial/index.html

@@ -79,10 +79,10 @@
 				<div class="col-md-6" id="mapToday" class="map" style="height: {{settings.MAP_HEIGHT}}px;">Today</div>
 				<div class="col-md-6" id="mapTomorrow" class="map" style="height: {{settings.MAP_HEIGHT}}px;">Tomorrow</div>
 			</div><!-- End row  -->
-			<div class="row" id="featureInfoRow" style="background-color:#fff;">
-					<div id="mapTodayInfo" class="mapTodayInfo col-md-6"></div>
-					<div id="mapTomorrowInfo" class="col-md-6"></div>
-			</div><!-- End row  -->
+			
+			<div id="mapTodayInfo" class="featureInfo"></div>
+			<div id="mapTomorrowInfo" class="featureInfo"></div>
+
 		</div>
 
 {% endblock %}
\ No newline at end of file