登山の計画を立てるとき、「自分の住んでいる地域から、レベルに合った山を距離感つきで知りたい」「ルートの雰囲気を航空写真で見ながら確認したい」と思うことがありました。そこで 居住地・レベル・距離 からおすすめの山を提案し、詳細では 航空写真 + 3D地形 + GPXルート を表示できるWebアプリを作りました。
デモアプリ：山レコメンダー
できること
1) 都道府県 × レベル（初級/中級/上級）で山を提案
トップ画面で以下を選べます。
- 都道府県（居住地）
- レベル（初級 / 中級 / 上級）
- 距離帯（近 / 中 / 遠）
距離帯はざっくり以下の分類です。
- 近：〜50km
- 中：50〜120km
- 遠：120km〜
2) ルート詳細は「航空写真 + 3D地形 + GPX」
詳細画面では Mapbox GL JS を使って、
- 航空写真（衛星画像）ベース
- 地形（DEM）を使った3D表示（誇張表現あり）
- 事前に用意したGPXルートをラインで重畳表示
を行います。さらに、スタート地点・ゴール地点のマーカーも表示されるため、ルート全体像が掴みやすいです。
画面イメージ
- 一覧：条件を選ぶとおすすめの山がカードで並ぶ
- 詳細：3D地形とGPXルートが航空写真上に表示される
技術構成
- Next.js (App Router) + TypeScript
- Tailwind CSS
- React Query（データ取得・キャッシュ）
- Mapbox GL JS（航空写真・3D地形・ルート描画）
- @mapbox/togeojson（GPX → GeoJSON 変換）
GPXルートの扱い
外部アプリ（YAMAP/ヤマレコ/Strava/Garmin等）でGPXを用意し、アプリ側では public/gpx/ に配置します。
- 命名規則：{山ID}.gpx
- 例：mt-takao.gpx（高尾山）
これにより、山ごとに「おすすめルート」を自分で定義していけます。
こだわった点
迫力ある3D表現
- 3D地形の誇張（Terrain exaggeration）
- GlobalViewからズームインするアニメーション
- カメラを回り込ませて立体感を強調
“自分のルート”を載せられる設計
登山は人によって「おすすめ」が変わるので、GPXを差し替えるだけでルートを更新できるようにしました。
今後やりたいこと
- 実ルートに沿った「ルートアニメーション」
- ルートの標高プロファイル表示
- 山情報のデータソース拡充（山域・アクセス・危険箇所など）
- 複数ルートの切り替え（A/B比較）
おわりに
登山計画は「調べる → 地図で見る → ルートを想像する」の繰り返しが多いので、提案（検索）と視覚化（3D+航空写真+GPX） を一箇所にまとめると体験がかなり良くなりました。もし「この機能が欲しい」「この山も追加してほしい」などあれば、気軽にコメントください。
コメント