# TDX 自行車 API 教學 Demo

### API 帶 header 驗證範例程式碼
* [範例程式碼](https://codepen.io/hexschool/pen/RwgvZEZ?editors=0010)

> 不帶 APP ID、KEY 還是可以練習，但會有請求次數限制

## TDX 自行車 API 講解

1. [基礎、進階 API 講解](https://tdx.transportdata.tw/api-service/swagger)
2. 如何取得自己的座標？
3. 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 教學

* [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 連結外部導航