Leafletjs map - map.invalidateSize is not working

Question

I use Leafletjs with google map tiles in my application. Here is my HTML markup:

<div class="map-wrap" style="display: none;">                                    
    <div id="map"></div>                    
</div>
<div class="rightNav">
    <a href="#" onclick="$.expandMap();">Expand Map</a>
</div>

In the javascript file, I have the following code:

$.expandMap = function()    {
    if ($(".rightNav").is(':visible')){
        $(".map-wrap").animate({width:'70%'},'400');
        $(".rightNav").hide(0);
        map.invalidateSize();
        //L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);
    }
 }

The map container expands fine. But the map is not expanding. map.invalidateSize is not expanding the map or filling the outer div (container). L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container); also failed.

However, if I resize the browser window a little bit, the map fills the outer container.

So I thought I would try to simulate the window resize programmatically using jQuery. But the too didn't expand the map.

Please let me know what I'm doing wrong.

Sapient

Answer 1

Thanks Yehoshaphat. I did not want a full screen map. I just wanted to expand the map a little bit.

Finally, I got it working using the below code:

$.expandMap = function()    {
    if ($(".rightNav").is(':visible')){
            $(".map-wrap").animate({width:'70%'},'400');
            $(".rightNav").hide(0);
            setTimeout(function(){ map.invalidateSize()}, 400);
        }
 }

The map now expands to fill the expanded space of the outer container. It is not very smooth; but it works.

Sapient

map.invalidateSize(true); worked for me. rather than setting a time out. – Wilds

Answer 2

My recommendation for you is to use the following plugin: https://github.com/brunob/leaflet.fullscreen, it adds a button for full screen which expand the map automatically as in the following map:

:.

Transistorize

Wow, that works great! Question: Did you make your own versions of icon-fullscreen.png and icon-fullscreen-2x? Because that's what I had to do, because the default image left a lot to be desired. I made mine look just like yours — essentially a clone of the YouTube full-screen icon. – Turley

I've created that a long time ago, so i really don't remember :( – Transistorize

Answer 3

The suggestion here to use setTimeout to invalidate the map size is fine, but why waiting instead of invalidating it immediately? You can listen for resize event of the map div. Assuming your map div has id of 'map', do the following:

const map = L.map('map');

const resizeObserver = new ResizeObserver(entries => {
    // This will be called upon every element resize
    for (let entry of entries) {
        if (entry.target.id === "map") {
            console.log(`Size changed to: ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
            map.invalidateSize();
        }
    }
});
resizeObserver.observe(document.getElementById("map"));

You can read more about ResizeObserver at: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

It seems to support all major browsers.

I'm using it to ensure the map is size in invalidated whenever I toggle a sidebar which cause the map div to get smaller or larger

Celerity