# 2020 0213 口罩地圖 - 卡斯柏 直播

- 參考範本 https://github.com/hsuchihting/wheremask
- 示範影片 https://youtu.be/7CXnNMVMXeo

## 相關主題
- https://challenge.thef2e.com/works
- 資源：https://www.facebook.com/groups/110635703123103/permalink/597937204392948/
- OSM 教學影片：https://www.youtube.com/watch?v=pUizu62dlnY

## 開始
- 如何建立環境
- 快速建立介面
- 如何接收遠端資料
- 使用 OSM
- 搭配 Vue 套件
- 不使用 Vue 套件
- 插旗
- 介面優化
- 取得用戶地點

## 建立環境

vue create

或使用 `vue ui`

## 快速介面

 <div class="row no-gutters">
      <div class="col-sm-3">
        <div class="toolbox">
          <div class="sticky-top bg-white shadow-sm p-2">
            <div class="form-group d-flex">
              <label for="cityName" class="mr-2 col-form-label text-right">縣市</label>
              <div class="flex-fill">
                <select id="cityName" class="form-control">
                </select>
              </div>
            </div>
            <div class="form-group d-flex">
              <label for="area" class="mr-2 col-form-label text-right">地區</label>
              <div class="flex-fill">
                <select id="area" class="form-control">
                  <option value="">-- Select One --</option>
                </select>
              </div>
            </div>
            <p class="mb-0 small text-muted text-right">請先選擇區域查看（綠色表示還有口罩）</p>
          </div>
          <ul class="list-group">
            <template>
              <a class="list-group-item text-left">
                <h3>藥局名稱</h3>
                <p class="mb-0">
                  成人口罩：1 | 兒童口罩：2
                </p>
                  <p class="mb-0">地址：<a href="https://www.google.com.tw/maps/place/..."
                  target="_blank" title="Google Map">
                  地址</a>
                </p>
              </a>
            </template>
          </ul>
        </div>
      </div>
      <div class="col-sm-9">
        <div id="map"></div>
      </div>
    </div>
    
    <style lang="scss">
    @import 'bootstrap/scss/bootstrap';
    #map {
      height: 100vh;
    }
    .highlight {
      background: #e9ffe3;
    }
    .toolbox {
      height: 100vh;
      overflow-y: auto;
      a {
        cursor: pointer;
      }
    }
    </style>

## 遠端資料

API 路徑：https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json

台灣縣市 JSON: https://github.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON

OSM 基本概念
https://www.openstreetmap.org/

https://leafletjs.com/

## CSS 資源

<link rel='stylesheet' href='https://unpkg.com/leaflet@1.5.1/dist/leaflet.css'>

### 快速產生

https://leafletjs.com/examples/quick-start/

### Map

- https://leafletjs.com/reference-1.6.0.html#map-example

### 台灣縣市鄉鎮 JSON
https://github.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON

### TileLayer
https://leafletjs.com/reference-1.6.0.html#tilelayer

- 台北座標：[25.03, 121.55],

### UI Layers

- [Marker](https://leafletjs.com/reference-1.6.0.html#marker)
- [圖標相關](https://github.com/pointhi/leaflet-color-markers)

### Leaflet icons

https://github.com/pointhi/leaflet-color-markers

### EachLayers
https://leafletjs.com/reference-1.6.0.html#map-eachlayer

### removeLayers
https://leafletjs.com/reference-1.6.0.html#control-layers-removelayer

### penTo
https://leafletjs.com/reference-1.6.0.html#map-panto

### popUp
https://leafletjs.com/reference-1.6.0.html#popup

- 連結到特定節點，並開啟視窗

osmMap.panTo([geometry.coordinates[1], geometry.coordinates[0]]);
osmMap.eachLayer((layer) => {
  // eslint-disable-next-line no-underscore-dangle
  if (layer._zIndex === item.zIndex) {
    layer.openPopup();
  }
});