CODEWITHSUNDEEP
jquerycsstwitter-bootstrapleafletmapbox
user2906420
user2906420

Reputation: 1269

Refresh/Reload div tag container after size change

I am using bootstrap with Jquery/Javascript and Leaflet maps. I have pBody div which has the map div within it. I also have a sidebar div. The toggle switch above collapses the sidebar div and should increase the width of pBody div from span9 to span11. The collapse is working fine which is in CSS but the problem is the map is not redrawing to the new size of the div. I have tried with the code below:

$("#toggle").click(function (event) {
    event.preventDefault();

    $('#pBody').toggleClass('span9');
    $('#pBody').toggleClass('span11');

     //L.Util.requestAnimFrame(map.invalidateSize, map, !1, panelBody._container); 
     //I have tried this above line but still does not work. 

     $("#map").width("100%");
     map.invalidateSize(false); //this is leaflet function which should redraw the map. 
});

The extra space generated in the map div is filled with grey. And everytime you zoom in/out of the map it will sometimes draw the map fully to the whole size or sometimes includes the grey space.

Upvotes: 2

Views: 2296

Answers (1)

user3104423
user3104423

Reputation:

Is it possible that your map variable is out of scope and cannot be accessed from within the click function?

I've setup a jsfiddle with a minimal example where I can not see the behaviour, but when you comment out the 

map.invalidateSize(false);

line you can see the grey space.

Upvotes: 2

Related Questions