From fde6fb4d97302bce51964fd58d0682f4cfded287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Wed, 29 Jul 2020 14:44:05 +0200
Subject: [PATCH] Initialize only visible maps when page is loaded

Its known that initializing a map when it is inside a hidden element
wont work when hidden element is shown, so its makes sense to
avoid initialization of hidden maps.

When a map lives within a hidden layer we need to initialize the
map after the event of showing that hidden layer, in our case when
admin settings tab is shown.
---
 app/assets/javascripts/map.js      |  2 +-
 spec/system/admin/settings_spec.rb | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/map.js b/app/assets/javascripts/map.js
index 2154d98cb..d160d3a92 100644
--- a/app/assets/javascripts/map.js
+++ b/app/assets/javascripts/map.js
@@ -2,7 +2,7 @@
   "use strict";
   App.Map = {
     initialize: function() {
-      $("*[data-map]").each(function() {
+      $("*[data-map]:visible").each(function() {
         App.Map.initializeMap(this);
       });
       $(".js-toggle-map").on({
diff --git a/spec/system/admin/settings_spec.rb b/spec/system/admin/settings_spec.rb
index b9d0eba95..d9f418d05 100644
--- a/spec/system/admin/settings_spec.rb
+++ b/spec/system/admin/settings_spec.rb
@@ -30,6 +30,30 @@ describe "Admin settings" do
     expect(page).to have_content "Value updated"
   end
 
+  describe "Map settings initialization", :js do
+    before do
+      Setting["feature.map"] = true
+    end
+
+    scenario "When `Map settings` tab content is hidden map should not be initialized" do
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      expect(page).not_to have_css("#admin-map.leaflet-container", visible: false)
+    end
+
+    scenario "When `Map settings` tab content is shown map should be initialized" do
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      find("#map-tab").click
+
+      expect(page).to have_css("#admin-map.leaflet-container", visible: true)
+    end
+  end
+
   describe "Update map" do
     scenario "Should not be able when map feature deactivated" do
       Setting["feature.map"] = false