Map based on Leaflet and AngularJS not loaded correctly

Question

My map based on Leaflet and AngularJS is not loading correctly. I do not know what's going on but the maps tiles are not laid out as they should be.

This is the base map:

This is my code:

    function setMapPosition(){
        $scope.center = {
            lat: 51.505,
                lng: -0.09,
                zoom: 8
        };


        $scope.defaults= {
            scrollWheelZoom: false
        };

        $scope.tiles = 'openstreetmap';
    }

Answer 1

This problem often occurs due to resizing of any parent container while the map is already initialized.

In order to tell the map that there was a resize you can call map.invalidateSize();.

It could also be that you didn't resize any parent container manually, then a possible solution would be to call map.invalidateSize(); after your document is ready.

To do this with the angular-leaflet-directive try the following inside your controller which injects leafletData.:

leafletData.getMap().then(function(map) {
    map.invalidateSize(false);
});

Answer 2

If you are using leaflet directive for angularjs then

Check if your map container has an ng-cloak attribute. If it's there remove it.

Map not loading when ng-cloak presents

<div class="map-container" ng-cloak>
<leaflet class="map-container" markers="markers" lf-center="center" width="100%">
</leaflet>
</div>

Map is loading when ng-cloak is not present

<div class="map-container">
  <leaflet class="map-container" markers="markers" lf-center="center" width="100%">
  </leaflet>
</div>