From a794da4eabd57a57bca53aa61c89cc801e253f0e Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Wed, 25 Oct 2023 11:19:44 +0200
Subject: [PATCH] Add parameter switcher
---
spatial/static/spatial/js/slidingMap.js | 35 +++++++++++++++++++----
spatial/templates/spatial/slidingMap.html | 5 ++--
2 files changed, 33 insertions(+), 7 deletions(-)
diff --git a/spatial/static/spatial/js/slidingMap.js b/spatial/static/spatial/js/slidingMap.js
index 081fad27..67f0eced 100644
--- a/spatial/static/spatial/js/slidingMap.js
+++ b/spatial/static/spatial/js/slidingMap.js
@@ -11,17 +11,17 @@ let today = "2023-04-10";
let todayLayerIndex = undefined;
let timestamps = undefined;
let currentParameter = "WARNING_STATUS";
+let parameters = [currentParameter];
let WMSLayersDateBucket = {};
function switchLayer(dayIndex)
{
- console.info("==>" + dayIndex);
currentTimestamp = timestamps[dayIndex];
currentLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
+ // The ordering property was added when we added all layers to the layers list (see initSlidingMap())
currentLayerOrdering = currentLayer["ordering"];
for(let i=0;i<layers.length;i++)
{
- console.info(i)
layers[i].setVisible(i==currentLayerOrdering);
}
setCurrentDate(dayIndex);
@@ -54,11 +54,17 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
let WMSLayers = result.Capability.Layer.Layer;
// Analyze and organize layers
-
+ // First dimension: Time
+ // Second dimension: Parameter
for(let i=0;i<WMSLayers.length;i++){
// Sort by date ascending
let WMSLayerName = WMSLayers[i].Name;
- let WMSLayerParam = WMSLayerName.split(".")[1]
+ let WMSLayerParam = WMSLayerName.split(".")[1];
+ // Adding the parameter if it does not exist in the list
+ if(parameters.indexOf(WMSLayerParam) < 0)
+ {
+ parameters.push(WMSLayerParam);
+ }
let timestamp = moment(WMSLayerName.split(".")[2]).valueOf();
if(WMSLayersDateBucket[timestamp] == undefined)
{
@@ -68,8 +74,8 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
}
//console.info(WMSLayersDateBucket);
+ // Iterate timestamps, add all layers chronologically
timestamps = Object.keys(WMSLayersDateBucket);
-
timestamps.sort();
//console.info(timestamps);
@@ -80,6 +86,8 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
{
todayLayerIndex = i;
}
+
+ // There are normally several parameters per timestamp
let timestampLayers = WMSLayersDateBucket[timestamps[i]];
let params = Object.keys(timestampLayers);
for(let j=0; j<params.length;j++)
@@ -99,6 +107,8 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
opacity: 0.5
})
);
+ // This is the placement in the maps layers collection. By adding it here
+ // it's easy to manipulate it
currentLayer["ordering"] = layers.length -1;
}
}
@@ -129,4 +139,19 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
});
map.setView(view);
+ // Add the parameter selector
+ let radioHTML = "";
+ for(let i=0;i<parameters.length;i++)
+ {
+ radioHTML += '<div class="radio"><label><input type="radio" name="parameter" value="' + parameters[i] + '"' + (parameters[i] == currentParameter ? "checked" : "") + ' onclick="switchParameter(this.value);"/>' + parameters[i] + '</label></div>';
+ }
+
+ document.getElementById("paramselector").innerHTML = radioHTML;
+
+}
+
+function switchParameter(selectedParameter)
+{
+ currentParameter = selectedParameter;
+ switchLayer(document.getElementById("layerDateRange").value);
}
\ No newline at end of file
diff --git a/spatial/templates/spatial/slidingMap.html b/spatial/templates/spatial/slidingMap.html
index b4d74405..b1773872 100644
--- a/spatial/templates/spatial/slidingMap.html
+++ b/spatial/templates/spatial/slidingMap.html
@@ -29,8 +29,9 @@
<div class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
Current date: <span id="currentDate"></span> <br/>
<input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
-
- </div>
+ </div>
+ <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>
{% endblock %}
\ No newline at end of file
--
GitLab