1

The Angular Leaflet Directive looks to the dimensions of the parent container to determine what its correct size is before it make requests from the server for map image tiles. Angular Material Design uses the flexbox CSS property to set dynamic widths and heights of containers.

The problem is Leaflet looks up to the parent and finds a width and height of 0 0. Here is an issue queue question on the problem with almost the solution.

(I already have the answer. Just sharing.)

Adam S
  • 509
  • 10
  • 24

1 Answers1

1

I created a directive that adds the Angular Material flex attribute to the leaflet directive at compile. This makes the container width 100%. Then it gets a promise from Leaflet which is called when the map object is finished rendering. The method map::invalidateSize() is called which forces Leaflet to check the size which is set correctly at this point of the parent container.

(function() {
    angular.module('live')
        .directive('ttLeafletFlexFit', leafletFlexFit);

    leafletFlexFit.$inject = ['$timeout', 'leafletData'];

    function leafletFlexFit($timeout, leafletData) {
        var directive = {
            restrict: 'A',
            compile: compile
        };

        return directive;

        function compile(tElem, attrs) {
            tElem.attr('flex', '');

            // A hack to get Leaflet to fill the flex container.
            // @link https://github.com/tombatossals/angular-leaflet-directive/issues/950
            leafletData.getMap().then(function (map) {
                $timeout(function() {map.invalidateSize()});
            });
        }
    }
})();

Then add an attribute on the leaflet directive element.

<leaflet tt-leaflet-flex-fit></leaflet>
Adam S
  • 509
  • 10
  • 24
  • It took me a little while to figure out that flex and Angular Material was my problem but no time at all to implement your fix. Thanks! – Steve Hynding Sep 22 '16 at 23:42