スタジアムマップ

このアプリは、CSV ファイルに登録されたスタジアム一覧を読み込み、地図上に表示する Web アプリケーションです。
サイドバーでチェックボックスを使って訪問済みのスタジアムを選択すると、地図上のマーカーと連動して表示が変わります。

特徴

• CSV 読み込み: stadiums.csv からスタジアム情報（名前・緯度経度など）を読み込み
• MapLibre GL JS: 高品質な地図表示とインタラクション
• チェックボックス連動: サイドバーで選択したスタジアムのみを地図に反映
• カスタムピン画像: images フォルダ内の PNG ファイルをマーカーとして使用
• レスポンシブ対応: PC利用を想定

ファイル構成

├── index.html # メイン HTML（UI レイアウト・CSS・スクリプト読み込み）
├── app.js # CSV 読み込み、サイドバー生成、マップとの連動処理
├── map.js # MapLibre を使った地図初期化・マーカー描画
├── stadiums.csv # スタジアム情報データ
├── images/ # マーカー画像（PNG）
│ ├── xxx.png
│ └── ... 追加のピン画像

必要要件

• Node.js 環境（ローカルサーバーとして動作させる場合）
• インターネット接続

デモ

行ったスタジアムマップ