Mapbox
地図サービスを提供しているMapboxについて紹介をしたいと思います。
以前は英語のみでしたが、紹介ページは最近日本語対応したようです。しかし管理画面等は英語のみとなっています。
ソフトバンクとの合弁会社ができ、日本語化もこれから更に進んでいくのではないかと思われます。
Mapboxを選択理由としては高いカスタマイズ性と価格のやすさではないかと思います。選択できない理由としては英語UIが多い点と、多くの人がGoogleMapになれすぎてしまった点で、Mapbox自体の問題ではないと考えています。
地図データ
OpenStreetMapを元に地図データが存在していましたが、2019年にゼンリンとの提携が発表され、ゼンリンの地図データも反映されているようです。しかし現在地図を開くとOpenStreetMapの表示のみのためどの程度使われているのかは要確認です。
料金
単純な地図表示の料金が以下となっています（2020年10月現在。サポートプラン等によって利用料金は異なるので必ずホームページの料金ページを確認してください）。
| 月間ロード数 | 1,000件単位で換算 |
|---|---|
| ~50,000 | 無料でご利用可能 |
| 50,001~100,000 | 550円 |
| 100,001~200,000 | 440円 |
| 200,001~1,000,000 | 330円 |
| 1,000,001~ | お問い合わせ |
個人で利用するくらいであれば月に5万回もロードしないことが多いので。無料の範囲、または1000円未満で利用できそうです。
参考：Mapbox 料金
Mapbox Studio
Mapbox Studioという管理画面が提供されており、地図のカスタマイズが可能です。
用途によって地図をこう見せたいという要望が少なからず出てくるはずですが、このMapbox Studioを活用することでユーザー毎の要望をそれぞれ叶えられます。例えば
- 地名表記のない箇所に地名表記の追加
- 建物名の追加
- 道路幅の変更
などが存在します。
地図表示
サインアップすると地図のアクセストークンが手に入るのでそれを利用して表示します。mapboxのjsとcssのCDNを読み込んでdivタグに表示しているだけです（CDNのリンクが公式のものが機能していなかったので過去のものを参照しています）。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Mapboxサンプル</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'ここにアクセストークンをいれてください';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
</body>
</html>
API
APIも豊富に用意されています。ドキュメントはこちら。
例えばジオコーディング（住所から緯度経度を取得）やルート検索、ナビゲーションの利用が可能です。
ただ、ジオコーディング機能をざっと利用した感覚では、日本においては他のyahoo等のAPIサービスと比べて制度が悪い印象でした。この辺りも今後は改善されていくのではと思われます。
Turf.js
ざっくり説明するとTurf.jsはオープンソースJavaScriptライブラリで、これを利用するとより詳細な空間処理やgeojsonデータを利用して地図上に様々なポリゴン描画などができます。Mapbox標準の機能で達成できないこともTurf.jsと組み合わせることでできることの幅がかなり広がります。
Turf.js is an open-source JavaScript library used for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools. Turf can be added to your website as a client-side plugin, or you can run Turf server-side with Node.js. You can find the source code on GitHub.
例えば以下のコードで地図に円を表示することが可能です。円のGeoJsonを作成してそれを地図に読み込ませています。描画の詳細データ自体はTurf.jsにまかせている形です。
注意点としては緯度経度の順ではなく経度緯度の順で基本記述することです。地図サービスのほとんどは経度緯度で利用します。
var longitude = 35.681236;
var latitude = 139.767125;
var point = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [longitude, latitude]
}
};
var radius = 5;
var circle = turf.buffer(point, radius, {units: 'kilometers'});
map.addLayer({
"id": "hoge",
"type": "line",
"source": {
"type": "geojson",
"data": circle
},
"layout": {
},
"paint": {
"line-color": "#f30",
"line-width": 2
}
});
GeoJson
GeoJSONは、JavaScript Object Notation (JSON) を基とした、GISデータを記述するためのフォーマットです（地理空間データ交換フォーマット）。この形式では、Point, LineString, Polygon, MultiPoint, MultiLineString,MultiPolygon,GeometryCollectionをサポートしています。軽量言語であり、Web GISでの利用例が多く見られます。GitHubには、GeoJSONの地図表示機能があり、リポジトリにデータを配置するだけで可視化が可能です。以下では、GeoJSONで点、線、面を記述する手法について解説します。
GeoJsonは先程円の描画でも例に出しましたが、地理データを扱う際には頻繁に出てきます。
{ "type": "Point",
"crs": { "type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates": [138.7309, 35.3628]
}
このような形式で表されます。上記GeoJsonは単純な"1点"なのでかなり単純です。[138.7309, 35.3628]の経度緯度で表される点を意味しています。
"type": "Point"でまず点を意味しています。先程の円では"type": "line"と線を意味していました。
最後に
Mapboxは冒頭にも述べましたが英語UIと知名度を除けば高いカスタマイズ性と低コストを考えるとかなりコストパフォーマンスは高いです。
英語に関してもどんどん日本語化が進んでいるので、かなり期待できるのではないのですしょうか。
単なる地図の埋め込みであればGoogleMapで何の問題もありませんが、商用利用やカスタマイズ利用を考えると今後はMapboxを見る機会がかなり増えそうです。
スクリーンショットなどは権利関係的にダメそうだったので（わからなかった）載せておりませんが、このへん見てもらえると地図の雰囲気やカスタマイズ性がよくわかるのではないでしょうか。
自分自身そこまで使い込んでいるわではないのでいるわではないので認識の齟齬があれば指摘いただけますと幸いです。