• データ
  • ソフトウェア
  • ソリューション
官公庁、自治体向けの製品・サービスはこちら

Mapbox導入ガイド

技術情報  2021.4.6

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

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

 

Mapbox GL JSとは

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


 

Mapbox GL JSの始め方

  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ページに地図を表示する

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



地図に3Dの地形を表示する

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


 

地図に3Dの建物を表示する

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


 

地図にデフォルトのマーカーを表示する

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


 

Mapbox GL JS V2について

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の料金

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

   

最後に

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

関連記事

3D地図とは?Mapboxで3D地図を作成するメリットや活用方法
技術情報  2021.1.8

3D地図とは?Mapboxで3D地図を作成するメリットや活用方法

Webサイトやアプリ、ゲームなどに地図情報や位置情報を使用したいという場合、一般的な2D地図も良いですが、3D地図にする...

Mapboxとは?Mapboxが世界中で採用される理由_メインイメージ
製品情報  2020.7.14

Mapboxとは?Mapboxが世界中で採用される理由

あなたは、Mapbox(マップボックス)をご存知でしょうか。Mapboxとは、世界中で採用されている地図サービスです。近...

Mapboxの料金・価格について
製品情報  2020.10.9

Mapboxの料金は?ユーザー数やセッションで変わる?

オリジナルの地図を作成できるMapboxは、誰でも最初は無料で利用できる地図サービスですが、ユーザー数やセッション数、サ...

ページトップへ