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.

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.

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:.