From d634816ef5b4fc9d945a480417cfc1a6707f2c07 Mon Sep 17 00:00:00 2001
From: Nick Sellen <git@nicksellen.co.uk>
Date: Thu, 20 Aug 2020 11:53:58 +0200
Subject: [PATCH] Fix bug with map display issue until resize

As the map tab is created hidden by default, leaflet seems unable
to deal with the sizing properly initially, but we can hook into
the "tab changed" event, and tell leaflet to recalculate the size
after switching tabs
---
 _layouts/service.html    | 7 ++++---
 _layouts/technology.html | 7 ++++---
 assets/js/app.js         | 2 ++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/_layouts/service.html b/_layouts/service.html
index 7d55293..8f1635c 100644
--- a/_layouts/service.html
+++ b/_layouts/service.html
@@ -70,11 +70,12 @@
                 ];
 
                 $(document).ready(function() {
-                    window.app.createMapMultiMarker('map-services', 54.7, -4.2, 6, mapEntries);
+                    var map = window.app.createMapMultiMarker('map-services', 54.7, -4.2, 6, mapEntries);
+                    $('#coops-view-tabs').on('change.zf.tabs', function() {
+                      map.invalidateSize();
+                    });
                 });
 
-                // TODO fix bug with tiles not displaying properly until window resized
-
               </script>
             </div>
           </div>
diff --git a/_layouts/technology.html b/_layouts/technology.html
index 913ff83..dfa4adb 100644
--- a/_layouts/technology.html
+++ b/_layouts/technology.html
@@ -70,11 +70,12 @@
                   ];
 
                   $(document).ready(function() {
-                      window.app.createMapMultiMarker('map-technologies', 54.7, -4.2, 6, mapEntries);
+                      var map = window.app.createMapMultiMarker('map-technologies', 54.7, -4.2, 6, mapEntries);
+                      $('#coops-view-tabs').on('change.zf.tabs', function() {
+                        map.invalidateSize();
+                      });
                   });
 
-                  // TODO fix bug with tiles not displaying properly until window resized
-
                 </script>
             </div>
           </div>
diff --git a/assets/js/app.js b/assets/js/app.js
index 8bcc320..6e6aad9 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -34,6 +34,7 @@ app.createMapSingleMarker = function(mapId, lat, lng, zoom, markerText) {
         var marker = L.marker([lat - 0.0005, lng]).addTo(myMap);
         marker.bindPopup(markerText).openPopup();
     }
+    return window.app.map;
 }
 
 app.createMapMultiMarker = function(mapId, lat, lng, zoom, markersArray) {
@@ -48,6 +49,7 @@ app.createMapMultiMarker = function(mapId, lat, lng, zoom, markersArray) {
           marker.bindPopup(markerVar.markerText);
       });
   }
+  return window.app.map;
 };
 
 //# sourceMappingURL=app.js.map