共筆維護試算表、地圖自動更新

想像一個團隊， 每位成員分頭去收集一些 (不涉及隱私或機密、 可以公開的) 地址， 要放到一張共同的地圖上面。 除了地址之外， 還有一些需要經常更動的欄位， 例如各地點的開放時間、 注意事項、 臨時公告等等。 什麼樣的工作流程會比較有效率呢? 我會開一張共筆的試算表， 例如 ethercalc 或是 google sheet， 裡面含有名稱、地址、經緯度、備註以及其他文字資訊等等欄位， 並且分享給所有成員， 然後把這張試算表餵給 umap 吃。 於是每當任何成員修改 [地址經緯度以外的] 其他任何欄位， 地圖瀏覽者只要重新整理網頁， 就會看到最新最及時的資訊。 至於經緯度， 可以透過 TGOS 手動批次更新。 編輯 google 試算表的門檻比編輯地圖低很多， 這樣的安排便於讓任何人都可以參與。

我做了一個範例： 這張地圖 會隨著 這張試算表 連動， 中間透過 gsheet2umap.php 這個程式串接。 公車站牌資訊不是最理想的共筆篇輯應用實例， 只是因為他可以讓我省略地址轉經緯度這個步驟， 比較方便展示。

一、 建立 google sheet、 匯入 csv 檔、 分享

1. 取得公車站牌資料檔： wget https://ckhung.github.io/a/m/24/tcbus-73.json
2. 轉成 csv 格式： zq -j 'this[2].Stops | over this | [StopSequence, StopName.Zh_tw, StopName.En, StopPosition.PositionLon, StopPosition.PositionLat]' tcbus-73.json | perl -pe 's/[\[\]"]//g' > 73.csv
3. 建立一張新的 google 試算表。
4. 「檔案」=>「匯入」， 切換到 「上傳」 分頁， 選取剛剛產生的 73.csv。
5. 選取 「取代目前工作表」、 按 「匯入資料」。
6. 手動插入標頭列： 序號、 name、 ename、 longitude、 latitude。 其中 name、 longitude、 latitude 三個欄位名稱請完全照抄。
7. 點試算表右上方的分享/共用圖示， 把「一般存取權」 設為「知道連結的任何人」、 往右看， 確認他們都是 「檢視者」。
8. 接著可以透過上方的「新增使用者、群組和日曆活動」 進一步授權團隊成員可以編輯。
9. 驗證： 瀏覽器指向這個網址： https://frdm.cyut.edu.tw/~ckhung/saas/gsheet2umap.php?html=https://docs.google.com/spreadsheets/... 其中 "html=" 改成剛剛分享的這個 google sheet 網址。 應該要看到一個 csv 格式的純文字內容， 每列是一個公車站牌的資訊， 包含上面設定的那些欄位。

二、 設定 umap

1. 登入 umap
2. 建立一張新的地圖、 在左上角設定地圖名稱。
3. 按右上角 「編輯」。
4. 點「改變地圖磚圖層」，改選 "OpenStreetMap"， 速度比較快。 預設的 "OSM-Fr" 很慢。
5. 點「管理圖層」、 新增圖層、 幫圖層命名。
6. 打開「遠端資料」、 網址填入第一節最後面的那一長串驗證網址。
7. 遠端資料的格式選 csv。 再點 「遠端資料」 這一大段的最下面「驗證遠端網址」， 確認 ok 後， 即可關閉「遠端資料」這一大段。
8. 按標籤鍵的「定義」，填入試算表內適合作為標籤的欄位名稱。 當初我們把站牌名稱那一欄叫做 「name」， 正好就是 umap 預設拿來顯示的標籤欄位名稱。
9. 打開「互動選項」。 按「顯示標籤」的「定義」。 我喜歡設定 「滑動過去時」 (才顯示)， 地圖比較輕爽。
10. 確認 「允許互動」 是 「On」。
11. 在「彈出內文範本」的「定義」裡填上每個點想要即時呈現的資訊。 這裡可以用到試算表內任何欄位的名稱、 也可以用一點類似 markdown 的語法。
12. 記得按「儲存草稿」!
13. 如果一切順利， 按左上「是否公開」， 在「誰可以檢視」欄位， 選「所有人(公開)」。
14. 也可以再回到編輯模式， 選擇「Edit map default view」， 點選 「Use current center and zoom」 採用目前的視野作為預設值。

三、 補充說明

如果瀏覽器有安裝 ublock origin， 圖徵可能無法點擊。 請先停用 ublock origin 再試試看。

自己有架網頁伺服器的讀者， 可以抓回 html2csv.py 放在你自己的伺服器的 /usr/bin 底下、 改成可執行， 又把 gsheet2umap.php 放在適當的網頁空間。 這個程式做的事包含： 以 html 格式抓回 google 試算表、 呼叫 html2csv.py 轉成 csv 格式、 尋找同時含有 "lon..." 跟 "lat..." 欄位的列 (不分大小寫)， 拿這一列當做標頭列， 再把以下所有 [那兩欄都是數字] 的列當成資料列、 忽略其他列， 作為最後的輸出。 注意： 如果是 apache2， 必須 a2enmod headers 並且設定檔內必須有 Header set Access-Control-Allow-Origin "*" 這一句， 否則 umap 會被 apache2 阻擋。

會寫這個小程式， 主要是希望讓 「中二解顏」 罷免團體在蒐集、更新、公告 (第二階段代收連署書的) 友善店家與議員地址時， 可以更簡單地跨區合作。 試想： 各區可以專心維護自己的試算表就好； 用一張地圖可以統整全國所有選區的友善店家， 臨時想繳交的外地人或 (少小離家、已認不出家鄉地貌的) 難得歸鄉人可以很容易找到代收點及代收時間等等資訊， 這地圖不只可以即時整合各選區罷團提供的 (座標欄位以外的) 所有最新資訊， 而且還可以壯大罷團聲勢。 同時也展示： 民主的力量，就是很多小團體及個人的小小力量匯聚而成的。 我已經把所有的頁面都開好了， 只欠人管理試算表。 不過中二的陸戰隊太忙了， 人手也不太夠， 沒人理我。 希望有其他地區的罷團 (或是其他任何具有分工合作性質且需要更新地圖資訊的團體/連鎖店/...) 可以考慮採用， 我很樂意提供技術支援。