42_104/caddy/www/qiji-luopan/README.md

旗跡羅盤（建議目錄名稱：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：

     python -m http.server 8000
     

   • Docker + Nginx（唯讀掛載當前目錄）：

     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：國家基本資料、座標與區域資訊。
• datasets/geo-countries：世界國家邊界 GeoJSON。
• g0v/twgeojson：台灣縣市級 GeoJSON，多重合併成國家輪廓。

未來想法

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