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

Share Improve this question Follow edited Jan 22, 2016 at 9:34 bentrm 1,07833 gold badges1010 silver badges2626 bronze badges asked Jan 21, 2016 at 18:23 Djonatas TenfenDjonatas Tenfen 5344 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>