Tainan Bus Map
6 likes957 views
這是一個關於繪製府城公車地圖的項目，作者從2014年起開始利用JavaScript和CSS等技術進行遠程繪製並建立公車路線的資料。整個過程中，作者實地調查了公車站牌和路線，並最終完成了網站和內嵌式地圖的建立，並希望未來能接入完整的公車動態資料。文檔還提供了相關的參考資料和未來的計劃。
Tainan Bus Map
- 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