空、描画角度、地形など、3D地図の高度なカスタマイズが可能に。マップボックスが地図開発基盤プロダクトを刷新

地図サービスの開発プラットフォームを提供するマップボックス・ジャパン合同会社（本社：東京都港区虎ノ門、最高経営責任者CEO：高田 徹）は、新しいWeb SDKであるGL JS vesion2（注１）を実装してMapbox 3Dをリリースしたことをお知らせいたします。これにより、全てのマップが3Dで表示されるようになり、標高の高い地形の表示、空のカスタマイズ、新しいカメラAPIの利用、パフォーマンスの向上を可能にします。

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

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

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

 

 

Sky APIとは

Camera APIがマップのピッチを上げて地平線を表示すると、Sky APIは地理的な位置と時間帯に基づいて太陽の位置をシミュレートします。空は、大気のデフォルト値で自動的に生成され、グラデーション表現を使用してカスタマイズすることが可能です。
空のレイヤーは、太陽の方向と空の色を設定するための低レベルアクセスを提供します。グラデーションの空はカメラの真上を中心にしており、空が地平線に向かっていくにつれて色が薄くなるように色止めが設定されています。

革新的なマップレンダリングで地図の読み込み性能を30%高速化
新しいGL JSは、リソースの読み込みとタスク配分の優先順位を改善することで大幅に初回読み込み時間短縮しました。また、マップの読み込みはブラウザのメイン Javascript スレッドの時間を短縮し、ウェブの残りの読み込みに多くのリソースを残すことができます。読み込み時間は 2 つの方法で測定します。

1. 全てのマップコンテンツをレンダリングしてアイドル状態になるまでの時間として測定される初回読み込み時間（Load time benchmarks）
2. マップの一部が最初に表示される平均時間の測定値であるSpeed Indexと呼ばれる指標です。（Speed index benchmarks）

 

Webの読み込み時間のvesion1とversion2の比較

読み込みが高速なサイトは、エンゲージメント、コンバージョン率、顧客維持の向上につながります。通常、ページのロード時間が1秒から3秒になると、バウンス率が32%増加し、2秒以内にロードされるモバイルサイトではコンバージョン率が15%高くなると言われています。

注釈
（注１）Mapbox GL JS：ウェブ上のカスタマイズ可能なベクターマップ用のJavaScriptライブラリのこと。
　　　　Mapbox Style 仕様とWebGL（ウェブブラウザで3次元コンピュータグラフィックスを表示させる
　　　　ための標準仕様）を使用して、Mapboxベクタータイルから地図データをレンダリングしています。
　　　　Mapbox GL JSには、AndroidおよびiOSアプリケーション用のSDKも含まれます。


会社概要
2020年3月に米国Mapbox Inc.とソフトバンク株式会社の合弁会社として設立されたマップボックス・ジャパン合同会社は、地図領域のリーディングカンパニーとして地図サービスの開発プラットフォームを開発者向けに提供しております。高品質な技術基盤・高精度な地図情報と地図上でのデータビジュアライゼーションやカスタマイズ性に特長を持つサービスは豊富な採用実績があり、代表的には、ヤフー株式会社の「Yahoo! MAP」やPayPay株式会社の「PayPay」内でご活用いただいております。

• 社名:マップボックス・ジャパン合同会社
• 設立日:2020年3月30日
• 所在地:東京都港区虎ノ門

   

• 事業内容:地図サービスの開発プラットフォーム提供、地図を活用した新規サービスの開発
• URL:​https://www.mapbox.jp/

■本記事の詳細は公式noteをご覧ください。
https://note.com/mapbox_japan/n/na355a7012cfd

■下記媒体にて導入事例の紹介など情報発信を行っております。ぜひご覧ください。
・公式note:​https://note.com/mapbox_japan
・公式Twitter:​https://twitter.com/mapbox_jp

■Mapbox Japanに関するお客さまからの問い合わせ先
https://mapbox.jp/contact