diff --git a/spatial/static/spatial/js/slidingMap.js b/spatial/static/spatial/js/slidingMap.js index 7168acbc46d0cd8591747b74f7c203f5dbe44197..081fad2779353ced54c703bbeb6a12d919b0b21d 100644 --- a/spatial/static/spatial/js/slidingMap.js +++ b/spatial/static/spatial/js/slidingMap.js @@ -7,19 +7,24 @@ let layers = []; let mapserverURL="https://testvips.nibio.no/cgi-bin/"; let modelId = "SEPTREFHUM"; -let today = "2023-10-14"; +let today = "2023-04-10"; let todayLayerIndex = undefined; let timestamps = undefined; +let currentParameter = "WARNING_STATUS"; +let WMSLayersDateBucket = {}; -function switchLayer(visibleLayerIndex) +function switchLayer(dayIndex) { - console.info("==>" + visibleLayerIndex); + console.info("==>" + dayIndex); + currentTimestamp = timestamps[dayIndex]; + currentLayer = WMSLayersDateBucket[currentTimestamp][currentParameter]; + currentLayerOrdering = currentLayer["ordering"]; for(let i=0;i<layers.length;i++) { console.info(i) - layers[i].setVisible(i==visibleLayerIndex); + layers[i].setVisible(i==currentLayerOrdering); } - setCurrentDate(visibleLayerIndex); + setCurrentDate(dayIndex); } function setCurrentDate(layerIndex) @@ -48,18 +53,20 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) { let result = parser.read(await response.text()); let WMSLayers = result.Capability.Layer.Layer; - // Analyze layers - let WMSLayersDateBucket = {}; + // Analyze and organize layers + 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") + let WMSLayerName = WMSLayers[i].Name; + let WMSLayerParam = WMSLayerName.split(".")[1] + let timestamp = moment(WMSLayerName.split(".")[2]).valueOf(); + if(WMSLayersDateBucket[timestamp] == undefined) { - WMSLayersDateBucket[moment(WMSLayerName.split(".")[2]).valueOf()] = WMSLayers[i]; + WMSLayersDateBucket[timestamp] = {} } - + WMSLayersDateBucket[timestamp][WMSLayerParam] = WMSLayers[i]; } + //console.info(WMSLayersDateBucket); timestamps = Object.keys(WMSLayersDateBucket); @@ -71,23 +78,29 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) { 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 timestampLayers = WMSLayersDateBucket[timestamps[i]]; + let params = Object.keys(timestampLayers); + for(let j=0; j<params.length;j++) + { + let currentLayer = timestampLayers[params[j]]; + let currentLayerParam = currentLayer.Name.split(".")[1]; + layers.push( + new ol.layer.Image({ + source: new ol.source.ImageWMS({ + url: mapserverURL + modelId, + params: { "LAYERS": modelId + "." + currentLayerParam + "." + dateStr, "TRANSPARENT": "TRUE" }, + serverType: "mapserver", + ratio: 1, + projection: ol.proj.get("EPSG:25833") + }), + visible: false, + opacity: 0.5 + }) + ); + currentLayer["ordering"] = layers.length -1; + } } let range = document.getElementById("layerDateRange"); @@ -95,8 +108,9 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) { range.max = timestamps.length -1; range.value = todayLayerIndex; setCurrentDate(todayLayerIndex); + switchLayer(todayLayerIndex); - + //console.info(WMSLayersDateBucket); // Creating the map map = new ol.Map({