Mapbox を使ってみる

【概要】

Mapbox は、地図サービスとソフトウェア開発キット（SDK）を提供するプラットフォームである。OpenStreetMap 等のデータをもとに作成された地図を、Web ページ上に表示できる。本記事では、Web ブラウザ向けの JavaScript ライブラリ Mapbox GL JS（2026年6月時点の最新は v3.25.0）を用いて、地図を表示するまでの手順を2つの方法で解説する。1つ目は、HTML に CDN のリンクとコードを直接記述する方法であり、2つ目は、Mapbox のコンソール画面の「Integrate Mapbox」ウィザードに沿って進める方法である。いずれも同じ結果（地図が表示される HTML ファイル）が得られるため、自分に合う方法を選べばよい。

独自のタイルマップをサーバにアップロードする機能（Mapbox Studio によるカスタムスタイル等）は本記事では扱わない。利用条件・料金は、用途（学習目的か商用目的か等）に応じて各自の責任で公式の料金ページを確認すること。

【その他情報】

本記事の作業は、Windows のパソコン上で、テキストエディタと Web ブラウザ（Microsoft Edge, Google Chrome など）のみで完結する。Python その他の開発環境のインストールは不要である。GPU 搭載機かどうかにかかわらず動作する。

ファイルの開き方: 作成した .html ファイルは、ファイルをダブルクリックして（または Web ブラウザにドラッグ＆ドロップして）開く。一部のブラウザやセキュリティ設定では、ローカルファイル（file://）からの読み込みが制限され、地図が表示されないことがある。その場合は別の Web ブラウザで開く（上級者は、簡易な HTTP サーバ経由で開く方法もある）。
無料枠: Mapbox には無料利用枠があり、学習用途であれば通常はこの範囲で利用できる。無料枠の条件は変更されることがあるため、最新の条件は上記の料金ページで確認すること。
WebGL: Mapbox GL JS は WebGL を利用する。現在の Windows 環境では標準で動作するが、ごく古い環境、WebGL が無効化された環境、一部のリモートデスクトップ環境では地図が表示されないことがある。

【目次】

Mapbox のサインアップ
アクセストークンの取得
方法１：CDN のリンクを直接記述して地図を表示する
方法２：コンソールの「Integrate Mapbox」ウィザードを使って地図を表示する
地図のスタイルを切り替える
演習

【関連する外部ページ】

Mapbox のサインアップ

Mapbox のサービスを利用するには、アカウントの作成（サインアップ）が必要である。サインアップは無料で行える。

Mapbox の公式 Web ページを開く。
https://www.mapbox.com
「Start building」（または「Sign up」）をクリックし、アカウント作成を開始する。
サインアップ画面で必要事項を入力する。
Username（ユーザ名）: アルファベットと数字で設定する。

Email: 電子メールアドレスを入力する。

Password: 画面に表示される要件に従って設定する。
登録した電子メールアドレス宛に確認メールが届くことがある。届いた場合は、メール内のリンクをクリックしてアカウントを有効化する。
引き続き Mapbox にサインインした状態にしておく。次のセクションは、サインイン済みであることを前提とする。

アクセストークンの取得

Mapbox GL JS で地図を表示するには、公開アクセストークン（public access token）が必要である。トークンは「pk.」で始まる文字列で、アカウントごとに発行される。これにより、地図の利用がどのアカウントの利用かが識別される。トークンを設定しないと地図は表示されない。

Mapbox にサインインした状態で、アカウントのコンソールを開く。
https://console.mapbox.com/account/access-tokens/
「Default public token」（既定の公開トークン）として表示されている、pk. で始まる文字列を確認する。
このトークン文字列をコピーして控えておく。後の手順でコードに貼り付けて使用する。

公開トークン（pk.）は Web ページの JavaScript 内に記述するため、ブラウザの開発者ツールから閲覧できる。不正利用を防ぐ場合は、コンソールの「URL restrictions」機能で、トークンを使用できる Web サイトの URL を制限する。秘密トークン（sk.）はクライアント側のコードに記述しないこと。

方法１：CDN のリンクを直接記述して地図を表示する

HTML ファイルを 1 つ作成し、Web ブラウザで開いて地図を表示する。手順は、ライブラリの読み込み（CDN 利用）、地図を表示する領域（コンテナ）の用意、地図の生成、の 3 段階である。前セクションで取得したアクセストークンを使用する。

テキストエディタを使用して、.html 形式のファイルを新規作成する。
ファイル名は「1.html」のように、拡張子を .html として保存する。

