Update: Resolving the issue involved directly calling these two methods on the map object:
leafletData.getMap().then(function(map)
{
map.invalidateSize();
map._onResize();
});
Encountering a minor yet bothersome problem with the Leaflet directive for AngularJS (https://github.com/angular-ui/ui-leaflet) and Google Maps plugin (https://github.com/shramov/leaflet-plugins).
At times, markers load fine but the map fails to display. A simple page refresh resolves it temporarily...
Screenshots provided below (captured on mobile but issue persists across desktop browsers):
https://i.stack.imgur.com/nONjB.png
Occasionally the map loads eventually but without proper bounds set:
https://i.stack.imgur.com/OGeOG.png
Desired appearance (achieved most of the time):
https://i.stack.imgur.com/rXmnk.png
Template:
<div class="stations-map" ng-controller="mapCtrl" ng-show="mapObj.visible">
<leaflet layers="mapObj.layers" lf-center="mapObj.center" bounds="mapObj.bounds" markers="mapObj.markers" height="480px" width="100%"></leaflet>
</div>
Controller:
app.controller("mapCtrl", ['$scope', '$filter', 'propertyService', 'groupService', 'leafletBoundsHelpers', function ($scope, $filter, propertyService, groupService, leafletBoundsHelpers){
var properties = null;
var mapObj = {
center: {},
bounds: [],
markers: {},
layers: {
baselayers:
{
googleRoadmap: {name: 'Google Streets', layerType: 'ROADMAP', type: 'google'}
}
},
visible: false
};
...
$scope.$on('data-switched', function()
{
resetMapAndHide();
$scope.mapObj = mapObj;
});}]);
Appreciate any advice or pointers! Thank you.