MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2018.03.04

Mapbox

mapbox

みなさん、Mapbox というサービスはご存知ですか?

Mapbox は、Google Maps APIs によく似たWEB地図サービスです。最近利用者が増えているようなので、本ブログでも簡単にご紹介いたします。

Mapbox のサイトはこちらです

 

 

Mapboxでできること

地図表示道路地図、航空写真が表示可能です。
地図デザインのカスタマイズOpen Street Map をベースに様々なカスタマイズが可能です。
REST APIs

以下のようなAPIがあります。

Directions API: ルート検索
Geocoding API: ジオコーディング
Static API: 静的画像
Matrix API: 複数地点のルート距離、時間取得
Map Matching API: 位置情報を道路上にマッチング

※上記以外にもあります。

モバイルSDKAndroid、iOS版開発ツールが用意されています。

 

料金

無料プランから、アクセス数に応じた有償プランがあります。

 Web appsMobile SDKs
Free Plan50,000 map views/月
50,000 geocode requests/月
50,000 directions requests/月
50,000 Matrix elements/月
50,000 monthly active users
50,000 geocode requests/月
50,000 directions requests/月
50,000 Matrix elements/月

Free Planを超えた場合

0.50ドル

1,000 map views
1,000 geocode requests
1,000 directions requests
1,000 Matrix elements/月
500 monthly active users
1,000 geocode requests
1,000 directions requests
1,000 Matrix elements/月

 

商用利用

上記プランの価格 + 499ドル

 

 

利用方法

Mapbox のサイトよりアカウントを登録します。アカウントを登録すると、自動的に Access Tokens が発行されます。この Access Tokens を使用し、地図の表示や各種APIをコールすることができます。

 

 

mapbox

 

 

Mapbox の地図を表示するときは、Mpabox 用の css と js ファイルをロードします。下2行は、ジオコーデングのコントロールを使用するためのものです。

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />

 

JavaScript のソースは以下の通りです。以下の例では、Mapbox 標準のスタイル「streets-v9」を指定しています。航空写真を利用する際は、「satellite-v9」や「satellite-streets-v9」を指定してみてください。

// アクセストークン設定
mapboxgl.accessToken='xxxxxxxxxxxxxxxxxxxxx';
// 地図生成
var map = new mapboxgl.Map({
    container: 'mapid',
    center: [139.7, 35.7],
    zoom: 10,
    styles: 'mapbox://styles/mapbox/streets-v9'
});
// Navigation Control
map.addControl(
 new mapboxgl.NavigationControl(), 'top-left'
);
// Geocoder Control
map.addControl(
    new MapboxGeocoder({
        accessToken: mapboxgl.accessToken
}));

 

Full Screen

 

標準では注記が全て英語で表示されてしまいますが、Mapbox はカスタマイズが可能ですので、注記を全て日本語にすることができます。

下記イメージは、Mapbox のスタイルを作成する「Mapbox Studio」のページです。非常に多くのレイヤに分かれているので、細かく設定ができます。このページで、注記の言語を設定することができます。左側メニューに表示されている「T」はラベルを意味しますので、そちらをクリックし「name_en」の箇所を「name」に変更すると、ラベルが日本語になります。

 

mapbox studio

 

 

作成したスタイル保存すると、スタイルのURL「mapbox://~」が作成されますので、このURLを先程の「styles: ~ 」に設定します。

 

mapbox styles

 

日本語に変更したスタイルを設定したサンプルです。どうですか?日本語になりましたね。

Full Screen

 

今回使用したスタイルの色合いは、Googleマップ似ていますねー。しかし、注記や施設などの情報量はどうしても少ないようです。その辺りが問題ないのであれば、十分利用可能かと思います。また、Mapboxは、LeafletというJavaScriptの地図ライブラリがベースになっていますので、今回作成したスタイルは、Leaflet でも表示することができます。

Leaflet のページ

 

 

Mapboxは、少し前に Softbank が出資したため、これからの成長が期待できるサービスです。

個人的には、よりGISに凝ったサイトであれば、ライブラリが豊富で WebGL に対応した Mapbox もありかなという印象です。

 

 

では、今日はこの辺で。

バイ

 

 

 

【関連記事】こんな記事も読まれています

2017.07.29

Geocoding API で取得できる住所タイプの仕様が変わります

みなさん、こんにちは。

2017年9月2018年1月以降に Google Maps Geocoding API の仕様が・・・

続きを読む

2017.01.24

InfoWindow をカスタマイズする

こんにちは。

Google Maps 上に描画したマーカーをクリックしたときに表示する吹き出し、通称「InfoWindow」をカスタマイズして・・・

続きを読む

2017.03.05

Google マップにKMLファイルをロードする

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します。<・・・

続きを読む

 - GIS, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)