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

@@ -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>

_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>

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