I want to create website with Leaflet map placed in bootstap tab. If I switch into tab where is Leaflet instantion tiles are not loading correct(I see the grey background). I guess there is a problem with size of a because if resize the browsers window tiles load correctly. Any ideas?
Here is my basic concept.
[GIS] Problem with map tiles loading with Leaflet and Bootstrap
bootstrap-frameworkjavascriptleaflet
Related Solutions
I found that I could use SAFE FME to create the tiles. Since the LL84 wants a bounding box of (-90,-180;90,180) you have to add to the Y axis (row). But then it works fine. The formula is newY = 2**(zoomLevel-2) + oldY; (except for the exception for zoom levels 0 and 1).
Make sure you use the WebMapTiler with GoogleCRS84Quad (GoogleMapsCompatable would get you a spherical mercator, and we want LL84 (EPSG4326).
I am adding the screenshot for the FME project. I assume the same can be done with the gdal2tiles.py
What have you tried and failed to have work? I usually simply set the #map div (or in the case of that above example, a class) to match a CSS rule:
#map {
width: 100%;
}
That should make it fill out the container. You might need to explicitly set height as well. I often do this with jQuery so that my map is never too far out of a certain aspect ratio. Something like:
$(window).resize(function() {
var w = $("#map").width();
$("#map").css("height", w*3/4);
}
This should work to create a map with dynamic width that doesn't look horrible if the window is resized.
Best Answer
Your map's tiles have to be realoaded, which can be done with the method invalidateSize:
Which is not sufficient to solve the issue because firing this method right at the beginning does not have any effect.
You only want to fire it after the tab container has loaded, so you need to know when that happens.
The following code does that and fixes your issue:
PS: I have renamed your variable mymap to map, because most people looking this up will call it map, so make sure to change that.