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
This commit is contained in:
Nick Sellen 2020-08-20 11:53:58 +02:00
parent 4255eb049e
commit d634816ef5
No known key found for this signature in database
GPG Key ID: 7C3A275C0DC2EFA1
3 changed files with 10 additions and 6 deletions

View File

@ -70,11 +70,12 @@
]; ];
$(document).ready(function() { $(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> </script>
</div> </div>
</div> </div>

View File

@ -70,11 +70,12 @@
]; ];
$(document).ready(function() { $(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> </script>
</div> </div>
</div> </div>

View File

@ -34,6 +34,7 @@ app.createMapSingleMarker = function(mapId, lat, lng, zoom, markerText) {
var marker = L.marker([lat - 0.0005, lng]).addTo(myMap); var marker = L.marker([lat - 0.0005, lng]).addTo(myMap);
marker.bindPopup(markerText).openPopup(); marker.bindPopup(markerText).openPopup();
} }
return window.app.map;
} }
app.createMapMultiMarker = function(mapId, lat, lng, zoom, markersArray) { app.createMapMultiMarker = function(mapId, lat, lng, zoom, markersArray) {
@ -48,6 +49,7 @@ app.createMapMultiMarker = function(mapId, lat, lng, zoom, markersArray) {
marker.bindPopup(markerVar.markerText); marker.bindPopup(markerVar.markerText);
}); });
} }
return window.app.map;
}; };
//# sourceMappingURL=app.js.map //# sourceMappingURL=app.js.map