Mapbox GL JSとは？インタラクティブなMAPを作る方法

Maxboxは多様なAPIを連携することができる地図サービスです。
そこで今回は、Mapboxで使えるAPIの種類や使い方、料金の有無について紹介します。

Mapbox GL JSとは、ウェブブラウザ上で、2次元および3次元のインタラクティブマップ（地図上に自由にオブジェクトを表示できるマップ）を生成することができるJavaScriptライブラリです。
Mapbox GL JSはデスクトップやモバイルプラットフォームで使用することが可能です。
またMapbox GL JSを活用することで、MapboxStudioで作成したベクタータイルとMapboxスタイルから自由にカスタムマップを生成することができるようになります。

Mapbox GL JSを始めるには、アクセストークンとスタイルURLが必要になります。
アクセストークンとは、Mapboxのアカウントを作成してサインインすることで自動的に付与されるもので、削除や追加、編集はMapbox Token APIで可能となっています。また、スタイルURLとは、Mapboxがデザインしたスタイル、もしくはMapboxStudioを使用して、独自のスタイルを作成できるようになるものです。
アクセストークンとスタイルURLを準備したら、Mapbox GL JSは以下の手順でクイックスタートすることができます。

①JavaScriptファイルとCSSファイルをHTMLファイルの に含める
②HTMLファイルの に指定のコードを含める

続いては、Mapbox GL JSの主な機能について紹介します。

Mapbox GL JS は、Webページ上にカスタムマップを表示させることができます。
会社や店舗の案内ページにカスタムマップを表示させることで、所在地を分かりやすくアピールすることができます。
また、拡大機能がある地図を表示させる場合でも、初期外観は自由にカスタマイズ可能です。

Mapbox GL JS は、地図上に3Dの地形を表示することも可能です。
地図上に3Dの地形を表示させることは、防災マップとして活用するなど、自然災害のシミュレーションにも役立ちます。
また、3Dの地形でアニメーションを生成して、地形の変化をプレゼンテーションすることもできるでしょう。

Mapbox GL JS は、地形だけでなく3Dの建物を表示することもできます。
建物を3Dにして表示させることで、建築物の完成シミュレーションに活用でき、周辺環境も含めたリアルな再現が可能となります。

Mapbox GL JS のデフォルトマーカーメソッドを使用すれば、地図上にマーカーを追加して表示させることが可能です。
デフォルトマーカーを入れることで、目的地が分かりやすくなるといったメリットがあります。また、地名や住所を使用してマーカーを追加することも可能です。

Mapbox GL JSは、2014年ごろから開発が進められているJavaScriptライブラリですが、最新のバージョン（Mapbox GL JS V2)は2020年12月16日にリリースされました。
Mapbox GL JS V2は従来のMapbox GL JSからの改善点が多く、全てを紹介することはできませんが、以下の点をあげておきます。

レンダリング速度が25～50％程度早くなった
地図を表示させるまでの速度が早くなりました。より高品質な衛星画像データを採用することで、リアルな3Dマップが作成できるようになったり、空の色を調整できるようになったりしました。

また、これまでは利用や再頒布が可能であったものが、V2からは有償になり、ソースコードの特定の部分については改変が制限されるようになりました。

Mapbox GL JSの使用料金は従量課金制となっています。
月間アクティブユーザー数に応じて料金が換算される仕組みです。
具体的な金額は使用するAPIや加入するサポートプランによって異なるので、詳しい料金を確認するためには事前に問い合わせが必要です。

Mapboxは、デザイン性にも機能性にも優れたカスタムマップを作成、活用できるプラットフォームです。JacaScriptライブラリのMapbox GL JSを活用することで、Webページに地図を表示させたり、3D地図を作成したりすることが可能です。ただし、Mapbox GL JSの使用料金は従量課金制をとっており、ページの読み込み数に応じて課金されるシステムですので注意が必要です。 国際航業は、Mapboxサービスの正規販売代理店として、お客様に最適なプランをご案内させていただきます。 予算に合わせたプラン設計や詳しいサービス内容、Mapboxサポートプランの詳しい料金については、WEBもしくはお電話からお気軽にお問い合わせ下さい。

Mapbox