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 もありかなという印象です。

 

 

では、今日はこの辺で。

バイ

 

 

 

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

2018.01.14

Googleマップに表示されるお店のアイコンを消したい

みなさん、こんにちは。

Googleマップ上には色々なお店のアイコンがありますが、用途によってはいらないな~と思うことはありませんか?

・・・

続きを読む

2017.01.24

InfoWindow をカスタマイズする

こんにちは。

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

続きを読む

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは!

今回は、「JavaScript・・・

続きを読む

 - GIS, スタッフ日記

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

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

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