add model metadata. Hide popup when user clicks outside of layer

spatial/static/spatial/js/slidingMap.js

@@ -59,9 +59,11 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
     // Get layers from WMS service
     let parser = new ol.format.WMSCapabilities();
     let response = await fetch(mapserverURL + modelId + "?service=WMS&version=1.3.0&request=GetCapabilities");
-    let result = parser.read(await response.text());
-    let WMSLayers = result.Capability.Layer.Layer;
-    //console.info(WMSLayers[0]);
+    let capabilities = parser.read(await response.text());
+    let WMSLayers = capabilities.Capability.Layer.Layer;
+    document.getElementById("modelTitle").innerHTML = capabilities.Service.Title;
+    document.getElementById("modelAbstract").innerHTML = capabilities.Service.Abstract.replaceAll("\n\n","XXX");
+    //console.info(capabilities.Service.Abstract);
 
     // Analyze and organize layers
     // First dimension: Time
@@ -190,12 +192,26 @@ async function displayQueryResult(evt)
     let response = await fetch(url);
     let responseXML = await response.text();
 
+    // User clicked outside of layer extent
+    if(responseXML.trim().length == 0)
+    {
+        let popupElement = popup.getElement();
+        $(popupElement).popover('destroy');
+        return;
+    }
+
     const parser = new DOMParser();
     const xmlDOM = parser.parseFromString(responseXML,"text/xml");
     const result = xmlDOM.getElementsByTagName("vipsResult")[0]
     if(result) {
         // We may or may not have warning status included
         let warningStatus = xmlDOM.getElementsByTagName("warningStatus").length == 1 ? xmlDOM.getElementsByTagName("warningStatus")[0].getAttribute("value") : null;
+        if(warningStatus == -1)
+        {
+            let popupElement = popup.getElement();
+            $(popupElement).popover('destroy');
+            return;
+        }
         let parameters = {};
         let parameterElements = xmlDOM.getElementsByTagName("parameter");
         for(let i=0;i<parameterElements.length;i++)
@@ -232,4 +248,7 @@ async function displayQueryResult(evt)
           });
           $(popupElement).popover('show');
     }
+    else{
+        alert("An error occured. No model data was returned from the server. This is what the server returned: " + responseXML);
+    }
 }
\ No newline at end of file

spatial/templates/spatial/slidingMap.html

@@ -34,5 +34,9 @@
 			</div>
         </div>
 		<div id="popup" title="Location details"></div>
+		<div class="col-md-12">
+			<h2 id="modelTitle"></h2>
+			<div id="modelAbstract"></div>
+		</div>
        
 {% endblock %}
\ No newline at end of file