概要
Trailmap は Leaflet.js で構築したインタラクティブな個人旅行マップで、旅ごとの写真とストーリーを記録します。場所の追加・編集は locations.json データファイル 1 つを触るだけで、プッシュすると GitHub Actions が GitHub Pages へ自動デプロイします。
Leaflet Vite Globe.GL データ駆動
主な機能
- インタラクティブマップ：光るマーカー、ホバーで拡大、クリックでフォーカスして詳細表示
- 旅のストーリー：サイドバー（モバイルはボトムドロワー）に場所・日付・タグ・説明をリスト表示
- フォトギャラリー：サイドバーに 2 列グリッド、クリックで Lightbox 全画面表示（←/→/Esc 対応）
- タイムラインプレーヤー：下部のプログレスバーが日付順に旅を自動再生（1.8 秒 / ステップ）。ルートグループ間は流れる破線アニメーション
- タグフィルター：上部のピル型タグでマーカーをワンクリック絞り込み
- 3D 地球儀：Globe.GL へワンクリック切り替え（CDN 遅延読み込み、初回表示に影響なし）
- 複数ベースマップ & デュアルテーマ：Explore（ダーク、デフォルト）/ Standard / Satellite の 3 種類。ダーク & ライトをワンクリック切り替え、選択は自動保存
- URL ルーティング：
/#/beijingで場所へ直接ジャンプ。共有リンク、ブラウザの戻る / 進むにも対応
技術ポイント
素の JavaScript のコンポーネントモジュール構成（Map / Sidebar / PhotoGallery / Timeline がそれぞれ独立）、Vite でビルド。データと表示は完全に分離されており、場所・写真・タグ・ルートグループはすべて src/data/locations.json に集約——コードではなくデータを変更する設計です。
{% btn , ソースコード, fab fa-github %}