Map Height Resize solution

[cscrum]

I've really been struggling with this issue for some time and finally came up with a solution that seems to work. Maybe I just missed it in the past, but I thought I was pretty exhaustive in my search. Certainly, none of the examples show this. I have a very complex application using require.js and couchPotato to do lazy loading and I have maps scattered throughout the application so pulling one out to show as an example would take some time since my app is routed with angular route. So here it is.

Include $window in your controller. In this case my leaflet object is wrapped in a div with an id="mapdiv" which has no styling. Then in my controller I have this:

$scope.$watch(function(){
          return $window.innerWidth;  //could be height as well but I use the width for something else
           },function(value){
             $scope.changeMap();
              ...
});

$scope.changeMap = function(){
        leafletData.getMap().then(function(map){
                  $timeout(function(){
                       angular.element("#mapdiv").css('height',$window.innerHeight -20 +"px");
                       //only took 20px away because I have a header at 20px, otherwise the bottom of my                        //map goes offscreen and I have to scroll down.
                       map.invlidateSize();
                   }, 300);
}

I know it requires jquery, but I tried with angular.element(mapdiv)[0].style.height and it never updated. I'm not sure why, but this definitely works. I hope someone finds this useful.

[cgat]

@cscrum I don't think what your doing is necessary. Maybe you could explain the issue you are having. What happens when you resize the map? How is the height set? What's the behaviour you are expecting?

[nmccready]

This issue was moved to angular-ui/ui-leaflet#134

[tombatossals]

I'm going to rework&redesign angular-leaflet-directive to be compatible with Leaflet v1.0. It will mantain almost all its functionality, and will be compatible with the current features of the directive, but I must start from a fresh point, so I'm going to close this issue. If you think it must be worked with the new version, please reopen it.