次の内容をエディタに貼り付ける。YOUR_MAPBOX_ACCESS_TOKEN の部分は、前セクションでコピーした自分のアクセストークン（pk. で始まる文字列）に置き換える。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Mapbox GL JS map</title>
  <!-- Mapbox GL JS の CSS と JS を CDN から読み込む（2026年6月時点の最新は v3.25.0） -->
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    /* 地図を表示する領域（大きさ）の指定。ここでは画面全体に表示する */
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <!-- 地図を表示するコンテナ -->
  <div id="map"></div>
  <script>
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';   // 自分のアクセストークンに置き換える

    const map = new mapboxgl.Map({
      container: 'map',                            // 地図を表示するコンテナの id
      style: 'mapbox://styles/mapbox/streets-v12', // スタイル（地図の見た目）
      center: [139.7670, 35.6814],                 // 中心位置 [経度, 緯度]（東京駅付近）
      zoom: 12                                      // ズームレベル（拡大率）
    });
  </script>
</body>
</html>

注意点を以下に示す。

CDN のバージョン: URL 内の v3.25.0 は本記事執筆時点（2026年6月）の例である。最新バージョンは公式の「Get started with a CDN」で確認できる。バージョンを大きく上げると、API（コードの書き方）の変更によりコードの修正が必要になる場合がある。まず記載のバージョンで動作確認し、その後で更新する。
center は [経度, 緯度] の順: 一般的な「緯度・経度」とは順序が逆である。
コンテナには大きさが必要: #map に幅と高さ（上記では width と top/bottom）を指定しないと、地図は表示されない。

ファイルを上書き保存し、作成した 1.html を Web ブラウザで開いて（ファイルをダブルクリック、またはブラウザにドラッグ＆ドロップ）、地図が表示されることを確認する。
地図の操作を確認する。
- マウスの左ボタンを押しながらドラッグすると、地図が移動（パン）する。
- マウスホイールを回転させると、地図の縮尺（ズーム）が変化する。
- マウスの右ボタンを押しながらドラッグすると、地図が回転・傾斜（ローテーション／ピッチ）する。

地図が表示されない場合は、次を確認する。YOUR_MAPBOX_ACCESS_TOKEN を自分のトークンに置き換えたか、トークンが pk. で始まる有効な公開トークンか、#map に幅・高さが指定されているか。トークンを置き換えていない、または無効な場合は、地図が表示されず、ブラウザのコンソールに認証エラー（401 など）が表示される。エラーメッセージは、ブラウザの開発者ツール（多くのブラウザで F12 キーで開く）の「コンソール」で確認できる。それでも表示されない場合は、先頭の note ブロックに記載した file:// の制限や WebGL 環境を確認する。

方法２：コンソールの「Integrate Mapbox」ウィザードを使って地図を表示する

方法１では HTML を自分で組み立てたが、Mapbox のコンソール画面には、必要なコードを画面の案内に従って生成できる「Integrate Mapbox」というウィザードがある。仕上がる HTML の内容は方法１とほぼ同じである。

Mapbox の公式 Web ページを開く。
https://www.mapbox.com
「Start building」をクリックし、サインアップ済みのため「サインイン」を選択する。
サインアップ時に設定したユーザ名とパスワードを入力し、「Sign in」をクリックする。
Maps SDK（Software Development Kit：地図機能を組み込むためのライブラリ）を導入するため、「Integrate Mapbox」をクリックする。
JavaScript 版の Maps SDK（Mapbox GL JS）を使用するため、「JS Web」をクリックする。
CDN（Content Delivery Network：コンテンツ配信ネットワーク）を利用するため、「Use the Mapbox CDN」をクリックする。
HTML コードが表示されるので、内容を確認する。表示されるコードには、CDN の link・script タグと、自分のアクセストークンが含まれる。
テキストエディタを使用して .html 形式のファイルを新規作成し、表示された HTML コードを貼り付ける。
ファイル名は「2.html」のように、拡張子を .html として保存する。
作成した .html ファイルに、html、head、body の各タグを追加する。
Mapbox の画面に戻り、「Next」をクリックする。
追加の HTML コードが表示されるので、内容を確認する。このコードには、地図を表示する div と、地図を生成する script が含まれる。
表示されたコードを、作成中の .html ファイルの body タグ直下に貼り付ける。
ファイルを上書き保存し、Web ブラウザで開いて動作を確認する。
地図の操作を確認する。マウスの左ボタンを押しながらドラッグすると地図が移動し、マウスホイールを回転させると地図の縮尺が変化する。マウスの右ボタンを押しながらドラッグすると地図が回転・傾斜する。

地図が表示されない場合は、アクセストークン（pk. で始まる文字列）が正しく設定されているかを確認する。トークンが未設定または無効の場合、地図は表示されず、ブラウザのコンソール（多くのブラウザで F12 キーで開く開発者ツール内）に認証エラーが表示される。

