Problems with loading of map tiles with leafletjs and bootstrap

Question

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 <div> a because if resize the browsers window tiles load correctly. Any ideas? Here is my basic concept.

https://jsfiddle.net/rjper9nz/6/

Possibly a duplicate of https://stackoverflow.com/questions/15089541/leaflet-map-loading-half-greyed-tiles? and others - just run `invalidateSize()` on the map instance when the parent container becomes visible. — IvanSanchez, Jan 18 '17 at 14:58

score 3 · Accepted Answer · answered Jan 18 '17 at 16:20

3

Trigger resize to window :

$(document).on('click','[href="#menu1"]',function(){
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    },300);
});

See demo.

answered Jan 18 '17 at 16:20

talkhabi

2,669
3
20
29

Problems with loading of map tiles with leafletjs and bootstrap

1 Answers1