From a98e6524cb81b4d13b0c6624d296a4c07fe9cd7a Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Thu, 26 Oct 2023 14:05:17 +0200
Subject: [PATCH] Add layer legend
---
spatial/static/spatial/js/slidingMap.js | 26 ++++++++++++++++-------
spatial/templates/spatial/slidingMap.html | 3 +++
2 files changed, 21 insertions(+), 8 deletions(-)
diff --git a/spatial/static/spatial/js/slidingMap.js b/spatial/static/spatial/js/slidingMap.js
index 185c8d53..83b0f481 100644
--- a/spatial/static/spatial/js/slidingMap.js
+++ b/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')
});
diff --git a/spatial/templates/spatial/slidingMap.html b/spatial/templates/spatial/slidingMap.html
index 94657173..6e0d4ebd 100644
--- a/spatial/templates/spatial/slidingMap.html
+++ b/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">
--
GitLab