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

Where is the code that actually inits the map? Which library are you using combining Leaflet and Angular. If none, you'll need to provide your code that is drawing the map in the first place. — bentrm, Jan 22 '16 at 09:37

score 7 · Answer 1 · answered Feb 04 '16 at 13:30

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

score 2 · Answer 2 · edited Mar 23 '16 at 07:00

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>

Map based on Leaflet and AngularJS not loaded correctly

2 Answers2

Linked