Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Tainan Bus Map

794 visualizaciones

Publicado el

A story about developing tainan bus map.

  • Sé el primero en comentar

Tainan Bus Map

  1. 1. 府城公車地圖血 史淚 Kagami
  2. 2. Kagami ● 府城人 ● 新手 RD ● 資深圖客 ● 默默做自己 ~~ 替代役 (144) ● https://github.com/kagami3421 ● jimmy3421@gmail.com
  3. 3. 動機 ● 等兵單時練習 JavaScript 、 CSS 等技術 ● 對 OSM 的熱情 只要有愛就沒問題了 ● 自己家鄉的公車自己畫 ! ● 充實自己的 GitHub
  4. 4. 但是 .. 沒有食材怎麼炒菜 ....? ● 2014 年 8 月狀況: – 只有兩條公車路線 (5 路、 0 路 ) – 繪製公車沒有統一規範
  5. 5. 那就自己栽畫吧 ! 於是開始了邊畫邊 Coding 的不歸路
  6. 6. 建資料 ● 建立繪製規範 – http://wiki.openstreetmap.org/wiki/Tainan/Bus_route ● 畫 .. 還是畫 – Remote Mapping 為主 – 每日以 1~2 條為目標 – 到的了就自己實地踏查 ● Remote Mapping – 到處參考 – 請教公車迷 – 困難點 ● 站牌位置 ● 路線走法
  7. 7. 建資料 ( 續 ) ● 自行踏查 – 站牌資訊 – 站牌位置 – 路線走法 ● 坐一趟就知道
  8. 8. 建資料 ( 續 ) ● 過了兩個多月 .. – Done! 圖片來源: öpnvkarte
  9. 9. Coding ● 主要的 framework – Jquery - 毒品 – Leaflet - 化妝品 ● 核心 – 使用 APIv6 下載資料 – folk from Here : https://github.com/jfirebaugh/leaflet-osm
  10. 10. Coding ( 續 ) ● 內部運作 – 下載 (ajax) – 解開 Route_Master Relation – 按路線方向和 Member 的 tag ,留下要用的 relation – 解開 Route Relation – 轉換為 leaflet 物件: ● node 轉為 marker ( 公車站牌 ) ● Way 轉為 polyline ( 公車路線 ) – 丟給 Leaflet render
  11. 11. UI ● 主要地圖 – 主要使用 Bootstrap framework – 曾丟到 Ptt 老王賣瓜 ● 內嵌式地圖 – 動機: ● 向公車迷遊說把我的地圖放進網頁 – 剔除不少 framework ,減輕依賴性 – 寫份教學在 GitHub 上教別人如何使用
  12. 12. OpenData ● 想介接完整的公車動態資料,但 .. – 還要研議 by 臺南市政府 – 只有半殘的 QrCode 網頁可用 ● 只能使用 OpenData Tainan 網站的資料 – http://data.tainan.gov.tw/ – Remote Mapping 的參考大宗
  13. 13. 完工了 ! ● 成品: – http://kagami3421.github.io/TainanBusMap/ ● 內嵌式地圖範例: – http://kagami3421.github.io/TainanBusMap/DivTest.html
  14. 14. RoadMap ● 重構 Code ● 無止盡的更新、增加站牌或路線 – 後續維護最麻煩的地方 – 坑阿 Orz
  15. 15. 參考資料 ● http://nottainanbus.wix.com/tainancitybus ● http://tourguide.tainan.gov.tw/newtnbusweb/

×