[初回公開] 2008年05月28日
無償で利用できる地図サービス Mapbox は Google Map のように GUI で操作でき、大手ゲーム会社の位置情報ゲームでも採用されているが 2020 年 12 月にバージョン 2.0 になり、旧バージョンから新バージョンで変わった内容と現在の最新バージョンとなる v2.x の利用方法について紹介する。
このページの目次
１．Mapbox バージョン 2 系の新機能
地図サービスの Mapbox の最新バージョンとなる v2 系では「3D 地形の追加」「スカイレイヤーの追加」「カメラ API の追加」「パフォーマンスの向上」の主に 4 つの機能追加や改善が行われている。
1-1．3D 地形の追加
Mapbox v2 系では平面的な表示だった従来の地図表示に加えて、3D を用いることで立体的に描画できるようになった。
1-2．スカイレイヤーの追加
Mapbox v2 系に追加になった 3D 描画が追加されたことにより地図でありながら地平線が表示されるようになったため、空も表示できるようになった。
場所と時刻に基づいて太陽の位置をシミュレートすることができ、空の色もグラデーションにより奥行きある表現ができるようになった。
1-3．カメラ API の追加
Mapbox v2 系に追加になった 3D 描画が追加されたことにより地図を表示するアングルを調整する Camera API が追加になった。
カメラの移動とアニメーション化ができるため、航空機の目線でカメラを移動させることができる。
1-4．パフォーマンスの向上
Mapbox の旧バージョンとなる v1 系は他社の地図サービスに比べるとやや表示が遅い傾向であったが、v2 系になり 約 30% の表示の高速化が図られた。
地図上に乗せる各レイヤーの読み込み速度も向上し、道など地形とほぼ同時に地名等が表示されるようになった。
２．Mapbox 2.5 の利用方法
Mapbox の v2.5 の利用方法は従来の Mapbox とほぼ変わりなく、公式サイトから地図をウェブサイト上に表示させるために必要なトークンを取得した上で、HTML 内に必要な JavaScript を記載するだけでよい。
最小限の地図表示のソースは下記となる。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Mapbox Sample</title>
<script src=’https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js’></script>
<link href=’https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css’ rel=’stylesheet’ />
</head>
<body>
<div id=”map”></div>
<script>
mapboxgl.accessToken = ‘{Mapbox のトークンキー}’;
var map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://styles/mapbox/streets-v11’,
center: [135.1827225, 34.6796381],
zoom: 16
});
</script>
</body>
</html>
３．Mapbox v1 からのバージョンアップ方法
Mapbox のバージョン v1 系から最新版となる v2 系にバージョンアップする方法は HTML に読み込む Mapbox の JavaScript と CSS のパスを次のように変更するだけでよい。
<script src=”https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js”></script>
<link href=”https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css” rel=”stylesheet” />↓
<script src=’https://api.mapbox.com/mapbox-gl-js/v2.xx.xx/mapbox-gl.js’></script>
<link href=’https://api.mapbox.com/mapbox-gl-js/v2.xx.xx/mapbox-gl.css’ rel=’stylesheet’ />
その他、Mapbox で利用できるマーカーなどの関数はそのまま利用でき、既に利用中であれば大きく変更する箇所は無い。
ただし、一部 v1.0 系で地名など日本語化のため指定していた setLayoutProperty() は無くても日本語化するようになっているが特に残していても問題は無い。
上記 URL の「v2.xx.xx」の場所はバージョンの数値が入り、例えばバージョン 2.5.0 の場合は「v2.5.0」となり、現在最新バージョンの 2.14.1 であれば「v2.14.1」を指定する。
また、利用できる Mapbox の関数やオプション値はバージョンが変わるごとに変更が入っているため、同じ v2 系でもマイナーバージョンが変われば動作しない箇所が出るため、バージョンアップの際にはリリースノートを見るなど影響を確認するとよい。
関連記事
【利用者に優しい】YouTube の動画に時間を指定したリンクを設定する方法
YouTube にアップロードされている動画の説明文やコメントの中に時間がリンクになったものを見かけることがあり、そのリンクをクリックすると再生中の動画の時間にジャンプする仕組みになっており利用者にとって便利な機能な…
迷惑メールブロックサービスの利用方法とメーラーで振り分ける方法
電子メールは取引先や個人など情報の伝達手段であるとともに、最近ではインターネット上の会員登録でメールアドレスが必要になるのが一般的であるが、利用しているうちに広告メールやフィッシング詐欺など犯罪に関わる迷惑…
YouTube に動画をアップロードすると「動画が長すぎます」と表示されて処理が止まりアップロードできないことがあるが、アップロードできるように動画の長さをカットしたり、分割することなく、設定変更で再生時間の長い動…
