jQueryのMapbox GL関数を呼び出す

Question

私はMapboxマップをページに持っています。これはjQueryによって制御されるスライドパネルに読み込まれます。

ブラウザのウィンドウサイズを変更してパネルを切り替えると、マップはそのコンテナに部分的にしか表示されないことがよくあります。これはMapbox GL APIの既知の問題です。

そのドキュメントから：

あなたは、ディスプレイのようなもので、最初にマップを非表示にしている場合：なし とJavaScriptで動的にそれを示し、それはいくつかの問題が発生する場合があり 登場すると、正しくサイジング。マップは、 ブラウザの計算ではサイズがないため、ページから非表示になっているときに独自のサイズ を把握できません。

あなたがそう マップ

を検出し、サイズを変更する）（map.resizeを呼び出すことができますMapbox GL JSで

、私は、私のjQueryのコード内からMapboxのmap.resize（）関数を呼び出す必要がありますスライドパネルが開く。問題は、私はそれが動作するように見えることはできません。私は、次のことを試してみた：

1: $(map).trigger('resize'); 
2: $(window.map).resize(); 
3: $(window.map).trigger('resize'); 
as well as 
4: $(window).trigger('resize'); 

事は、私は私のここでの構文とjQueryの中から別のスクリプトに存在する関数を呼び出すための正しい方法についてはよく分からない、です。私は 'map'オブジェクトがグローバルであることを確認しました。map.resize()を私のブラウザの開発ツールコンソールに直接入力します。地図表示を修正する]。私はちょうど関数を渡すjQueryを取得するように見えることはできません。

また、ブラウザウィンドウのサイズを手動で変更すると自動的に 'map.resize（）'関数がトリガされ、マップレンダリングが修正されるため、$(window).trigger('resize')は機能しませんでした。

編集：

私はmapオブジェクトをmapbox.jsスクリプトの中でwindow.map = map;でグローバルに利用できるようにし、mapbox.jsスクリプトがjQueryの前にロードされていることを確認しました。

Answer 1

私はこれを最後に解決することができました。

//inside jQuery map click function 
$("#map").slideToggle(200); 
$(window.map).resize(); 

はjQueryの初心者のビットなので、Iは[idiotically]これらのコマンドを順次発射しかし、当然であろうと仮定し、：問題は次のように私はマップ再描画をトリガするために使用していたコードがあったことでしたslideToggle()アニメーションは非同期です。したがって、スライドパネルが最終寸法に達する前にjQueryがマップボックスresize()を呼び出すようになりました。まだあり

$("#map").slideToggle(200, function() 
{ 
     $(window.map).resize(); 
}); 

：したがって私は行うために必要なすべてが匿名関数にresize()をMapboxするための呼び出しを貼りました

400x300pxのそのフォールバックのサイズをデフォルトにマップを引き起こし、slidetoggle()が完了した後にトリガ地図が最初に400x300pxで表示され、すぐにコンテナを満たすためにすばやくスナップされるというわずかな視覚的な不具合が発生します。しかし、これは少し先のケースだったので、マップを開いたり閉じたりする間にブラウザウィンドウのサイズを変更したユーザーに依存して、それが解決したと判断するのに十分です。