Map adapts to WMS service

spatial/static/spatial/js/slidingMap.js

@@ -5,16 +5,31 @@ proj4.defs(
 
 let layers = [];
 
+let mapserverURL="https://testvips.nibio.no/cgi-bin/";
+let modelId = "SEPTREFHUM";
+let today = "2023-10-14";
+let todayLayerIndex = undefined;
+let timestamps = undefined;
+
 function switchLayer(visibleLayerIndex)
 {
-    console.info(layers.length + " layers available. Index=" + visibleLayerIndex);
+    console.info("==>" + visibleLayerIndex);
     for(let i=0;i<layers.length;i++)
     {
+        console.info(i)
         layers[i].setVisible(i==visibleLayerIndex);
     }
+    setCurrentDate(visibleLayerIndex);
+}
+
+function setCurrentDate(layerIndex)
+{
+    document.getElementById("currentDate").innerHTML=moment(parseInt(timestamps[layerIndex])).format("YYYY-MM-DD");
 }
 
-function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
+
+
+async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
 	var map;
 
     var backgroundLayer = new ol.layer.Tile({
@@ -27,6 +42,70 @@ 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;
+
+    // Analyze layers
+    let WMSLayersDateBucket = {};
+    for(let i=0;i<WMSLayers.length;i++){
+        // Get only WARNING_STATUS layers for now
+        // Sort by date ascending
+        WMSLayerName = WMSLayers[i].Name;
+        if(WMSLayerName.split(".")[1] == "WARNING_STATUS")
+        {
+            WMSLayersDateBucket[moment(WMSLayerName.split(".")[2]).valueOf()] = WMSLayers[i];
+        }
+        
+    }
+
+    timestamps = Object.keys(WMSLayersDateBucket);
+
+    timestamps.sort();
+    //console.info(timestamps);
+
+    for(let i=0; i< timestamps.length;i++)
+    {
+        let dateStr = moment(parseInt(timestamps[i])).format("YYYY-MM-DD");
+        if(dateStr == today)
+        {
+            console.info("YESS: " + i);
+            todayLayerIndex = i;
+        }
+
+        layers.push(
+            new ol.layer.Image({
+                source: new ol.source.ImageWMS({
+                    url: mapserverURL + modelId,
+                    params: { "LAYERS": modelId + ".WARNING_STATUS." + dateStr, "TRANSPARENT": "TRUE" },
+                    serverType: "mapserver",
+                    ratio: 1,
+                    projection: ol.proj.get("EPSG:25833")
+                }),
+                visible: (i==todayLayerIndex),
+                opacity: 0.5
+            })
+        );
+    }
+
+    let range = document.getElementById("layerDateRange");
+    range.min = 0;
+    range.max = timestamps.length -1;
+    range.value = todayLayerIndex;
+    setCurrentDate(todayLayerIndex);
+    
+    //range.oninput();
+    /*
+    console.info("WWW" + todayLayerIndex.valueOf());
+    document.getElementById("layerDateRange").value = todayLayerIndex; // TODO: Today
+    //document.getElementById("layerDateRange").value = "8";
+    console.info(document.getElementById("layerDateRange").value);
+    document.getElementById("layerDateRange").max = timestamps.length -1;
+*/
+    //console.info(timestamps);
+    /*
     for(let i=2;i<=6;i++)
     {
         layers.push(
@@ -42,7 +121,7 @@ function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
                 opacity: 0.5
             })
         );
-    }
+    }*/
 
     
 

spatial/templates/spatial/slidingMap.html

@@ -27,6 +27,8 @@
 		<!-- Start map container -->
 		<div class="col-md-12" id="mapContainer" />
         <div class="slidecontainer">
-            <input type="range" min="0" max="4" value="0" id="myRange" onchange="switchLayer(parseInt(this.value));">
+            Current date: <span id="currentDate"></span> <br/>
+            <input type="range" min="0" max="0" value="3" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
+            
           </div>
 {% endblock %}
\ No newline at end of file