Mapboxについて
前から気になっていましたが、今回は本気で勉強することになりした。
Mapboxはwebglを活用して、vectortileなどのデータをブラウザで高速に描画するライブラリです。
使うには事前に登録とトークンが必要です。
環境構築
やり方はlinuxのVMにmapbox-gl-jsをインストールし、vscodeのRemote Developmentを使て
コードを読んだり、修正したり、テスト実行したりるす。
VMはvirtualboxでUbuntu64_18.04を入れました。
本家マニュアル
https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md
本家githubにも書いてありますが、こちらのやり方は下記の通りです。
rootユーザで実行しました。
1 | Install lib |
vscodeの設定
Remote Development
Remote DevelopmentのExtensionをインストールします。
手順はネットでいっぱいあるため割愛します。
Remote Developmentを使って、linuxにつなぐため
C:/Users/{user}/.ssh\configファイルに
下記のような設定を追加する。
1 | Host vbox.ubuntu64_18_14 |
key.fileやIPを自分の環境と合わせて変更してください。
flowtype
Remote Developmentよりubuntu64_18_14に接続出来たら、cloneしたmapbox-gl-jsフォルダを開きます。
maxbox はflowtypeを使って開発されています。
そのため、リモートワークスペースにvscodeのExtension
「Flow Language Support」と「vscode-flow-ide」をインストールします。
ディフォルトのvscodeではエラーいっぱい出ますのでjavascript.validate.enableの設定をfaseにする。
setting.json
"javascript.validate.enable": false
debug
debug起動
1 | token作成 |
終り
ひとまず、環境が整えました。これからはコードを分析したり、カスタマイズ
したりして、理解を深めていきたいと思います。