diff --git a/spatial/static/spatial/js/slidingMap.js b/spatial/static/spatial/js/slidingMap.js index 0d8e39ebf5a491bdc8c12d4cd1cb440ccfa29666..ee24b48e13509b01a5009a9e55b50da80e9339d3 100644 --- a/spatial/static/spatial/js/slidingMap.js +++ b/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 }) ); - } + }*/ diff --git a/spatial/templates/spatial/slidingMap.html b/spatial/templates/spatial/slidingMap.html index 03dd72a39e54782fc668e8ca0361e68569b95b72..66a54c5b9908f9967c1befc9855430051037da03 100644 --- a/spatial/templates/spatial/slidingMap.html +++ b/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