使用 leaflet.js 來製作互動地圖

以往我們認識的地圖類型的網站大家應該想到的都是 google map，但由於 google map api 不斷漲價的緣故，所以最近也不少人開始去使用其他免費的開源的程式，像這個 leaflet.js 就是幫我們快速建立地圖互動功能的工具。

要使用的話就先照官方文件將 css 與 js 讀入

https://unpkg.com/[email protected]/dist/leaflet.css

https://unpkg.com/[email protected]/dist/leaflet.js

接下來建立一個地圖，可以設定 id="map"，並替他設定樣式(主要是高度不然會看不到)。

接下來像這樣建立地圖就好了：

 // 建立 Leaflet 地圖
  var map = L.map('map');

  // 設定經緯度座標
  map.setView(new L.LatLng(25.040199, 121.511901), 12);
  
  // 設定圖資來源
  var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 16});
  map.addLayer(osm);

圖資可以自己選擇，如果不想用上述的 openstreetmap 的圖資，也可以使用 mapbox 的服務。

只要註冊 mapbox 的帳號後，可以透過以下方式建立 mapbox 樣式的地圖：

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

結果如下：

在地圖上建立 marker：

var marker = L.marker([25.040199, 121.511901]).addTo(map);
marker.bindPopup("總統府").openPopup();

結果：

使用迴圈可以跑出複數的點：

for( $i=0; $i<schools.length; $i++){
        L.marker([schools[$i]["lat"], schools[$i]["lng"]]).addTo(map)
            .bindPopup(schools[$i]["name"])
            .openPopup();
}