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

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

• javascript
• angularjs
• leaflet
• matplotlib-basemap

• djonatas..br/img0001.png – Djonatas Tenfen Commented Jan 21, 2016 at 18:30
• 1 <leaflet center="center" tiles="tiles" defaults="defaults" width="100%" height="480px"></leaflet> – Djonatas Tenfen Commented Jan 21, 2016 at 18:31
• 1 Where is the code that actually inits the map? Which library are you using bining Leaflet and Angular. If none, you'll need to provide your code that is drawing the map in the first place. – bentrm Commented Jan 22, 2016 at 9:37

2 Answers 2

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

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>