🗺️ Pathfinder

Next.js 15、MapboxGL、TypeScriptで構築されたモダンでインタラクティブなマッピングアプリケーションです。Pathfinderはリアルタイムの天気データ、位置検索、カスタマイズ可能な地図スタイルなどの機能を備え、シームレスなマッピング体験を提供します。

デモ · バグ報告 · 機能リクエスト

✨ 特徴

🌓 ダーク/ライトモード対応
🏢 3D建物の可視化
🔍 オートコンプリート付き位置検索
🌤️ リアルタイム天気情報
📍 現在位置検出
🛰️ ストリート/衛星ビュー切替
📱 完全レスポンシブデザイン
⌨️ キーボードショートカット対応
🎨 Tailwind CSS と shadcn/ui を使用したモダンなUI

🚀 はじめに

前提条件

Node.js 22+
Mapbox APIキー（Mapboxから取得）
OpenWeather APIキー（OpenWeatherから取得）
npm または yarn

インストール

リポジトリをクローン:

git clone https://github.com/shadowoff09/pathfinder.git
cd pathfinder

依存関係をインストールします:

npm install
or
yarn install

環境変数を設定します:
.env.example ファイルを .env.local にコピーします:

     cp .env.example .env.local
     ``
   .env.localを開き、MapboxのAPIキーを追加します:

     
`env
     NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
     NEXT_PUBLIC_WEATHER_API_KEY=your_weather_api_key_here
     `
   APIキーを取得してください：
     Mapbox - 地図機能用
     OpenWeather - 天気データ用
開発サーバーを起動します：

bash
npm run dev
or
yarn dev


ブラウザで http://localhost:3000 を開きます。
🎮 使い方
マップナビゲーション
パン：クリックしてドラッグ
ズーム：スクロールまたはズームコントロールを使用
回転：右クリックしてドラッグ
ビューリセット：Ctrl+Qを押す
機能
検索バーで場所を検索
ストリートビューと衛星ビューの切り替え
ストリートビュー（ズームレベル15以上）で3D建物を表示
天気情報の確認（ズームレベル14以上）
ワンクリックで現在地取得
座標をクリップボードにコピー
🛠️ 使用技術
Next.js 15 - Reactフレームワーク
TypeScript - 型安全
Mapbox GL JS - マップAPI
Tailwind CSS - スタイリング
shadcn/ui - UIコンポーネント
React Map GL - Mapbox GLのReactラッパー
🤝 コントリビュート
コントリビューション歓迎します！プルリクエストをお気軽に送ってください。大きな変更は、まずIssueを開いて変更内容を相談してください。