Leaflet: Incomplete map until resize

[avizcaino]

Hi,

I'm trying to integrate a map in my application following the documentation. And although the code seems right, the map is not fully displayed:

    L.Icon.Default.imagePath = 'vendors/leaflet/images';

    var issuesMap = L.map('map',{
      fadeAnimation: false,
      zoomAnimation: false
    }).setView([51.505, -0.09], 13, {
      reset: true,
      animate: false
    });

    EL.basemapLayer('Topographic').addTo(issuesMap);

As it can be seen, the map is almost empty, just displaying a small tile at the top-left of the screen...

After the resize, the map is fully displayed:

Anyone facing the same problems?

[yohanboniface]

http://leafletjs.com/reference-1.0.0.html#map-invalidatesize is what you need.

[avizcaino]

Thanks but still not working...

Only managed to make it work using a setTimeout, which use I want to skip at all costs...
setTimeout(function(){ issuesMap.invalidateSize()}, 100);

It seems that the invalidateSize() method is running before my map is rendered...

[perliedman]

@avizcaino check if you're running CSS animations or similar - they will of course have to complete before invalidating the size. Depending on why the map takes time before reaching its final size, setTimeout or a similar technique might actually be required, although listening for some kind of event is probably preferable.

Anyway, this is outside the scope of Leaflet.

[avizcaino]

@perliedman it seems is as you say... there has to be another animation that is overriding the invalidateSize method... we decided to keep with the setTimeout solution for now until we find the problem.

Thanks anyway!

[ggcaponetto]

Hello, thanks for all hints. I solved the problem with the following approach:

1. Listen to the css animation events:

window.addEventListener("animationstart", updateLeAfletMap) window.addEventListener("animationiteration", updateLeAfletMap) window.addEventListener("animationend", updateLeAfletMap)

1. then calling map.invalidateSize() in the updateLeAfletMap handler and removing the animation
   listeners after invalidating the size.