Next.js と Mapbox GL JS を使用した地図アプリケーションのデモプロジェクトです。 デプロイ先は GitHub Pages です。
このプロジェクトは、Next.js (PageRouter/SSG) 上で Mapbox を動作させ、美しくインタラクティブな地図機能を提供するデモアプリです。
- Framework: Next.js (Page Router, SSG export mode)
- Map Library: Mapbox GL JS (react-map-gl)
- Styling: Tailwind CSS 4 + tailwind-variants (tv)
- Language: TypeScript
- Runtime: Node.js 24 (required)
- Package Manager: pnpm >=10 (npm/yarn/bun forbidden)
- Icons: lucide-react
- Notifications: sonner (toast)
- 森林マップ (WMS) の表示: EU Forest Observatory が提供する WMS (Web Mapping Service) を利用し、2020年の森林タイプ分類マップ (
gft2020_v1) を表示します。 - ベースマップ切り替え: Mapbox の衛星写真 (
mapbox://styles/mapbox/satellite-v9) をベースマップとして使用します。 - レイヤー透過度調整: 森林マップレイヤーの透過度をスライダーで調整可能です。
- 座標表示: クリックした地点の経度・緯度を表示します（デバッグ用）。
本デモでは、以下の外部データサービスを使用しています。
- EU Forest Observatory (Public JRC API)
- Service: WMS 1.3.0
- Layer:
gft2020_v1(Global map of forest types 2020 v1) - Details: WMS仕様書 を参照してください。
- mise: 環境管理ツール (Node.js, pnpm のバージョン管理に使用)
- Mapbox アカウントとアクセストークン
mise installpnpm create next-app . --typescript --tailwind --eslintpnpm install react-map-gl mapbox-gl.env.local ファイルを作成し、Mapbox のアクセストークンを設定してください。
MAPBOX_ACCESS_TOKEN=your_access_token_herepnpm devMapbox を使用する際は、トークンのセキュリティ管理が重要です。特に SSG (Static Site Generation) や SPA (Single Page Application) では、トークンがブラウザで公開されるため、適切な設定が必要です。
-
Public Token (
pk.xxxx...):- 用途: フロントエンド (Mapbox GL JS) での地図表示。
- 公開範囲: ブラウザに配信されるため、公開されます。
- 対策: URL制限 (Allowed URLs) を設定し、許可されたドメイン以外での利用を防ぎます。
-
Secret Token (
sk.xxxx...):- 用途: バックエンド (Python等) での Geocoding API, Directions API 利用や、タイルのアップロード。
- 公開範囲: 絶対に公開してはいけません。
- 対策:
.envで管理し、クライアントサイドには一切含めないでください。
Public Token を保護するため、Mapbox アカウント設定で Allowed URLs を設定してください。
- Mapbox Account Dashboard にログインします。
- 対象の Public Token の設定 ("Configure") を開きます。
- Allowed URLs に以下のドメインを追加します。
http://localhost:3000/(開発用)https://your-production-domain.com/(本番用)
これにより、万が一トークンが漏洩しても、許可されたドメイン以外からは使用できなくなります。