CSS Flexbox With Leaflet Map

[esetnik]

When using display: flex in conjunction with angular-leaflet-map I get issues with the tiles not loading. Even when scrolling around the map it seems like the plugin believes that the viewport is a different size.

Has anyone encountered this before?

[cgat]

This isn't an angular-leaflet-directive issue. I have the same problem. I've gotten around this by adding:

leafletData.getMap().then(function (map) { map.invalidateSize(); });

in a $timeout (where the invalidateSize() call happens after your map has initially flexed to size)

[esetnik]

@cgat thanks that works!

[sdebionne]

I have the same problem as well. I run the $timeout from run(), but is it the right solution ?

myApp.run(function($timeout, leafletData) {
    $timeout(function() {
      leafletData.getMap().then(function (map) { map.invalidateSize(); });
    });

Has this issue been reported to leaflet ? Shall we reopen Leaflet/Leaflet#3072 ?

[nmccready]

@sdebionne good point I would report it/reopen.

[nmccready]

But a valid MCVE against raw leaflet is what they will want.

[adam-s]

@sdebionne The $timeout for the function call to map.invalidateSize(); should be in the next tick after the promise is resolved.

    .run(function($timeout, leafletData) {
        leafletData.getMap().then(function (map) {
            $timeout(function() {map.invalidateSize()});
        });
    });

[esetnik]

This isn't working for me. It seems that the timeout is occurring before the flex layout finishes. I can get it to work by increasing the timeout duration but obviously this isn't ideal because the layout duration is device dependent.