Destroy maps before leaving the current page

If we do not do this a map could be initialized twice times or more
when restoring a page with a map causing weird UI effects and
loading some map layers also twice times or more.

Need to add a maps array to be able to store all initialized
(visible) maps so we can destroy them when needed. Notice that
we are destroying maps also when admin settings tabs changes
(only visible ones), this is again to avoid to re-initialize map more
than once when users navigate through settings tabs, another
option to the settings issue could be to detect if the map was
already initialized to skip uneeded initialization.

app/assets/javascripts/application.js

@@ -174,6 +174,7 @@ var destroy_non_idempotent_modules = function() {
   App.Datepicker.destroy();
   App.HTMLEditor.destroy();
   App.LegislationAnnotatable.destroy();
+  App.Map.destroy();
   App.SocialShare.destroy();
 };
 

app/assets/javascripts/map.js

@@ -1,6 +1,7 @@
 (function() {
   "use strict";
   App.Map = {
+    maps: [],
     initialize: function() {
       $("*[data-map]:visible").each(function() {
         App.Map.initializeMap(this);
@@ -11,6 +12,13 @@
         }
       });
     },
+    destroy: function() {
+      App.Map.maps.forEach(function(map) {
+        map.off();
+        map.remove();
+      });
+      App.Map.maps = [];
+    },
     initializeMap: function(element) {
       var addMarkerInvestments, clearFormfields, createMarker, editable, getPopupContent, latitudeInputSelector, longitudeInputSelector, map, mapAttribution, mapCenterLatLng, mapCenterLatitude, mapCenterLongitude, mapTilesProvider, marker, markerIcon, markerLatitude, markerLongitude, moveOrPlaceMarker, openMarkerPopup, removeMarker, removeMarkerSelector, updateFormfields, zoom, zoomInputSelector;
       App.Map.cleanInvestmentCoordinates(element);
@@ -88,6 +96,7 @@
       };
       mapCenterLatLng = new L.LatLng(mapCenterLatitude, mapCenterLongitude);
       map = L.map(element.id).setView(mapCenterLatLng, zoom);
+      App.Map.maps.push(map);
       L.tileLayer(mapTilesProvider, {
         attribution: mapAttribution
       }).addTo(map);

app/assets/javascripts/settings.js

@@ -3,12 +3,8 @@
   App.Settings = {
     initialize: function() {
       $("#settings-tabs").on("change.zf.tabs", function() {
-        var map_container;
         if ($("#tab-map-configuration:visible").length) {
-          map_container = L.DomUtil.get("admin-map");
-          if (map_container !== null) {
-            map_container._leaflet_id = null;
-          }
+          App.Map.destroy();
           App.Map.initialize();
         }
       });

spec/shared/system/mappable.rb

@@ -79,6 +79,29 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
       expect(page).to have_content "Map location can't be blank"
     end
 
+    describe "When restoring the page from browser history" do
+      scenario "map should not be duplicated", :js do
+        do_login_for user
+        visit send(mappable_new_path, arguments)
+
+        if management
+          click_link "Select user"
+
+          expect(page).to have_content "User management"
+        else
+          click_link "Help"
+
+          expect(page).to have_content "CONSUL is a platform for citizen participation"
+        end
+
+        go_back
+
+        within ".map_location" do
+          expect(page).to have_css(".leaflet-map-pane", count: 1)
+        end
+      end
+    end
+
     scenario "Skip map", :js do
       do_login_for user
       visit send(mappable_new_path, arguments)