繪製 (公共腳踏車租賃地點、公車站牌、...) 群聚(地)圖不必改程式碼

上個學期教資料視覺化， 其中一個主題是繪製客製地圖， 就做了這個例子： 台中公共腳踏車租賃地點。 像這種 marker 個數太多太密集的地圖， 需要用 cluster map 來做， 當訪客拉近 (zoom in) 時， 才把一個 cluster 拆成更多個小的 clusters。

這個無法用單純的 umap 來做。 [9/7 現在發現 umap 可以製作 cluster map 了， 更簡單！ TGOS 批次地址查經緯度 + umap 私房地圖範例： 清冠一號中醫診所地圖] 請先下載 程式碼， 然後用瀏覽器打開其中的 index.html， 拉近拉遠測試一下。 如果是 firefox， 要先到 about:config 裡面把 security.fileuri.strict_origin_policy 設成 false； 如果是 chromium， 必須先關掉所有 chromium 視窗， 再從命令列上重新啟動： chromium --allow-file-access-from-files 。 詳見 javascript Can Read Local Files。

再從命令列進到 maps 子目錄裡，

ls -l markers.json
rm markers.json
ln -s tw/kh-bus-stops.geojson markers.json

然後回瀏覽器重新整理。 這個資料集是高雄市所有公車站牌。

要如何換成自己的資料檔呢？ 同樣以腳踏車資料為例， 先從 ptx 公共運輸整合資訊服務平台 取得某縣市公共腳踏車租賃地點。 更直接地說， 到 這一頁， 選擇縣市、 把 「取前幾筆」 清掉、 點 「Execute」， 就可以在下面的 "Download" 處下載回 json 檔 (假設存成 bike.json 好了)。 [把握時間！ 這個平台 11月底就要收掉了～]

再來用 強大的 json 轉檔工具 zq 轉成程式需要的 geojson 格式：

zq -j \
'over this | {
  type:"Feature",
  geometry: {
    type:"Point",
    coordinates: [
      StationPosition.PositionLon,
      StationPosition.PositionLat
  ]},
  properties: {
    name: StationName.En,
    name_cht:StationName.Zh_tw,
    addr:StationAddress.En,
    addr_cht:StationAddress.Zh_tw,
    cap:BikesCapacity
  } } |
collect(this)' \
bike.json | jq . > bike.geojson

把 bike.geojson 搬到 .../maps/tw/ 底下， 再像剛剛一樣重新建立 symlink， 總之我的程式會去找 markers.json 就對了。

我的程式是從 Andy Maloney 的範例程式 改來的。 主要改兩個地方：

1. 資料檔採用 geojson 格式比較方便讀取其他地理資訊程式匯出的檔案。
2. 點到某一個 marker 時， 不只顯示名稱， 也把 properties 裡面的其他所有欄位一起印出來。

你還知道哪裡可以下載 (含有經緯度座標的) 大量有趣資料集嗎？ 請留言分享吧！