Add parameter switcher

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

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