設計稿 credit to:
https://challenge.thef2e.com/user/2259?schedule=4452#works-4452
感謝六角學院 F2E 計畫提供口罩地圖的設計稿，剛開始想嘗試做出這個作品時還想以我貧弱的美術天賦，大概也只能刻出毫無美感可言的介面吧。
在製作口罩地圖前確認了需要用到的技術，AJAX 在製作 JS 最終作業就已經使用過，唯一沒有實際應用在作品中的就是地圖了，也很開心能夠藉由這此機會學習如何引進 leaflet + Open Street Map，在此稍微記錄製作過程和心得。
目標功能：
- 隨日期更新左上角資訊（日期、可購買民眾之身分證末碼等）。
- 一開始渲染全部藥局列表，當 select 被選取時更新列表，並拉近地圖到該區域。
- 點擊圖標時跳出該藥局資訊。
日期資訊
政府規定依照身分證字號末碼決定可以領取口罩的日子，所以在這個專案裡每次都要取得台北當地日期。
使用 Javascript Date 物件的各種 method 可以輕易取得日期資訊，搭配使用 switch 判斷並回傳當天是星期幾，取得後渲染在左上方的資訊欄上。
取得星期後記得判斷當天可以購買民眾的身分證末碼。
藥局資料
使用 AJAX 要回原始資料，由於需要取得各縣市、行政區的座標，故篩選原始資料彙整成縣市物件以及行政區物件，並存取個別座標。
以往都習慣使用陣列存取多筆資料，if 判斷式可以直接使用 arr.indexOf ( )，但這次因為想要同時存取座標，所以選擇用物件存取，搭配 in operator 使用判斷式，可以判斷物件中是否存在特定 key 值。
p.s 本來想要撈公開資料取每個縣市、行政區的中心座標，但因為一時找不到適合的資料，最後決定直接取用迴圈跑到的第一間藥局座標。
最後會取得如下圖的物件資料：
設定地圖
地圖使用 Leaflet 框架 + Open Street Map 圖資，設定一個放置地圖的區塊，並在 js 檔案中撰寫設定地圖的程式碼，包含地圖載入的中心座標和遠近程度，以及要使用哪個圖資。
接下來是在地圖上將每間藥局的位置放上圖標 ( marker )，依照個人邏輯設計好不同圖標樣式後，開始直接用 for 迴圈把圖標一個一個放上去（對我瘋了），接下來每次測試程式碼就開始無盡的等待，很明顯要把六千多間藥局一個一個放上 png 實在是太太太太太太太太太太⋯⋯慢 (´-ω-`)，我甚至還去計算了每次渲染完所需要的時間，測了三、四次以後我就放棄了。
顯然用 for-loop 一個一個渲染是個沒效率又無法符合使用者需求的笨方法，在此大力感激六角學院的老師和學員介紹了 Leaflet.markerclouster 套件，可以理解成自己建立一個圖標群組的圖層，使地圖能夠在拉遠時不顯示所有的圖標，而是只顯示當地區的圖標數，大大地加快了效能以外，我也很喜歡在滑鼠游標 hover 時，地圖會顯示數字涵蓋區塊的功能
♪( ´▽｀)。
監聽事件
【 select_選擇縣市 】
當使用者選擇縣市後，首先設定地圖拉近到該縣市，並且篩選「請選擇行政區」的選單，最後渲染左方列表為該縣市所在的所有藥局。
在這個部分我第一次使用 for ( let a in obj ) 的用法，使用起來和 forEach ( ) 的用法很相似，但差別在於 for-in 的用法可以用於取得物件所有的 key 值，且寫法非常簡潔；如此一來就不需要用 Object.keys ( ) 另外存取陣列資料了。
「select_選擇行政區」的製作方式基本上是相同的，這邊就不贅述。
【 藥局列表上的圖標點擊 】
這個部分剛開始做的時候覺得有點 tricky，畢竟藥局列表是使用 JS 動態產生而不是寫死的，而且會隨選擇的地區不斷變動，剛開始想到的是綁定父元素，但後來突然想到以前第一次製作購物車的時候，有使用 jQuery 綁定過刪除按鈕的點擊事件，剛好可以使用在這次的專案上。
因為平時都是使用原生 JS 撰寫，因此只有這個地方使用 jQuery⋯⋯
在點擊的 icon 圖片上記得寫入要用撈取的資訊，如藥局名稱、座標、口罩數、地址等。
注意：因為取得的座標必須是 number，所以從 dataset 存取後記得要用 parseFloat ( ) 轉成數字型別。
資料都撈取到以後，將 marker 放到地圖並綁定 popup，並設定在點擊 icon 時 openPopup，基本上功能就完成了 ( ´▽` )ﾉ。
Loading 圖示
因為使用 AJAX 要資料，等到渲染完成需要一小段時間，在 onload 以前使用「載入中」的 GIF，使用時應該比較不會令人困惑。
雖然內容寫起來不多，也有很多功能可以精進，但在製作過程中我也有遇到一些問題，例如上面提到的在地圖上加入圖標遇到效能低落的情形、取得的字串忘記轉成數字導致 Error 但不知道怎麼除錯等，甚至一開始決定使用物件存取資料，因為太習慣陣列導致在資料處理上不夠熟練等。
但把問題逐一解決、新增相關知識後感到很充實，回頭再看自己的程式碼也覺得不再那麼可恨（感謝所有被我騷擾的人們沒有唾棄我）。
另外還想新增如搜尋地址和藥局名稱功能、點擊地圖上的圖標後列表會渲染該藥局資訊等，在製作這個專案的過程中學到很多細節，也寫得很開心，期待下次的新功能的更新 ♪( ´▽｀)。
