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 ma

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