From 10b234510daf5bf19950cc4c977c027914b12e96 Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Wed, 5 Mar 2025 14:57:25 +0100
Subject: [PATCH] feat: Keep popup at selected point between layer changes and
year changes
---
spatial/static/spatial/js/gridmap.js | 43 +++++++++++++++++++-------
spatial/templates/spatial/gridmap.html | 1 -
2 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 905db63..b25232f 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/spatial/static/spatial/js/gridmap.js
@@ -38,7 +38,8 @@ let parameterLabels = {"WARNING_STATUS": gettext("WARNING_STATUS")};
let WMSLayersDateBucket = {};
let map = undefined;
let popup = undefined;
-
+let popupElement = undefined;
+let currentClickEvent = undefined;
/**
@@ -68,6 +69,9 @@ async function switchLayer(dayIndex)
}
}
setCurrentDate(dayIndex);
+ if(popup && currentClickEvent) {
+ await displayQueryResult(currentClickEvent);
+ }
}
@@ -178,6 +182,7 @@ async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
if (typeof map !== 'undefined') {
map.setTarget(null);
}
+
WMSLayersDateBucket = {};
layers = [];
timestamps = undefined;
@@ -187,6 +192,14 @@ async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
document.getElementById("slidecontainer").style.display="block";
document.getElementById("errorMessageContainer").style.display="none";
+ // Ensure the popup element exists in the DOM
+ popupElement = document.getElementById('popup');
+ if (!popupElement) {
+ popupElement = document.createElement('div');
+ popupElement.id = 'popup';
+ document.getElementById('mapContainer').appendChild(popupElement);
+ }
+
modelId = inputModelId;
let backgroundLayer = new ol.layer.Tile({
source: new ol.source.OSM({
@@ -388,14 +401,21 @@ async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
map.getView().fit(extent, map.getSize());
}
- popup = new ol.Overlay({
- element: document.getElementById('popup')
- });
- map.addOverlay(popup);
+ if(popupElement) {
+ popup = new ol.Overlay({
+ element: popupElement
+ });
+ map.addOverlay(popup);
- map.on('singleclick', (evt) => {
- displayQueryResult(evt);
- });
+ map.on('singleclick', (evt) => {
+ displayQueryResult(evt);
+ });
+ if(currentClickEvent) {
+ await displayQueryResult(currentClickEvent);
+ }
+ } else {
+ console.error("Popup element is not found in DOM")
+ }
// Store user's zoom/pan preferences for the next browser session
@@ -449,10 +469,11 @@ myDefaultWhiteList.i = ["aria-hidden", "onclick","style"]
async function displayQueryResult(evt)
{
+ currentClickEvent = evt
let popupElement = popup.getElement();
$(popupElement).popover('destroy');
-
-
+
+
let currentWMSLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
let currentWarningStatusLayer = WMSLayersDateBucket[currentTimestamp]["WARNING_STATUS"];
@@ -523,7 +544,7 @@ async function displayQueryResult(evt)
'title': gettext("Map location") + ` [${wgs84Coordinate[1].toFixed(4)}, ${wgs84Coordinate[0].toFixed(4)}] <i class="fa fa-times" style="display: inline-block; cursor: pointer; position: absolute; right: 10px;" aria-hidden="true" onclick="$(popup.getElement()).popover('destroy');"></i>`,
'content': '<h4>' + getWarningStatusTitle(currentWarningStatusLayer.Abstract, warningStatus) + '</h4>' + paramHTML
});
- $(popupElement).popover('show');
+ $(popupElement).popover('show');
}
diff --git a/spatial/templates/spatial/gridmap.html b/spatial/templates/spatial/gridmap.html
index d442a80..f335508 100644
--- a/spatial/templates/spatial/gridmap.html
+++ b/spatial/templates/spatial/gridmap.html
@@ -74,7 +74,6 @@
</div>
<div id="errorMessageContainer" style="display: none; position: absolute; left: 100px; top: 100px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;"></div>
</div>
- <div id="popup" title=""></div>
<div class="col-md-12">
<div id="modelAbstractBody"></div>
</div>
--
GitLab