Merge #17036 - Fix: Don't add multiple OpenLayers maps, remove listeners on dispose

Pull-request: #17036

Signed-off-by: William Desportes <williamdes@wdes.fr>

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();
+        map = drawOpenLayers();
-        return 1;
     }
-    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();
         }
     });
 

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;

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>