# TDX 自行車 API 教學

## TDX 自行車 API 講解

1. [基礎、進階 API 講解](https://tdx.transportdata.tw/api-service/swagger)
2. 如何取得自己的座標？
3. 路線規劃
4. 進階 API 教學
5. axios + 文字列表顯示離自己最近的自行車列表

# leaflet 教學

## leaflet 簡述
1. 申請 mapbox 流程
2. [從 Quick Start 了解 leaflet 地圖套件](https://leafletjs.com/examples/quick-start/)
3. leaflet 有圖層概念，[概念](https://www.androidpit.com/google-maps-gesture-controls)
* **Raster Layers** -
* **TileLayer** - 圖磚方式呈現
* TileLayer.WMS
* ImageOverlay
* VideoOverlay
* UI Layers
* **Marker** (單點)
* **Popup** (彈跳冒泡視窗 - 可放多內容)
* Tooltip (彈跳冒泡視窗 - 可放少內容)
* 其他圖層
* **GeoJSON**
* LayerGroup
* FeatureGroup
* GridLayer
* Vector Layers (向量圖層)
4. Leaflet 可以客製化[地圖樣式](https://docs.mapbox.com/api/maps/styles/)， third Party > Developer resources > Carto

L→ Layer 圖層

**map 地圖的設定**
https://leafletjs.com/reference-1.7.1.html#map-example

L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

### 移動座標
居中座標在中間

map.panTo(new L.LatLng(22.6047344,120.2979626))

marker 座標圖示

marker([50.5, 30.5])

bindPopup 綁定彈出窗到圖層

bindPopup()

setView 設定觀看位置

setView()

addto 加入

addto()

removeLayer 移除 layer

`removeLayer()`

fitBounds 設定觀看位置＋放大到最大

`fitBounds()`

chain 用法：

`L.marker([50.5, 30.5]).addTo(map);`

geoJSON
https://leafletjs.com/examples/geojson/

var myLayer = L.geoJSON().addTo(map);
myLayer.addData(geojsonFeature);

## 載入地圖流程

* [範例程式碼](https://codepen.io/liao/pen/gOpOgzg)
* [官網參數](https://leafletjs.com/reference-1.6.0.html#map-example)
* 自我練習：換成自己的座標，做成自己的地圖

### 語法

* .setView - 佈置場景，可以想像成建立一個空的容器地圖
* tileLayer - 拉進圖資，以 [OpenStreetMap](https://www.openstreetmap.org/#map=8/23.611/120.768)， [mapbox](https://docs.mapbox.com/) 為例
* .setZoom(18) - Zoom 地圖
* getZoom() - 取得 Zoom

## leaflet 範例教學
* [插入地圖，顯示位置]
* [固定座標 + marker 教學](https://codepen.io/hexschool/pen/PoJjxqG?editors=1010)
* [個人座標定位，搭配 Leaflet marker 標記效果](https://codepen.io/hexschool/pen/OJxbEMg?editors=1010)

## 插入 marker 教學
> [明天要看的範例](https://codepen.io/hexschool/pen/MWEopXK?editors=1010)
> [路線套件](https://codepen.io/hexschool/pen/dyVRvBj?editors=0010)
* [Marker 顏色 PNG](https://github.com/pointhi/leaflet-color-markers)
* [兩個點以上](https://codepen.io/liao/pen/dyoyvop)
* [倒真正資料](https://codepen.io/liao/pen/abObPQm)
* [下 if 判斷改變樣式](https://codepen.io/liao/pen/poJoqmz)

## 套件教學
* [效能處理](https://codepen.io/liao/pen/rNVNoGN)
* [插件網址](https://github.com/Leaflet/Leaflet.markercluster) Leaflet.markercluster

## 自行車 CC BY 設計稿
* [Shiaohan](https://2021.thef2e.com/users/6296427084285739387?week=2&type=1)：圖文列表、找景點、找餐廳、找自行車路線
* [早餐](https://2021.thef2e.com/users/6296427084285739247?week=2&type=1)：依縣市搜尋各個列表
* [YUN](https://www.figma.com/file/lguo4e9pNw7y7ZZ9zzzA3D/THE-F2E-2021-WEEK2?node-id=1239%3A27063)：自行車資訊、路線搜尋依縣市、借車還車按鈕控制
* [ching](ching)：自行車可租還
## TDX API + leaflet UI 實作流程

2. [畫線顯示自行車道路線](https://codepen.io/hexschool/pen/dyVOjVm?editors=1011)
3. [自行車租借、歸還資料處理](https://codepen.io/hexschool/pen/VwMPPGx?editors=1010)
4. 切換不同 marker
5. 多個 API 搜尋，promise all 語法
6. Google 連結外部導航

* 規劃功能
* 所有站點位置
* 呈現單一站點資料
* 目前位置
* 顯示自行車的路線（線條）
* 結合旅遊資料... x
* 非同步 → promise x ★4
* 實作：結合 API data 和地圖的應用

## ♠ 實作

* code：https://codepen.io/AliceChiang/pen/gOxpVNo
(mapbox 需要換上自己的 access token，以及 API 驗證也需要換成自己的 app id 及 app key)
* detail：

使用到的 API：自行車
https://tdx.transportdata.tw/api-service/swagger
[Image: image]
token 處理的方式：
[Image: 熒幕擷取畫面_2021_10_13_下午6_59.png]token 的處理方式

* 前端框架的 .env 檔案，且此檔案不上傳（加入 gitignore)
* 移除此欄位的值

function 名稱對照：

功能一：Leaftlet 地圖 加上附近的公車站牌
getStationData -> 串接「附近的自行車租借站位資料」
getAvailableData -> 串接「附近的即時車位資料」

GetAuthorizationHeader -> tdx 官方提供的驗證方法

setMarker -> 標記 icon 圖示在地圖上

---

功能二：自行車路線的呈現
getRoutesData -> 串接「指定縣市自行車道路網圖資」＋選取自行車的路線
polyLine-> 畫出自行車路線

[navigator web api](https://developer.mozilla.org/zh-TW/docs/Web/API/Navigator)

畫線作法：wkt 格式轉 geoJSON
https://leafletjs.com/examples/geojson/
https://gis.stackexchange.com/questions/162842/convert-wkt-to-geojson-with-leaflet
轉換的套件：https://github.com/arthur-e/Wicket
CDN：https://cdnjs.com/libraries/wicket