Add layer legend

spatial/static/spatial/js/slidingMap.js

@@ -17,7 +17,7 @@ let WMSLayersDateBucket = {};
 let map = undefined;
 let popup = undefined;
 
-function switchLayer(dayIndex)
+async function switchLayer(dayIndex)
 {
     currentTimestamp = timestamps[dayIndex];
     currentLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
@@ -26,6 +26,14 @@ function switchLayer(dayIndex)
     for(let i=0;i<layers.length;i++)
     {
         layers[i].setVisible(i==currentLayerOrdering);
+        if(layers[i].getVisible())
+        {
+            document.getElementById("layerLegendImg").src=currentLayer.Style[0].LegendURL[0].OnlineResource;
+            console.info(currentLayer.Style[0].LegendURL[0].OnlineResource);
+            // Get the legend!
+            //let legendURL = layers[i].getSource().getLegendUrl(map.getView().getResolution());
+            //console.info(legendURL);
+        }
     }
     setCurrentDate(dayIndex);
 }
@@ -63,7 +71,7 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
     let WMSLayers = capabilities.Capability.Layer.Layer;
     document.getElementById("modelTitle").innerHTML = capabilities.Service.Title;
     document.getElementById("modelAbstract").innerHTML = capabilities.Service.Abstract.replaceAll("\n\n","XXX");
-    //console.info(capabilities.Service.Abstract);
+    console.info(capabilities);
 
     // Analyze and organize layers
     // First dimension: Time
@@ -125,12 +133,7 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
         }
     }
 
-    let range = document.getElementById("layerDateRange");
-    range.min = 0;
-    range.max = timestamps.length -1;
-    range.value = todayLayerIndex;
-    setCurrentDate(todayLayerIndex);
-    switchLayer(todayLayerIndex);
+    
     
     //console.info(WMSLayersDateBucket);
 
@@ -151,6 +154,13 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
 	});
 	map.setView(view);
 
+    let range = document.getElementById("layerDateRange");
+    range.min = 0;
+    range.max = timestamps.length -1;
+    range.value = todayLayerIndex;
+    setCurrentDate(todayLayerIndex);
+    switchLayer(todayLayerIndex);
+
     popup = new ol.Overlay({
     element: document.getElementById('popup')
     });

spatial/templates/spatial/slidingMap.html

@@ -32,6 +32,9 @@
             </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 id="layerLegend" style="position: absolute; right: 20px; top: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
+				<img id="layerLegendImg" src=""/>
+			</div>
         </div>
 		<div id="popup" title="Location details"></div>
 		<div class="col-md-12">