AJAX 與函式應用教學

這個章節主要是教怎麼用XML物件來將口罩地圖的opendata載入下來，接著，再對載入的資料做相對應的處理。
注意!!!!!!!!!!
其中一個特別需要注意的技巧，是載入loading圖片的作法。
老師的作法是
當資料庫的資料還再載入的時候，顯示loading的圖片，如果，資料源載入完成後，就不用再顯示loading的圖片了。
那切換要不要再放loading圖片的程式碼，你就放在XML物件的onload的函式裡面，因為，onload的函式就是當資料源的資料有完整載入完成後，才會觸發的event，所以，放在裡面是不錯的選擇。

Leaflet + OpenStreetMap 地圖應用開發

這一小節是六角在Youtube的教學影片，
主要是在教怎麼利用地圖服務來完成口罩地圖作業的右手邊的地圖的效果。
裡面有用到兩種服務
Leaflet (JS框架 - 常見處理)
我們通常使用Leaflet 來在圖資裡面下標示點，而這個標示點的效果就是利用Leaflet來達成的優~~

OpenStreetMp (圖資 - 地圖資料)
它就是圖資的來源，它提供的服務跟GooleMap很像，就是提供每個地區的地圖醬。

注意!!!!
你在引入Leaflet的時候，有一個要特別注意的地方
例

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1Ijoic3RlYWxpbmc2MTAiLCJhIjoiY2tlZ3ppaWRvMHNycjJ6czQ0OW5jNWQ0ciJ9.QQg3D8n65YmbvnxIVymYoQ'
}).addTo(mymap);

以上這兩段程式碼的意思為
第一段，將地圖的經緯線畫出來，並將經緯度和地圖的縮放比例設定完成
第二段，將圖磚載入並放入你的瀏覽器裡面
所以，地圖的構成很像公司的WaferMap的構成，第一層是PreocessInfo，即各個DieState ，第二層就是WaferMap的圖磚。
另外，圖磚的本身就是由很多張的png圖片構成的

你可以注意到在L.tileLayer裡面有一個accessToken的選項，它在官網的預設值是your.mapbox.access.token，這不是一個真的accessToken喔，如果你用這種token去用它的服務的話，會得到一張灰色的圖，然後，你看瀏覽器的開發者模式中，會得到401的回傳錯誤，裡面會寫說Unauthorized。
代表你沒有被授權使用這個服務。
其實，在Leaflet的官網裡面，有特別提到accessToken的部份，他說你要放入你自己的accessToken才能使用這個服務，那你得自己去申請一個才行使用，
它其實有提供一個註冊MapBox的網址，等你註冊完後，MapBox會自動產出一個accessToken的內容，你再將這串內容放到accessToken的屬性值裡面之後，應該就可以順利的在瀏覽器上面看到地圖囉~~~

我覺得這個人在介紹圖資和標示點之間的構成，這篇文章介紹的蠻好懂得。

另外，如何找到你想要的目標位置的經緯度資訊
你直接在googleMap裡面搜尋你的目的地，接著，在網址欄位裡面
就會出現像以下這種內容
https://www.google.com.tw/maps/place/%E9%99%B3%E8%8C%82%E9%9B%84%E4%B8%AD%E9%86%AB%E8%A8%BA%E6%89%80/@23.9653536,120.5748983,17z/data=!3m1!4b1!4m5!3m4!1s0x346936f91f6b9eb1:0x532af3e1429da4f9!8m2!3d23.9653536!4d120.577087?hl=zh-TW
然後，你可以看到@後面接的就是目的地的經緯度囉，你在將你的經緯度丟到L.map的setView裡面，這樣Map就會呈現你輸入的經緯度的位置囉~

接著，是介紹怎麼在Map上加marker，
例

1 2	var marker = L.marker([23.9653536,120.5748983]).addTo(mymap); marker.bindPopup("<b>Hello world!</b><br>I am a 陳茂雄中醫診所.").openPopup();

第一行程式碼就是在你輸入的經緯度上方加上一個marker，
第二行程式碼，會在你剛剛創的marker中綁了兩個函式
第一個bindPopup 可以加入你想要的html標籤到marker上的註釋框
第二個openPopup函式，當你點擊那個marker的時候，可以將那個註釋框關閉，在點擊一下打開。

接著，是介紹怎麼修改marker的顏色樣式，
你可以到這個網址裡面抓到開源碼，就可以修改marker的顏色樣式了，
之後，你就可以依照該藥局口罩的數量多寡，來設定不一樣顏色樣式的marker。

接著，是效能議題
當你插入marker的時候，其實每一個marker都是一張png，如果，你不管當下map的zoom level是多少，就都把它全部顯示出來，它會導致你的網頁效果很爛，所以，在這邊有額外插入一個插件，叫markercluster，
它是可以判定當你的zoom level很小的時候，顯示較少的marker，當你的zoom level很大的時候，才把marker全部顯示出來，這樣的好處就是可以提高效能喔~ 那加入這個markercluster插件，其實，就很像在插入另外一個圖層的概念。
注意~~~~~~~~~~~~~~~~~
當你要插入markercluster插件時，要記得也要引入該插件自己的css檔案和js檔案喔，不然，該插件的效果會出不來。這個插件的相關連結在六角的課程裏面有提供。

另外，找到自己座標的語法
你上google找關鍵字HTML5 geolocation api的相關內容，
接著，你利用這個內容抓到自深的經緯度後，將這個經緯度塞入
一開始在創map物件的setView的經緯度欄位中
即
var mymap = L.map('mapid').setView([你的經度, 你的緯度], 13);
這樣子地圖就可以以使用者的位置作展開囉~

Landy Blog

Leaflet和OpenSourceMap-JS寫法

AJAX 與函式應用教學

Leaflet + OpenStreetMap 地圖應用開發