我的私房地圖， OSM 版 (mapbbcode 與 umap)

登入 google 帳號， 就可以建立自己的地圖。 好幾次出國玩， 我都是在 google map 上面標示目的地、 用它來規劃行程。 每一張 「我的地圖」 可以分別選擇公開分享或私密隱藏。 所以社運團體可以拿它來規劃遊行動線、 房仲業者可以用它掌握手中物件位置。 至於經營「注意力經濟」、致力提升流量的網站 -- 例如美食部落客、 連鎖店、 巡迴表演團體、 ... -- 則可以 把自製的地圖內嵌在自己的網站裡。

不過我更有興趣的是 OSM。 前陣子寫完 「網頁內嵌互動地圖」 很簡單 之後一陣子， 才發現原來 OpenStreetMap 開放街圖根本不必寫程式也可以做到， 而且介面比 google maps 清爽簡單。 但不是在 OSM 官網， 而是在衍生網站上。 這裡要介紹的兩個網站都有把程式碼釋放出來 -- 如果你高度重視隱私， 甚至還可以下載程式原始碼、 自己架站。 遇到像是 NSA 監看雲端服務廠商之類的鳥事， 你的風險就比別人更低。

一、 mapbbcode

程式碼輕巧的 mapbbcode 由東歐人開發， 原始目標是為了讓那些登山健行、 腳踏車隊、 ... 之類的 bbs 論壇可以看著地圖討論。 目前已有 phpBB 2, phpBB 3, FUDforum, PunBB, FluxBB 等等論壇的外掛模組， 程式碼都只有兩三百 K。 可以到示範網站 share.mapbbcode.org 玩一下。 不必註冊 就可以在地圖上標示點、 折線、 多邊形。 按 Save 存檔時， 記得抄下「唯讀版網址」跟「編修版網址」。 不然就會變成沒有人(包含你)知道的垃圾。

除了用滑鼠拉點線面標示地圖之外， mapbbcode 還提供 「徒手輸入座標 (edit raw)」 跟 「批次匯入檔案 (import)」 兩種輸入方式。 批次匯入支援十多種格式。 如果要清除所有資料， 可以切換到徒手輸入座標模式。 另外， 它也可匯出 (expport) 點線面標記。

也可以按右方 Sign in 用 google、 yahoo、 wordpress、 blogger、 ... 等等第三方認證的方式登入。 作者/站長特別強調尊重隱私 ： 連你的 id 都沒有存在網站上。 (只存 hash -- 就類似 md5sum 的意思。) 登入之後， 就只多了一個功能： 列出我的地圖清單。 (原先的 Sign in 按鈕變成 Library。) 這樣你的地圖就不會丟掉了。

我做的兩個地圖： 朝陽科大到中興大學路線、 數位路平路線規畫

二、 umap

[2023/10/2 重寫] 功能相當完整的 umap 由法國人開發， 介面已中文化， 程式碼大小約 8M。 可以先隨便挑一個地圖瀏覽看看。 沒有登入的狀況下， 有左側一排功能可用：

1. 「內嵌/分享」 按鈕其實也提供 geojson/gpx/kml 等等格式的下載資料功能；
2. 「圖層」 按鈕則可選擇暫時不顯示某些圖層 (如果製圖者有把資料分開放在幾個不同圖層的話啦)；
3. 如果覺得底圖載入速度太慢， 可以從 「地圖背景」 按鈕進去， 把預設的 "OSM-fr" 改成 "OpenStreetMap"， 這樣就會改由台灣的國網中心提供底圖 (圖磚)， 速度快很多。
4. ...

想要自製地圖的話， 同樣可以用你既有的帳戶採第三方認證的方式登入： 可選擇的帳號有 OpenStreetMap (我都用這個)、 bitbucket、 github、 twitter。

登入後可以建立自己的地圖。 按右上角的「編輯」按鈕進入編輯模式後， 右排出現編輯工具。 上方三個按鈕可以徒手繪製點、 折線、 多邊形。 最下方的鑰匙可以管理權限； 預設所有人可讀、 只有自己可編輯。

右排下半的齒輪按鈕可以讓你編輯 (整張) 「地圖的設定值」。 我最常用的是圖中的兩個功能： 設定地圖名稱， 還有設定滑鼠經過一個圖徵時就顯示它的名稱。 (下詳)

