A story about developing tainan bus map.

1. 府城公車地圖血 史淚
Kagami

2. Kagami
● 府城人
● 新手 RD
● 資深圖客
● 默默做自己 ~~ 替代役 (144)
● https://github.com/kagami3421
● jimmy3421@gmail.com

3. 動機
● 等兵單時練習 JavaScript 、 CSS 等技術
● 對 OSM 的熱情 只要有愛就沒問題了
● 自己家鄉的公車自己畫 !
● 充實自己的 GitHub

4. 但是 .. 沒有食材怎麼炒菜 ....?
● 2014 年 8 月狀況：
– 只有兩條公車路線 (5 路、 0 路 )
– 繪製公車沒有統一規範

5. 那就自己栽畫吧 !
於是開始了邊畫邊 Coding 的不歸路

6. 建資料
● 建立繪製規範
– http://wiki.openstreetmap.org/wiki/Tainan/Bus_route
● 畫 .. 還是畫
– Remote Mapping 為主
– 每日以 1~2 條為目標
– 到的了就自己實地踏查
● Remote Mapping
– 到處參考
– 請教公車迷
– 困難點
● 站牌位置
● 路線走法

7. 建資料 ( 續 )
● 自行踏查
– 站牌資訊
– 站牌位置
– 路線走法
● 坐一趟就知道

8. 建資料 ( 續 )
● 過了兩個多月 ..
– Done!
圖片來源： öpnvkarte

9. Coding
● 主要的 framework
– Jquery - 毒品
– Leaflet - 化妝品
● 核心
– 使用 APIv6 下載資料
– folk from Here ：
https://github.com/jfirebaugh/leaflet-osm

10. Coding ( 續 )
● 內部運作
– 下載 (ajax)
– 解開 Route_Master Relation
– 按路線方向和 Member 的 tag ，留下要用的 relation
– 解開 Route Relation
– 轉換為 leaflet 物件：
● node 轉為 marker ( 公車站牌 )
● Way 轉為 polyline ( 公車路線 )
– 丟給 Leaflet render

11. UI
● 主要地圖
– 主要使用 Bootstrap framework
– 曾丟到 Ptt 老王賣瓜
● 內嵌式地圖
– 動機：
● 向公車迷遊說把我的地圖放進網頁
– 剔除不少 framework ，減輕依賴性
– 寫份教學在 GitHub 上教別人如何使用

12. OpenData
● 想介接完整的公車動態資料，但 ..
– 還要研議 by 臺南市政府
– 只有半殘的 QrCode 網頁可用
● 只能使用 OpenData Tainan 網站的資料
– http://data.tainan.gov.tw/
– Remote Mapping 的參考大宗

13. 完工了 !
● 成品：
– http://kagami3421.github.io/TainanBusMap/
● 內嵌式地圖範例：
– http://kagami3421.github.io/TainanBusMap/DivTest.html

14. RoadMap
● 重構 Code
● 無止盡的更新、增加站牌或路線
– 後續維護最麻煩的地方
– 坑阿 Orz

15. 參考資料
● http://nottainanbus.wix.com/tainancitybus
● http://tourguide.tainan.gov.tw/newtnbusweb/