データ切り替えタブがリーフレット マップのダウンロードを妨げる

この質問は、データ切り替えタブ内のリーフレット マップが適切にダウンロードできない場合に発生します。 。マップは以前はタブの外に表示されたときに機能していました。

原因

リーフレットはコンテナ サイズを読み取るときにマップを初期化します。コンテナーが最初に非表示になっている場合、またはその寸法が変更されている場合、Leaflet はその変更を認識できないため、タイルが正しくダウンロードされません。この問題は、Bootstrap などのフレームワークでタブまたはモーダル パネルを使用する場合によく発生します。

解決策

コンテナ サイズの更新をトリガーするには、次のときに、map.invalidateSize() を呼び出します。タブパネルが表示されます。これは、タブ ボタンのクリックのリスナーを通じて実行できます。

タブ ボタンのクリック リスナーの実装

タブ ボタンのクリック リスナーの実装については、スタック オーバーフローを参照してください。またはフレームワーク固有のドキュメント。