From f0a1971d93b40b171b6e466f0853faf0f8ac8fcb Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Mon, 24 Feb 2025 13:21:47 +0100
Subject: [PATCH] feat: Add select for year, reload gridmap when new year is
selected
---
spatial/static/spatial/js/gridmap.js | 28 ++++++++++++++++++--------
spatial/templates/spatial/gridmap.html | 27 ++++++++++++++++++++++++-
2 files changed, 46 insertions(+), 9 deletions(-)
diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 02be4484..c1c63c6f 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/spatial/static/spatial/js/gridmap.js
@@ -167,9 +167,22 @@ function getLayersForCurrentTimestamp()
* @param {*} inputModelId model Id, e.g. PSILARTEMP
* @param {*} mapAttribution background map source information (displayed in the map)
*/
-async function initGridMap(inputModelId, wmsURL, mapAttribution) {
+async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
+
+ let today = getSystemTime().format("YYYY-MM-DD");
+ if (year < getSystemTime().year()) {
+ today = year + "-12-31";
+ }
+ const wmsYearUrl = `${wmsURL}/${year}/`;
+ // Check if the map already exists and remove it
+ if (typeof map !== 'undefined') {
+ map.setTarget(null);
+ }
+ WMSLayersDateBucket = {};
+ timestamps = undefined;
+ todayLayerIndex = undefined;
+
modelId = inputModelId;
- console.info("Init grid map " + inputModelId)
let backgroundLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [mapAttribution]
@@ -179,9 +192,9 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
// Get layers from WMS service
let parser = new ol.format.WMSCapabilities();
//console.info(mapserverURL + modelId + "?service=WMS&version=1.3.0&request=GetCapabilities");
- let response = await fetch(wmsURL + "?service=WMS&version=1.3.0&request=GetCapabilities&language=" + settings.currentLanguage);
- //let response = await fetch(wmsURL + "?service=WMS&request=GetCapabilities&language={{language.code}}");
- //console.info(wmsURL + "?service=WMS&request=GetCapabilities&language=en");
+ let response = await fetch(wmsYearUrl + "?service=WMS&version=1.3.0&request=GetCapabilities&language=" + settings.currentLanguage);
+ //let response = await fetch(wmsYearUrl + "?service=WMS&request=GetCapabilities&language={{language.code}}");
+ //console.info(wmsYearUrl + "?service=WMS&request=GetCapabilities&language=en");
//console.info(response.status); // Response is 200 even if a model doesn't exist on the mapserver
let txt = await response.text();
@@ -192,7 +205,7 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
{
let capabilities = parser.read(txt);
isDataReturned = capabilities.Capability.Layer != undefined;
-
+
let WMSLayers = isDataReturned ? capabilities.Capability.Layer.Layer : [];
if(isDataReturned)
@@ -292,7 +305,7 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
layers.push(
new ol.layer.Image({
source: new ol.source.ImageWMS({
- url: wmsURL,
+ url: wmsYearUrl,
params: { "LAYERS": modelId + "." + currentLayerParam + "." + dateStr, "TRANSPARENT": "TRUE" },
serverType: "mapserver",
ratio: 1,
@@ -408,7 +421,6 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
document.getElementById("slidecontainer").style.display="none";
if(! wmsServiceSuccess)
{
- alert("Got here");
document.getElementById("errorMessageContainer").innerHTML="ERROR: Response from server was " + txt;
}
else // Service OK, but no data (layers)
diff --git a/spatial/templates/spatial/gridmap.html b/spatial/templates/spatial/gridmap.html
index fc929189..d442a80b 100644
--- a/spatial/templates/spatial/gridmap.html
+++ b/spatial/templates/spatial/gridmap.html
@@ -22,10 +22,29 @@
<script type="text/javascript" src="{% static "spatial/js/gridmap.js" %}"></script>
<script type="text/javascript">
$(document).ready(function() {
+ // Populate the year select element
+ const currentYear = getSystemTime().year();
+ const startYear = 2024;
+ const yearSelect = document.getElementById('year');
+ for (let year = startYear; year <= currentYear; year++) {
+ const option = document.createElement('option');
+ option.value = year;
+ option.textContent = year;
+ if (year === currentYear) {
+ option.selected = true;
+ }
+ yearSelect.appendChild(option);
+ }
+
+ yearSelect.addEventListener('change', function() {
+ const selectedYear = yearSelect.value;
+ initGridMap("{{model_id}}", "{{url}}", selectedYear, "{{settings.MAP_ATTRIBUTION|safe}}");
+ });
+
const longitude = {{settings.MAP_CENTER_LONGITUDE|unlocalize}};
const latitude = {{settings.MAP_CENTER_LATITUDE|unlocalize}};
const zoomLevel = {{settings.MAP_ZOOMLEVEL}};
- initGridMap("{{model_id}}","{{url}}", "{{settings.MAP_ATTRIBUTION|safe}}");
+ initGridMap("{{model_id}}","{{url}}", currentYear, "{{settings.MAP_ATTRIBUTION|safe}}");
});
</script>
{% endblock %}
@@ -35,6 +54,12 @@
<h2 id="modelTitle"></h2>
<div id="modelAbstractPreamble"></div>
</div>
+ <div class="col-md-12 form-inline">
+ <div class="form-group">
+ <label for="year">Velg år</label>
+ <select class="form-control" name="year" id="year"></select>
+ </div>
+ </div>
<!-- Start map container -->
<div class="col-md-12" id="mapContainer" style="position: relative; height: 800px; padding-top: 15px; padding-bottom: 15px;">
<div id="slidecontainer" class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px; margin-bottom: 15px;">
--
GitLab