Mapboxとは
Mapboxは高いカスタマイズ性とパフォーマンスを持つ地図プラットフォームです。ベクタータイルを採用したMapbox GL JSは、美しいアニメーション・3D地形表示・スムーズなズームが特徴で、デザイン性を重視したアプリケーション開発に強みがあります。世界中の企業がMapboxを採用しており、日本でもFoursquare・Airbnbのような地図を活用したアプリで使われています。
Mapboxの主要サービス
- Mapbox GL JS：ブラウザ用の高性能地図ライブラリ（WebGL使用）
- Mapbox Maps SDK：iOS・Android向けのネイティブ地図SDK
- Mapbox Geocoding API：住所・地名の検索・逆ジオコーディング
- Mapbox Directions API：ルート計算・ナビゲーション
- Mapbox Static Images API：静的地図画像の生成
- Mapbox Studio：地図スタイルのカスタマイズツール
始め方
- Mapbox.com でアカウントを作成
- ダッシュボードからアクセストークン（パブリックトークン）を確認
- npm install mapbox-gl または CDNからMapbox GL JSを読み込む
Mapbox GL JSの基本実装
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12', // 地図スタイル
center: [139.6503, 35.6762], // [経度, 緯度]（東京）
zoom: 12,
language: 'ja' // 日本語表示
});
// マーカーの追加
new mapboxgl.Marker()
.setLngLat([139.6503, 35.6762])
.setPopup(new mapboxgl.Popup().setHTML('東京
'))
.addTo(map);カスタムスタイルの作成（Mapbox Studio）
Mapbox Studioはブラウザ上でドラッグ&ドロップで地図のスタイルをカスタマイズできるツールです。色・フォント・アイコン・ラベルの表示条件など細かく設定でき、ブランドカラーに合わせた独自の地図デザインが作れます。作成したスタイルのIDをMapbox GL JSのstyleパラメーターに指定するだけで反映されます。
独自データの表示（GeoJSON）
Mapboxは独自のGeoJSONデータをレイヤーとして追加する機能が強力です。店舗一覧・不動産物件・センサーデータなどのポイントデータを地図上に可視化できます。
map.on('load', () => {
map.addSource('stores', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [139.7020, 35.6895] },
properties: { name: '渋谷店', category: '飲食' }
}
]
}
});
map.addLayer({
id: 'store-pins',
type: 'circle',
source: 'stores',
paint: {
'circle-radius': 8,
'circle-color': '#FF6B6B'
}
});
});3D地形表示
Mapbox GL JSの3D地形機能を使うと、標高データに基づいた立体的な地形を表示できます。アウトドア・ハイキングアプリや観光サイトで没入感のある地図体験を提供できます。
map.on('load', () => {
map.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
});
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
map.setFog({}); // 大気効果
});Geocoding APIの利用
Mapboxのジオコーディングは日本語の住所・地名検索に対応しています。フォワードジオコーディング（住所→座標）と逆ジオコーディング（座標→住所）が利用できます。日本語のテキスト入力に対するオートコンプリートも実装可能です。
まとめ
MapboxはデザインとパフォーマンスにこだわったWebアプリ・モバイルアプリの地図機能を実装するための強力なプラットフォームです。ベクタータイルによるスムーズな地図表示、Mapbox Studioによるカスタムスタイル、3D地形表示など、他の地図APIにはない独自の強みを持ちます。Google Mapsほど日本のPOI情報は充実していませんが、デザイン性・カスタマイズ性を重視するプロジェクトでは最良の選択肢の一つです。