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.
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.
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:.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With