[初回公開] 2008年05月28日
無償で利用できる地図サービス Mapbox は Google Map のように GUI で操作でき、大手ゲーム会社の位置情報ゲームでも採用されていますが、2024年08月にバージョン 3 系になりました。旧バージョンから新バージョンで変わった内容と、現在の最新バージョンとなる v3.x の利用方法について紹介します。
このページの目次
１．Mapbox とは
Mapbox（マップボックス）は、Web やアプリで高機能な地図を自由にカスタマイズして表示できる地図プラットフォームです。
Google Maps と似た使い方ができ、スタイルの変更、独自のデータ追加、3D 地形表示なども対応しています。
API や SDK が充実しており、開発者にとって柔軟かつ拡張性の高い地図ツールとして、世界中の企業やアプリで利用されています。
２．Mapbox v2 と v3 の比較
Mapbox v2 は 3D 地形やスカイレイヤーなどの視覚的な進化が特徴でしたが、v3 ではさらにグラフィックや処理性能が大幅に向上しています。
特に「Mapbox Standard」スタイルの導入や WebGL2 ベースへの刷新により、見た目も動作もより滑らかでリアルな地図表現が可能となりました。加えて、開発者向けの使いやすさも改善されており、全体的にモダンな仕様へ進化しています。
| 比較項目 | 🟦 バージョン2 | 🟩 バージョン3 |
|---|---|---|
| 🗻 地図の見た目 | 3D地形や空（空・霧）が使える | よりリアルな3D地図が作れる（光や影が付く） |
| 🎨 スタイルの表現 | 色や形を変える基本的な機能がある | 明るさ・影・グラデーションなど、細かい見た目も調整できる |
| 🚀 動きの速さ | 前より速くなった（v1より改善） | より軽く、速くなった（必要なものだけ読み込む） |
| 🌐 ブラウザの技術 | WebGL1 を使って表示 | WebGL2 を使う（新しいブラウザが必要） |
| 💡 ライト（光）や影 | 太陽や空の光をざっくり表現できる | 建物や地形にリアルな光と影を当てられる |
| 📦 レイヤーの追加方法 | どこに追加するかを ID で指定 | 「下・中・上」のように場所を簡単に指定できる |
| 🧠 使える関数や表現 | 基本的な関数が使える | 「明るさの変化」や「ランダム」など、細かい条件が使える |
| 🧱 開発サポート | JavaScript 向け（古い書き方も一部OK） | TypeScript にも対応していて、開発しやすい |
| 💻 対応ブラウザ | IE11 は非対応だが、ほとんどのブラウザで動く | WebGL2 に対応した新しいブラウザが必要（Safariの一部で不具合あり） |
| 🗺️ 新スタイル対応 | 旧スタイル中心 | 新しい「Mapbox Standard」の見た目に対応 |
３．Mapbox バージョン 3 系の新機能
Mapbox GL JS はバージョン 3 系にアップデートされ、地図の表現力や描画性能が大きく向上しました。
従来の機能に加えて、ビジュアルの進化・式の強化・レイヤー管理の改善・内部構造の再設計など、開発者にとってより柔軟で扱いやすい仕様となっています。
以下にその代表的な新機能を紹介します。
3-1．ビジュアル・スタイル関連の追加
Mapbox v3 では新しい公式スタイル「Mapbox Standard」に対応し、光や影、素材感などを地図に表現できるようになりました。
これにより、建物や地形にリアルな質感が加わり、空間的な奥行きや臨場感のある地図が実現可能です。
スカイレイヤーの強化や、明暗でアイコンを切り替える機能なども追加され、より洗練されたデザインが可能になっています。
3-2．表現式の拡張
Mapbox v3 では地図の表示条件を制御する「式（expression）」が大幅に拡張されました。hsl, random, distance などの新しい関数により、色のグラデーション、ランダム要素、光の影響などを柔軟に表現できます。
これにより、動的で多様な地図表現が簡単に作成でき、地図の情報密度やインタラクティブ性が向上しています。
3-3．レイヤー管理の改善
これまでレイヤーの追加位置は ID を指定して細かく調整する必要がありましたが、Mapbox v3 では “top”・”middle”・”bottom” といった「slot」指定が可能になり、スタイルとの統合もより簡単になりました。
また、標準スタイルに従ったレイヤー構造の拡張ができるため、複雑な地図構成でも可読性と保守性を維持しやすくなっています。
3-4．パフォーマンス・内部構造の改善
Mapbox v3 は WebGL2 をベースに再設計されており、描画の効率と安定性が大幅に向上しました。
従来よりも高速に地図を描画できるだけでなく、不要な機能を自動的に除外することで読み込みも軽量化されました。
また、非同期処理やPromiseによる地図読み込みの制御など、開発体験の向上も図られています。
４．Mapbox バージョン 2 系の新機能
地図サービスの Mapbox の最新バージョンとなる v2 系では、「3D 地形の追加」「スカイレイヤーの追加」「カメラ API の追加」「パフォーマンスの向上」の主に 4 つの機能追加や改善が行われています。
4-1．3D 地形の追加
Mapbox v2 系では平面的な表示だった従来の地図表示に加えて、3D を用いることで立体的に描画できるようになりました。
4-2．スカイレイヤーの追加
Mapbox v2 系に追加された 3D 描画により、地図でありながら地平線が表示されるようになったため、空も表示できるようになりました。
場所と時刻に基づいて太陽の位置をシミュレートでき、空の色もグラデーションによって奥行きのある表現ができるようになっています。
4-3．カメラ API の追加
Mapbox v2 系に追加された 3D 描画により、地図を表示するアングルを調整する Camera API が追加されました。
カメラの移動とアニメーション化ができるため、航空機の目線でカメラを移動させることができます。
4-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 系でもマイナーバージョンが変われば動作しない箇所が出ることがあります。バージョンアップの際にはリリースノートを見るなど影響を確認するとよいです。
７．Mapbox v1 からのバージョンアップ方法
この記事では、Mapbox のバージョン 2 系の新機能と利用方法、そしてバージョン 1 系からのアップデート方法について紹介しました。
Mapbox v2 系は 3D 地形やスカイレイヤーの追加、カメラ API の導入、パフォーマンスの向上など、より使いやすく高機能になっています。
また、利用方法は基本的に従来通りで、JavaScript と CSS のパスを最新のものに変えるだけで簡単にバージョンアップできます。
これからも Mapbox の最新情報をチェックし、より良い地図体験を提供できるようにしましょう。
