# 旗跡羅盤（建議目錄名稱：`qiji-luopan`）

利用 Leaflet 與 REST Countries / g0v GeoJSON 打造的國旗互動地圖。依區域分頁檢視所有國家，搜尋國碼或中英名稱，點擊國旗即可將地圖移動到該國並描出邊界，台灣使用 g0v 的 GeoJSON 來源補上輪廓。

## 功能摘要
- 區域分頁與快速搜尋：支援國碼、中英文名稱模糊比對。
- 國旗卡片：顯示 ISO 3166-1 alpha-2 國碼、中英名稱、次區域。
- Leaflet 地圖整合：點擊卡片會移動地圖、顯示國旗 popup，並載入對應 polygon；缺資料時會 fallback。
- 依照台灣常用中文名稱覆寫 REST Countries 的英文資料，呈現更符合在地習慣的翻譯。

## 專案結構
```
qiji-luopan/
├── index.html        # 主頁面與 DOM 結構
├── styles.css        # 介面樣式（含 popup 旗幟樣式）
├── constants.js      # 國家代碼、中文名稱、區域排序與標籤
├── app.js            # 搜尋、分組、Leaflet 地圖與 popup 邏輯
├── flags/            # 國旗 SVG（ISO 3166-1 alpha-2 檔名，例如 tw.svg）
└── download_country_flags.py # 輔助腳本，可批次下載國旗
```

## 開發 / 使用方式
1. 使用任意 HTTP 伺服器提供靜態檔案，常見方式：
   - Python：
     ```bash
     python -m http.server 8000
     ```
   - Docker + Nginx（唯讀掛載當前目錄）：
     ```bash
     docker run --rm -it \
       -p 8080:80 \
       -v "$(pwd)":/usr/share/nginx/html:ro \
       nginx:alpine
     ```
2. 瀏覽 `http://localhost:8000`（若用 Docker 則為 `http://localhost:8080`）。
3. 留意瀏覽器 Console，如有 REST Countries 或 g0v 的遠端請求失敗會在此顯示警告。

## 主要資料來源
- [REST Countries API](https://restcountries.com/)：國家基本資料、座標與區域資訊。
- [datasets/geo-countries](https://github.com/datasets/geo-countries)：世界國家邊界 GeoJSON。
- [g0v/twgeojson](https://github.com/g0v/twgeojson)：台灣縣市級 GeoJSON，多重合併成國家輪廓。

## 未來想法
- 加入更多圖層（例如人口或經濟指標）並以 tooltip 或 legend 呈現。
- 線上快取 REST Countries 結果，減少載入時間。