地図のスタイルを切り替える

スタイル（Style）とは、地図の見た目を定義するルールの集合である。Mapbox では複数の標準スタイルが提供されており、用途に応じて切り替えられる。スタイルは、地図を生成するコードの style に mapbox://styles/mapbox/<スタイル名> の形式で指定する。この操作は、方法１・方法２のどちらで作成した HTML ファイルでも同様に行える。

主なスタイル名（2026年6月時点）は以下のとおりである。

standard（mapbox/standard）: 3D 表現にも対応した、現在の既定スタイル。
streets（mapbox/streets-v12）: 道路や交通網を中心とした一般的な地図。
outdoors（mapbox/outdoors-v12）: 等高線やハイキングコースなど、屋外活動向けの地形情報を含む地図。
satellite（mapbox/satellite-v9）: 衛星写真で構成された地図。道路名やラベルは表示されない。
satellite-streets（mapbox/satellite-streets-v12）: 衛星写真に道路名やラベルを重ねた地図。
light（mapbox/light-v11） / dark（mapbox/dark-v11）: 明るい／暗い配色の地図。

利用可能なスタイルの一覧は公式ドキュメントを参照すること。-v10 など古い末尾番号のスタイル名は新しい版（-v12 等）に置き換えられているため、最新の版番号を使用する。

方法１または方法２で作成した .html ファイルをテキストエディタで開く。
スタイルを outdoors に変更する
style の値のみを次のように書き換えて上書き保存し、Web ブラウザで再読み込み（F5 キー）して表示を確認する。
```
      style: 'mapbox://styles/mapbox/outdoors-v12',
```
スタイルを satellite に変更する
style の値のみを次のように書き換えて上書き保存し、Web ブラウザで再読み込み（F5 キー）して表示を確認する。
```
      style: 'mapbox://styles/mapbox/satellite-v9',
```
スタイルを satellite-streets に変更する
style の値のみを次のように書き換えて上書き保存し、Web ブラウザで再読み込み（F5 キー）して表示を確認する。
```
      style: 'mapbox://styles/mapbox/satellite-streets-v12',
```
（応用）表示位置を変更する
スタイルとは別に、表示位置や拡大率も変更できる。center（中心位置）と zoom（ズームレベル）の値を書き換えて上書き保存し、Web ブラウザで再読み込み（F5 キー）して表示を確認する。
```
      center: [135.5022, 34.6937],  // 大阪付近 [経度, 緯度]
      zoom: 14
```

style の値を書き換えて保存し、ブラウザを再読み込みするたびに、地図の見た目が切り替わる。ボタン等で動的に切り替える場合は、Map オブジェクトの setStyle() メソッドを用いる（公式の例「Change a map's style」を参照）。

演習

演習 1．地図を表示する

手順

「アクセストークンの取得」に従い、自分の公開アクセストークン（pk. で始まる文字列）を控える。
「方法１：CDN のリンクを直接記述して地図を表示する」の HTML を 1.html として作成し、YOUR_MAPBOX_ACCESS_TOKEN を自分のトークンに置き換える。
1.html を Web ブラウザで開き、地図が表示されることを確認する。
center を自分の住む地域の [経度, 緯度] に書き換え、上書き保存して再読み込み（F5 キー）する。

ヒント

center は [経度, 緯度] の順で指定する。
地図が表示されない場合は、「方法１」末尾の note（トークンの置き換え、コンソールの認証エラー、file:// や WebGL の確認）を参照する。

考察ポイント

zoom の値を変えると、表示範囲と表示される地名の詳しさがどう変化するか。
指定した center の地点が、地図の中心に表示されているか。

演習 2．スタイルを切り替えて比較する

手順

演習 1 で作成した 1.html を、テキストエディタで開く。
初期状態では style に mapbox://styles/mapbox/streets-v12 が設定されている。まずこの状態で表示を確認する。
style の値を mapbox://styles/mapbox/outdoors-v12 に書き換え、上書き保存して再読み込み（F5 キー）し、表示を確認する。
同様に、style の値を satellite-v9、satellite-streets-v12 に順に書き換え、それぞれ表示を確認する。
同一の center と zoom のまま、各スタイルの表示を比較する。

ヒント

スタイル URL は mapbox://styles/mapbox/<スタイル名> の形式である。
書き換えるのは style の値のみで、center と zoom は変更しない。

考察ポイント

satellite-v9 と satellite-streets-v12 で、道路名やラベルの表示にどのような違いがあるか。
streets-v12 と outdoors-v12 で、地形や等高線の表現にどのような違いがあるか。
streets-v12 と satellite-streets-v12 で、同じ地点の見え方がどう異なるか。