在 umap 裡， 圖徵資料可以分開放在好幾個不同圖層。 「管理圖層」按鈕可以讓你新增、編輯、刪除圖層。 點它之後， 再點選某個圖層名稱附近的鉛筆圖示， 即可在那個圖層裡新增/編輯/刪除很多圖徵 (點、 折線、 多邊形)。 編輯畫面最下面的 「進階動作」 有一個 「刪除」 選項。 起手無回! 一按下去， 這個圖層的所有圖徵就 gg 了， 完全沒有再次確認的機會! 所以辛苦編輯一陣子之後 [超級重要] 一定要不時按左排的 「內嵌/分享」 按鈕， 下載 (匯出) 座標檔。

更多時候， 我不是手動繪製圖徵， 而是把他處取得、 含有經緯度座標的 gpx/geojson/kml 等等格式的檔案上傳到 umap。 甚至是 csv 檔， 只要欄位名稱當中有 lat (代表緯度) 跟 lon (代表經度) 開頭的， 也都可以匯入。 「地圖設定值」按鈕上面的、 看起來像上箭頭的 「匯入資料」 按鈕可以叫出上傳選單。 這個匯入/上傳功能跟左排中間看似 「分享」 按鈕的匯出功能一起搭配使用， 採 A 格式上傳， B 格式下載， 等於可以透過 umap 來轉換不同格式的地理資訊檔案。

我喜歡把 「圖層類型」 設定成 「群集後 (clustered)」， 這樣當你把地圖拉遠， 很多鄰近的圖徵就會合併； 拉近時才逐一個別顯示， 地圖看起來比較清爽。 另外， 我喜歡設定： 每當滑鼠移到某個 node 圖徵上方時， 就顯示它的名字， 所以也會到 「互動選項」 底下的 「顯示標籤」 選取 「當滑過時」。 如果上述 「整張地圖的設定值」 已作此設定， 當然就不必每個圖層再個別設定。 儲存設定之後， 如果移動滑鼠還是沒有顯示圖徵名稱， 請檢查你的 csv 檔裡面有有沒有一欄名為 「name」 的欄位？ 或是 geojson 檔裡面每個 feature 是否都有 properties.name 欄位？ 如果你想拿來顯示名稱的欄位不叫做 name， 那就要到 「進階屬性」 的 「標籤鍵」 填入該欄位的名稱。

三、 補充說明

我的測試資料包含 (1) osmand 上面我的最愛 (2) 先前 寫 OSM 程式 時的測試資料檔。 只要已有現成的座標檔， 而且是文字編輯器可以開啟的格式， 要跟這兩個網站匯出匯入都很簡單。 例如可以跟 osmand 離線地圖「我的最愛」 favourites.gpx 交換資料。 又例如你的圖徵名稱和座標已採用某種 json 格式儲存， 那麼 只需要下一個 jq 指令即可轉成 geojson 格式。 至於 gpx 跟 kml 則可以安裝 xml-twig-tools 套件， 然後用 xml_pp 指令縮排美化列印。

如果你會大量新增一些 「具有普遍性的公開資料」 (例如美食部落客撰文所推薦的商家資訊) 那麼不妨考慮 以 iD 編輯器直接在 OSM 上面編輯， 讓更多人可以享用你的成果。 (可惜我自己還不太會用 iD ^_^||| )

你身旁有同學/團體正在規畫辦戶外活動嗎? 這個活動有好幾個點、 甚至有路線? (大地遊戲? 遊行?) 或是土地正義團體在研究某財團 (咳咳， 或某非財團) 有哪些不當取得、 不當變更的土地嗎? 要記錄石虎或是臺灣黑雄出沒的位置? ... 歡迎邀請貴哥去講課。 如果聽講單位沒錢但有理想、 有相當影響力 (例如學生會或者環保團體) 時間配合得好， 我可以考慮不收費 :-)

[2016/9/29 改推薦我自己寫的 javascript 程式， 可以把地圖資料只放在你自己的電腦 (保護隱私) 或是從好幾個公開網站合併地圖資料 (分工合作)： potluckmap。 請玩 demo。]

(本文接受科技部計畫補助： MOST-103-2221-E-492-028「台灣開放街圖圖資平台建置與應用」)