From 5dad1d0bb7ad24a00b95f9f1bc66ef2e9e71ef57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sun, 25 Jul 2021 19:31:15 +0200
Subject: [PATCH] Fix: Don't add multiple OpenLayers maps, remove listeners on
 dispose
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With 5.1 the map is only created when it is first shown, but every second time
switching to the map a new instance is created because zero is returned when no new
map was created.

OpenLayers adds a resize listener to the window when a target is defined to
handle size adjustments, but this means setTarget(null) has to be called to
fully dispose of the added listener when the map is no longer needed.

Signed-off-by: Maximilian Krög <maxi_kroeg@web.de>
---
 js/src/table/gis_visualization.js             | 21 +++++++++++--------
 libraries/classes/Gis/GisVisualization.php    |  6 +++++-
 .../gis_visualization/gis_visualization.twig  |  5 +----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/js/src/table/gis_visualization.js b/js/src/table/gis_visualization.js
index 3b007c30a2..b89c1d70f3 100644
--- a/js/src/table/gis_visualization.js
+++ b/js/src/table/gis_visualization.js
@@ -21,6 +21,8 @@ var scale = defaultScale;
 
 /** @type {SVGElement|undefined} */
 var gisSvg;
+/** @type {ol.Map|undefined} */
+var map;
 
 /**
  * Zooms and pans the visualization.
@@ -129,16 +131,14 @@ function initGISVisualization () {
     zoomAndPan();
 }
 
-function drawOpenLayerMap (openLayerCreate) {
+function drawOpenLayerMap () {
     $('#placeholder').hide();
     $('#openlayersmap').show();
     // Function doesn't work properly if #openlayersmap is hidden
-    if (!openLayerCreate) {
+    if (typeof map !== 'object') {
         // Draws openStreetMap with openLayers
-        drawOpenLayers();
-        return 1;
+        map = drawOpenLayers();
     }
-    return 0;
 }
 
 function getRelativeCoords (e) {
@@ -200,18 +200,21 @@ AJAX.registerTeardown('table/gis_visualization.js', function () {
         onGisMouseWheel,
         PASSIVE_EVENT_LISTENERS ? { passive: false } : undefined
     );
+    if (map) {
+        // Removes ol.Map's resize listener from window
+        map.setTarget(null);
+        map = undefined;
+    }
 });
 
 AJAX.registerOnload('table/gis_visualization.js', function () {
-    var openLayerCreate = 0;
-
     // If we are in GIS visualization, initialize it
     if ($('#gis_div').length > 0) {
         initGISVisualization();
     }
 
     if ($('#choice').prop('checked') === true) {
-        openLayerCreate = drawOpenLayerMap(openLayerCreate);
+        drawOpenLayerMap();
     }
 
     if (typeof ol === 'undefined') {
@@ -223,7 +226,7 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
             $('#placeholder').show();
             $('#openlayersmap').hide();
         } else {
-            openLayerCreate = drawOpenLayerMap(openLayerCreate);
+            drawOpenLayerMap();
         }
     });
 
diff --git a/libraries/classes/Gis/GisVisualization.php b/libraries/classes/Gis/GisVisualization.php
index 2dea3c46f7..5cf856ddf3 100644
--- a/libraries/classes/Gis/GisVisualization.php
+++ b/libraries/classes/Gis/GisVisualization.php
@@ -485,7 +485,8 @@ class GisVisualization
     {
         $this->init();
         $scale_data = $this->scaleDataSet($this->data);
-        $output = 'if (typeof ol !== "undefined") {'
+        $output = 'function drawOpenLayers() {'
+            . 'if (typeof ol !== "undefined") {'
             . 'var olCss = "js/vendor/openlayers/theme/ol.css";'
             . '$(\'head\').append(\'<link rel="stylesheet" type="text/css" href=\'+olCss+\'>\');'
             . 'var vectorLayer = new ol.source.Vector({});'
@@ -510,6 +511,9 @@ class GisVisualization
             . 'new ol.control.Attribution]'
             . '});';
         $output .= $this->prepareDataSet($this->data, $scale_data, 'ol', '')
+            . 'return map;'
+            . '}'
+            . 'return undefined;'
             . '}';
 
         return $output;
diff --git a/templates/table/gis_visualization/gis_visualization.twig b/templates/table/gis_visualization/gis_visualization.twig
index 34f92e0dc6..9ec6241cad 100644
--- a/templates/table/gis_visualization/gis_visualization.twig
+++ b/templates/table/gis_visualization/gis_visualization.twig
@@ -71,10 +71,7 @@
         <div id="openlayersmap"></div>
         <input type="hidden" id="themeImagePath" value="{{ theme_image_path }}">
         <script language="javascript" type="text/javascript">
-            function drawOpenLayers()
-            {
-                {{ draw_ol|raw }}
-            }
+            {{ draw_ol|raw }}
         </script>
     </fieldset>
 </div>