天孫、寄り道マップ🌋｜霧島遠征のあしあと

🗺 国土地理院タイルの3D立体地図（立体/平面・盛り調整・標準/写真/地形）＋標高表示
📍 展示会場・神話スポット・宿などのガイドピンを最初から収録
👣 Googleログインで自分の寄り道スポットを登録（カテゴリ・写真・コメント・リンク・X）
❤️ いいね／行ったよのリアクション
🔎 地名検索（地理院）＋周辺検索（OSM: コンビニ・温泉・道の駅…）
🐈 トラちゃん・ワジロウちゃんをなでると鳴いてお返事してくれます（音声ON）

【使い方】
① 地図をドラッグで自由に移動。立体⇄平面の切り替えや傾き・"盛り"で、霧島の山の起伏を3Dで楽しめます（画面中心の標高も表示）。

② 最初から入っているガイドピンをタップすると、展示会場・神話の地・温泉・宿などの解説が読めます。

③「＋ あなたの登録」で、自分の寄り道スポットを追加。
　・地図を直接タップして場所を指定、または
　・Googleマップの共有リンクを検索欄に貼るだけでOK（場所名も自動で入ります）
　→ カテゴリ・写真・ひとこと・リンクを添えて登録。あとから編集もできます。

④ 気になるスポットには「いいね」「行ったよ」を。

⑤ 検索欄で地名検索、ボタンで周辺のコンビニ・温泉・道の駅さがし。

　スマホはホーム画面に追加すれば、アプリのように全画面で使えます。

2026/7/9追加
⑥圏外でも使えます📴
　電波注意スポットの記録は現地が圏外なことも。このアプリは
　・一度見た範囲の地図（3D標高ごと）は圏外でも表示
　・圏外での登録はGPSで現在地を取得して端末に保存
　・電波が戻ると自動でみんなの地図に送信（⏳未同期バッジで管理）
　遠征前に霧島周辺を一度眺めておくのがコツです。

【技術メモ】
・地図：国土地理院の地図タイル（標準／写真／地形）＋標高API。3Dの起伏は標高データ（AWS Terrain Tiles）で立体化。地図エンジンは MapLibre GL。
・周辺検索：OpenStreetMap（Overpass API）
・Googleマップの共有リンク→座標変換：Netlify Functions（サーバー処理）
・ログイン・投稿保存・写真：Supabase（Google認証／DB／Storage）
・ホスティング：Netlify
・全体は単一HTMLファイル＋無料サービスだけで構築。

2026/7/9追加
・オフライン対応：Service Workerでアプリ本体と閲覧済み地図タイルをキャッシュ（更新はネットワーク優先で常に最新）。圏外の登録はlocalStorageに退避し、オンライン復帰時にSupabaseへ自動同期。
2026/7/11追加
記事がポップアップする時、タイトルや検索窓が上に対比し、記事が隠れないようにしました。