1. はじめに
Mapboxでは、地図情報サービスの開発プラットフォームが提供されています。
今回は JavaScriptライブラリ Mapbox GL JS を使用して、
マップをブラウザ画面に表示してみます。
2. 準備
2-1. アカウント 作成
Mapboxを利用するにあたって、
まず 以下リンク先にて アカウントを作成します。
2-2. アクセストークン 取得
Mapbox を使用するには、アクセストークンが必要になります。
以下リンク先の アカウントページにアクセスし、アクセストークンを取得します。
3. コーディング
簡単なマップ表示のためのコーディングを行っていきます。
3-1. サンプル
東京駅周辺（緯度35.6809591、経度:139.7673068）のマップを表示するHTMLファイル(map.html)を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>地図表示</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<アクセストークン>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [139.7670516, 35.6811673],
zoom: 15
});
</script>
</body>
</html>
map.htmlをブラウザで表示すると、以下のようになります。
3-2. 解説
サンプルコード（map.html）の中身を解説します。
・ JavaScript・CSSファイル 設定
head 要素に、
以下のように Mapboxを使用するための jsファイル・cssファイルを設定します。
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
・ style属性 指定
style 要素にて、HTMLのスタイルを指定します。
ここでは、ウィンドウの高さheightを100%に設定しています。
また、マップ(id:map)のスタイルを、高さheightを100%、幅 widthを100% に設定します。
<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
・ マップ表示
div要素にて、マップ(id:map)をブラウザ画面上に配置します。
<div id="map"></div>
・スクリプト記述
script 要素にて、マップ(id:map)を表示するためのスクリプトを記述します。
<script>
mapboxgl.accessToken = '<アクセストークン>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [139.7670516, 35.6811673],
zoom: 15
});
</script>
以下に、スクリプトの中身を解説します。
- アクセストークン設定
第２項 で取得した アクセストークンを、
変数mapboxgl.accessToken にセット設定します。
mapboxgl.accessToken = '<アクセストークン>';
- マップ設定
Map オブジェクトを作成し、ページにマップを表示します。
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [139.7670516, 35.6811673],
zoom: 15
});
オプションで、マップの細かな設定をすることができます。
ここでは container、style、center、zoom の４項目のオプションを設定しています。
| オプション | 説明 |
|---|---|
| container | Mapbox GL JSがマップをレンダリングするHTML要素、または要素の文字列ID。 |
| style | マップのスタイル。 |
| center | 最初にマップ表示する地理的中心点。 |
| zoom | マップの初期ズームレベル。 |
container 項目には、*’map’*を設定します。
style 項目には、マップのスタイルとして mapbox://styles/mapbox/streets-v11 を指定します。
mapbox Docs - Mapbox styles
https://docs.mapbox.com/api/maps/styles/#mapbox-styles
スタイルはMapbox Studioで作成することもできます。
Mapbox Studio
https://studio.mapbox.com/
center 項目には、東京駅周辺（緯度35.6809591、経度:139.7673068）のマップを表示するために、
[139.7670516, 35.6811673] を設定します。
zoom 項目には、マップの初期ズームレベルとして 15 を設定します。
4. おわりに
今回は、Mapboxを使用して ブラウザ画面に地図を表示してみました。
利用料金については、月間リクエスト数が50,000までであれば無料であり、
個人で使用する分には ほぼ無料で使用することができるかと思われます。
Mapbox 料金
https://www.mapbox.jp/pricing
参考情報
Mapbox GL _ JS API REFERENCE
https://docs.mapbox.com/mapbox-gl-js/api/