Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leafletjs map - map.invalidateSize is not working

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.

like image 917
user3439044 Avatar asked Mar 25 '14 18:03

user3439044


2 Answers

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.

like image 151
user3439044 Avatar answered Nov 20 '22 00:11

user3439044


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:enter image description here.

like image 2
Yehoshaphat Schellekens Avatar answered Nov 19 '22 23:11

Yehoshaphat Schellekens