Experiments Never Fail

Mapbox GL JS をデバッグするまで

オープンソースのベクトル地図ライブラリ Mapbox GL JS のデバッグがしたいので調べました。

Mapbox なにそれ? #

つまり、 Google Maps JavaScript API 以外の方法で、Google Maps のようなベクトル地図レンダリングをしたければ、Mapbox GL JS を使うのが現在の事実上唯一の方法である。

何をしらべたいの?(あるいは何を調べてないの?) #

今回は、その足がかりとして、Mapbox GL JS のデバッグ環境を作ります。

調べたわたしは #

大丈夫か・・・?

デバッグ環境を作る #

用意するもの(というか私の環境) #

すでに「yarn って何?」というレベルです・・・。

デバッグ環境を作る手順1(mapboxのセットアップ) #

https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md に丁寧に書いてあることの写しだけど。

  1. Xcode Command Line Tools を入れる(入ってた。けど一度 Xcode を起動て License に agree しないといけなかった)
  2. brew install node で node をインストール(以前 anyenv/ndenv で入れてあったので余裕)
  3. brew install yarn で yarn というやつを入れる
  4. cd mapbox-gl-js でクローンしたリポジトリに移動して、 yarn install で何かをインストールする(何?)
  5. https://www.mapbox.com/studio/account/tokens/ で、 Mapbox の API キーを生成する。Mapbox アカウントがなければ同じく作る
  6. Serving the Debug Page にあるように MAPBOX_ACCESS_TOKEN=pk.iEkc36fR… yarn run start-debug を実行する

んでブラウザで http://localhost:9966/debug にアクセスすると、地図が表示されるはずである。

この状態で、 Chrome のデベロッパーツールでデバッグできるけど、効率上げるために Visual Studio Code を使う。その手順が以下。

デバッグ環境を作る手順2(VSCodeのセットアップ) #

を参考に。

  1. VSCode で mapbox-gl-js のフォルダを開く
  2. メニュー → デバッグ → 構成の追加 とすると .vscode/launch.json が生成されるので、下記の launch.json のように記述する
  3. 前述の MAPBOX_ACCESS_TOKEN=pk.iEkc36fR… yarn run start-debug をしたまま、VSCode のメニュー → デバッグ → デバッグの開始(F5 でもおk)すると、新しいタブに地図が表示される。
// launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9966/debug/",
"webRoot": "${workspaceRoot}"
}
]
}

how_to_debugging_mapbox_gl_js_01.png

試しにデバッグしてみる #

src/render/draw_line.js の 14行目あたりにブレークポイントを置いてみる(F9 で)。F5 でデバッグ開始する。

地図が表示される過程でブレークポイントで一時停止し、その箇所の「変数」「ウオッチ」「コールスタック」などが見られる。下図は、 drawLine 関数の coords 変数の中身を表示しているところ。描画するラインの頂点が確認できる。

how_to_debugging_mapbox_gl_js_02.png

ちなみに、この drawLine 関数をスキップ(すぐに return)すると、次図のようにラインが描画されない地図になる。

how_to_debugging_mapbox_gl_js_03.png

「デバッグするまで」としてはこんな感じで。

published at tags: mapbox JavaScript geo