1. リソースの読み込みとタスク配分の優先付けでマップの読み込み性能を30%高速化

GL JSは平均で30%、スタイルによっては50%以上のマップのロードを改善しました。リソースの読み込みとタスク配分の優先順位が改善されたことで、マップのロードが速くなり、ウェブアプリケーションで利用可能なCPUリソースが増えました。読み込みが高速なサイトは、エンゲージメント、コンバージョン率、顧客維持の向上につながります。通常、ページのロード時間が1秒から3秒になると、バウンス率が32%増加し、2秒以内にロードされるモバイルサイトではコンバージョン率が15%高くなると言われております。

「"0.1秒のサイトの速度改善により、旅行客とのコンバージョンが10.1％増加したことが観察され、平均注文額が1.9％とわずかに増加したことが確認された」
モバイルサイトの速度改善がブランドの収益にどのようにポジティブな影響を与えるかに関するデロイト調査 "Milliseconds make Millions"

2. Camera API

低レベルのカメラコードへのアクセスを提供することで、開発者はマップを他の UI 要素と密に連携させたり、スムーズかつ正確に遷移させたり、ビューポート内で適切なコンテンツをフレーミングしたりするための詳細な調整を行うことができます。Camera API は、3 次元でのカメラの値（位置と回転）への直接のプログラミングを可能にします。具体的には以下の特徴が挙げられます機能が提供されます。

・新機能”lookAt”機能による複雑なカメラの方向の容易な認識
・マップのピッチを60度から85度に拡大
・プラットフォーム固有のアニメーションツールキットや他のアニメーションツールキットとの統合

自在にフォームを制御することが可能なカメラにより、シーンの中心に正確な緯度経度を必要とせずに、カメラの移動やアニメーションを可能にしてくれます。この機能は、焦点を無視したり、複数の焦点を持っていたり、焦点を動的に更新したりする動きに便利です。これにより、Stravaのようなアプリでこれまで不可能だった詳細なアプリの実行をパンオーバーすることができ、飛行機アプリケーションで飛行経路をたどったりすることが可能になります。また、スイープローテーションやフライング、複数焦点間でのイージングのようなビューの方向をスムーズに相対的に動かすのにも便利です。カメラでは、空中のパスに沿って追従したり、一定のカメラ速度で地上のオブジェクトを追跡したり、固定された地点情報を中心に回転する回転盤アニメーションを構築することができます。

3. 3D Terrain

新しい高度な地形レンダリング機能により、すべてのマップ機能が3D地形とシームレスに連動します:。
既存のレイヤータイプは自動的に調整されて地形に合わせて配置され、マーカーは地面に固定されます。タッチとマウスの動作は3D地形に合わせて調整され、スムーズで予測可能なユーザーインタラクションを提供します。

4. exaggeration要素の導入

オプションの exaggeration要素でマップ上の地形を設定すると、浮き出しスケールとして機能します。この値が高いほど、地形の押し出し量が多くなります。この値は、expressionの'interpolate'を使用してズームレベル間で動的に使用することもできます。

5. 高性能DEM（Digital Elevation Model）

新しい Mapbox Raster Data API サービスは、地形標高と起伏の陰影をレンダリングのための高性能 DEM タイルを提供します。地形タイルのサイズは従来のterrain-rgbデータと比較して平均で50%削減され、陰影起伏レイヤーのレンダリングが35%向上しました。

6. Sky API

Camera APIがマップのピッチを上げて地平線を表示すると、Sky APIは地理的な位置と時間帯に基づいて太陽の位置をシミュレートします。空は、大気のデフォルト値で自動的に生成され、グラデーション表現を使用してカスタマイズすることが可能です。

空のレイヤーは、太陽の方向と空の色を設定するための低レベルアクセスを提供します。グラデーションの空はカメラの真上を中心にしており、空が地平線に向かっていくにつれて色が薄くなるように色止めが設定されています。グラデーション空レイヤーでは、空の中心からの距離が0から始まり、空の最も遠い範囲で1になるようにカラーランプを使用しています。ここでは、褪色は 0.8 から 1 の間で設定されており、可視範囲内で傾斜しています。

7. Progressive Map レンダリング

新しいGL JSでは、マップのProgressiveレンダリングが導入され、マップのロード時間が大幅に改善されました。マップコンテンツのプログレッシブなロードにより、土地や水のようなレイヤーは、初回ロード時やズーム、パン、アニメーションの際に、より早くレンダリングされます。これにより、マップのインタラクション（ズームやパンニング）やアニメーションの体験が向上します。マップは技術的にレンダリングと読み込みが速いだけでなく、Progressiveレンダリングによってページが速く感じられるようになり、ユーザーは完全に読み込まれる前にマップの操作をすることができます。

“Visual completeness”とは、そのフレーム内のピクセルが最終的なフレームと何％合致しているかを示します。空白の場合は0%。完了しているときは100%です。

GL JSの初回読み込み時間は、リソースの読み込みとタスク配分の優先順位を改善することで大幅に短縮されます。また、マップの読み込みはブラウザのメイン Javascript スレッドの時間を短縮し、ウェブアプリケーションの残りの部分の読み込みに多くのリソースを残すことができます。読み込み時間は 2 つの方法で測定します：すべてのマップコンテンツをレンダリングしてアイドル状態になるまでの時間として測定される初回読み込み時間と、マップの一部が最初に表示される平均時間の測定値であるSpeed Indexと呼ばれる指標です。

8. 利用料金

他のMapbox APIやSDKと同様に、GL JSは開発者が利用した分だけ支払うことが可能です。GL JS の使用量はマップロードによって課金され、ページロードのメトリクスと関連しています。v2では、Mapオブジェクトがウェブページ上で初期化されるたびにマップロードが発生します。各マップロードには、マップセッションの間、無制限のベクタータイル、ラスタータイル、地形タイルが含まれています。マップロードの価格設定には、開始時の無料枠が含まれています。v2にアップデートしても、99%のMapboxのお客様は価格への影響はありません。使用量が増えると自動的に割引が適用されるボリュームディスカウントを含む、すべてのサービスの価格が公開されています。新しいGL JSの使用は、https://www.mapbox.com/legal/tos/ で入手可能なMapboxサービス規約に従います。開発者はMapboxアカウントとアクセストークンが必要です。

9. コードとコラボレーション

v2 は v1 と同じ方法で利用可能です -- プロジェクトのソースコードは、コミュニティとのオープンなコラボレーションのために https://github.com/mapbox/mapbox-gl-js の Github で利用可能です。SDKバンドルとソースコードは、開発者がライブラリをJavascriptのビルドシステムに含めたり、ツールチェーンと統合したりすることが容易になるように配布されています。GL JSの古いバージョンは、NPMとCDNエンドポイントで公開されています。v1リリースへのアップデートは、重要なブラウザの互換性やセキュリティ上の問題がある場合にのみ、期間限定で行われます。

10. コミュニティ

開発者は公開されているMapbox GL JSリポジトリをフォークし、法律違反や人権侵害の禁止を含むMapbox利用規約に記載されているライセンスの条件を遵守している限り、コードに変更を加えることができます。

早速使ってみましょう

GL JSはこちらにアクセスしていただければ本日より利用可能です。サンプルもありますのでご覧ください。皆様が何を作り出すか楽しみにお待ちしております！