Leaflet 武漢肺炎疫情地圖實作教學 淺談如何從無到有快速建立武漢肺炎疫情地圖

Lin Yen-Cheng on 2020-02-05 4 min. read

目標

以網頁實作熱區地圖,顯示這次武漢肺炎的確診數,發佈在免費的 GitHub Page,Repo 在此請點我,本次技術選型如下:

  • leaflet.js: 比起 OpenLayers 簡單非常多,可以操作開源的 OSM,是一套操作圖層的函式庫,協助我們進行圖層的疊加,這次的地圖圖層依序為

    • 底圖: 使用免費的 OSM 圖層
    • 熱區圖層: 透過 leaflet-heat 將點位轉換成熱區圖層
    • 標記層: 病毒點位組成的 Maker Group
  • leaflet-heat: 建立可以疊在 leaflet 上的熱區圖層

  • axios: 抓取遠端資料,整合資料來源,因為是其他 Domain 的資料,所以我們可以

    • https://cors-anywhere.herokuapp.com/https://我們想要拿資料的位置
    • 資料不太穩定時則是透過 github actions 定時的把結果 (JSON) 一起 Build 進去原始檔中
  • c3.js: 顯示圖表

  • parcel: 打包工具

發佈

GitHub Page 預設支援將 docs 中的網頁顯示出來,所以我們需要在專案中建立 docs 資料夾,並且放置打包後的檔案們,發布後在 GitHub Repo 中設定開啟即可。

parcel

不需要任何配置,直接使用 parcel 打包工具,我們可以:

  • 使用 Hot Reload 開發
  • 將網頁程式打包及最佳化

只需要加上 npm script 如下:

  • start: parcel --out-dir dev index.html ,執行 npm start 後,會建立開發時 build 過的檔案,預設會在 dist 或是我們可以指定資料夾,開發 server 會啟動在 localhost:1234
  • build: parcel build index.html --out-dir docs --public-url ./,執行 npm build 後,會產生最佳化的檔案

成果

只需要寫少少行的程式碼就完成了這個地圖的應用。

https://linyencheng.github.io/virus-and-where-to-find-them/

同樣的概念,透過開源的資料整合前端的全文檢索,之前也做出了全台咖啡廳的地圖,整理咖啡廳的用餐時間、插座、WiFi、安靜程度等資訊在地圖中,方便搜尋及瀏覽。

https://linyencheng.github.io/coffee-map/

遇到的問題

有發現到以下問題

  • 網路上公開的 API 常常不是很穩定或是回應速度過慢
  • CSV 檔從接收到回應,需要轉成 JSON 到畫面顯示這個過程費時

有想到以下方案:

  • 先製作好基本的 JSON,有抓到正確的資料後續再更新資料
  • 直接產生好固定的 JSON 檔,並想辦法透過 CI/CD 工具定期更新

最後評估專案是在 Github,所以決定直接產生好固定的 JSON 檔,並透過 Github 內建的 Github Action 自動定期更新專案


喜歡這篇文章,請幫忙拍拍手喔 🤣

share