Map Based On Leaflet And Angularjs Not Loaded Correctly

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

Solution 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);
});

Solution 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

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

Map is loading when ng-cloak is not present

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