リーフレットとブートストラップでマップタイルをロードする際の問題

Question

ブートストラップタブに配置されたリーフレットマップを使用してウェブサイトを作成したいとします。私がタブに切り替えると、リーフレットインスタントタイルが正しく読み込まれていない（私は灰色の背景が見えます）。私はそこにサイズが<div>のサイズに問題があると思うブラウザのサイズを変更する場合は、ウィンドウのタイルが正しく読み込まれます。何か案は？ここに私の基本的な考え方があります。

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

Answer 1

トリガは、ウィンドウサイズを変更する：

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

はdemoを参照してください。