Leaflet 地圖實作教學 從0到1快速建立疫情地圖

這篇教學將以 leaflet 實作熱區地圖，顯示這次武漢肺炎的確診數，發佈在免費的 GitHub Page，程式碼也開源放在 Github 上。

目標

本次技術選型如下：

• 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 自動定期更新專案。

• ← 上一篇
• 下一篇 →