feat: Add simple feature info box under maps

spatial/static/spatial/js/spatialMap.js

@@ -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

spatial/templates/spatial/index.html

@@ -44,11 +44,16 @@
 </script>
 {% endblock %}
 {% block content %}
-	<div class="row" id="mapAndForecastRow">
 		<!-- Start map container -->
 		<div class="col-md-12" id="mapContainer">
-			<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 map container -->
-	</div><!-- End row with sidebar and contents container -->
+			<div class="row" id="mapAndForecastRow" style="padding-bottom: 20px;">
+				<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>
+
 {% endblock %}
\ No newline at end of file