Skip to content
Snippets Groups Projects
Commit 4bec84a3 authored by Tor-Einar Skog's avatar Tor-Einar Skog
Browse files

Show popup with location values for model

parent a794da4e
Branches
No related tags found
No related merge requests found
// TODO: Handle most/all EPSG codes
proj4.defs(
'EPSG:25833',
'+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs'
......@@ -13,6 +14,8 @@ let timestamps = undefined;
let currentParameter = "WARNING_STATUS";
let parameters = [currentParameter];
let WMSLayersDateBucket = {};
let map = undefined;
let popup = undefined;
function switchLayer(dayIndex)
{
......@@ -32,10 +35,16 @@ function setCurrentDate(layerIndex)
document.getElementById("currentDate").innerHTML=moment(parseInt(timestamps[layerIndex])).format("YYYY-MM-DD");
}
function getCurrentVisibleOLLayer()
{
// The WMS layer returned from mapserver is found
let currentWMSLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
// We have the ordering in the openlayers Map as a property, use that to return the OpenLayers layer
return layers[currentLayer["ordering"]];
}
async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
var map;
var backgroundLayer = new ol.layer.Tile({
source: new ol.source.OSM({
......@@ -52,6 +61,7 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
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]);
// Analyze and organize layers
// First dimension: Time
......@@ -101,7 +111,7 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
params: { "LAYERS": modelId + "." + currentLayerParam + "." + dateStr, "TRANSPARENT": "TRUE" },
serverType: "mapserver",
ratio: 1,
projection: ol.proj.get("EPSG:25833")
projection: ol.proj.get(currentLayer.CRS[0])
}),
visible: false,
opacity: 0.5
......@@ -139,6 +149,13 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
});
map.setView(view);
popup = new ol.Overlay({
element: document.getElementById('popup')
});
map.addOverlay(popup);
map.on('singleclick', displayQueryResult);
// Add the parameter selector
let radioHTML = "";
for(let i=0;i<parameters.length;i++)
......@@ -154,4 +171,65 @@ function switchParameter(selectedParameter)
{
currentParameter = selectedParameter;
switchLayer(document.getElementById("layerDateRange").value);
}
async function displayQueryResult(evt)
{
let coordinate = proj4(map.getView().getProjection().getCode(), 'EPSG:25833', evt.coordinate)
let currentWMSLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
let currentLayer = getCurrentVisibleOLLayer();
//console.info(currentLayer);
const url = currentLayer.getSource().getGetFeatureInfoUrl(
coordinate,
map.getView().getResolution(),
currentWMSLayer.CRS[0],
{ 'INFO_FORMAT': 'text/xml' }
);
//console.info(url);
let response = await fetch(url);
let responseXML = await response.text();
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;
let parameters = {};
let parameterElements = xmlDOM.getElementsByTagName("parameter");
for(let i=0;i<parameterElements.length;i++)
{
parameters[parameterElements[i].getAttribute("name")] = parameterElements[i].getAttribute("value");
}
//console.info("warningStatus = " + warningStatus);
//console.info(parameters);
let warningStatusTitle = warningStatus == 0 ? "N/A"
: warningStatus == 1 ? "Missing data"
: warningStatus == 2 ? "No risk"
: warningStatus == 3 ? "Possible risk"
: warningStatus == 4 ? "High risk" : "";
let paramHTML = "<ul>";
paramCodes = Object.keys(parameters);
for(let i=0;i<paramCodes.length;i++)
{
paramHTML += "<li>" + paramCodes[i] + " = " + parameters[paramCodes[i]] + "</li>"
}
paramHTML += "</ul>";
// Render results
// TODO: Handle click outside layer
let popupElement = popup.getElement();
$(popupElement).popover('destroy');
popup.setPosition(evt.coordinate);
$(popupElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<h4>' + warningStatusTitle + '</h4>' + paramHTML
});
$(popupElement).popover('show');
}
}
\ No newline at end of file
......@@ -33,5 +33,6 @@
<div class="form-group" id="paramselector" style="position: absolute; right: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
</div>
</div>
<div id="popup" title="Location details"></div>
{% endblock %}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment