起心動念

由於本身非資訊科系出身，但對於GIS已有多年的經驗，碰巧在python有一些心得，希望能用Folium製作網頁版的地圖。因為Folium是基於Leaflet的套件，所以就拿過來一起看，在這30天希望能夠將Leaflet摸熟，並運用在Folium上，所以前20-25天會先稍微談到Leaflet與Folium的一些使用方法，最後5-10天腦力激盪一下，完成一些應用。

Leaflet介紹

在Leaflet官網開頭就提到，Leaflet是一個開源的JavaScript資源庫，適合移動裝置的互動地圖開發使用。官網中除了Overview，也有一些簡單的教學參考，進階的也有文件以及外掛使用，算是一個相當成熟的資源庫。在今年8月21釋出1.3.4版，只有38 KB!
直接來個起手式吧!建立一個包含地圖的網頁!!

起手式

使用前可以先下載檔案，或是直接在網頁中加入Leaflet的CDN：

1. 在網頁中加入CSS連結

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>
   

2. 加入JavaScript連結
   並在上面的CSS連結之後加上JavaScript連結，一定要在之後!!!

     <!-- 一定要在Leaflet's CSS之後再加入 -->
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
      integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
      crossorigin=""></script>
   

3. 載入jquery(可加可不加，如果不加的話，請忽略後面有關jquery的程式碼)

   <!-- 用jquery的方式將程式碼包起來 -->
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   

4. 給地圖一個空間
   完成Leaflet的連結後，在body中給一個空間放地圖吧！
   命名id 為mapid

   <!-- 想要整個頁面都是地圖，所以我在這邊用 style="width: 100%;"填滿寬 -->
   <div id="mapid" style="width: 100%;"></div>
   

5. 用jquery將網頁的高填滿

   (function($){
     $(document).ready(function(){
   		$('#mapid').height(window.innerHeight);
   	});
   })($)
   

   看到上面這一行之後，你可能會有疑問「為何要用(function(){})()把程式包起來?」，根據Alex宅幹嘛：從jQuery入門到認識JavaScript #1 多載、鍊式與入門觀念當中，Alex大大有提到，使用(function(){})()可以將你的程式封裝，保護裡面的資料。

   要看完整的說明可以看到將近1小時的地方~

6. 建立map容器
   想像在網頁中要建立一個地圖，首先會需要放地圖的容器(空間)，然後在容器中加入底圖、圖層以及想要的物件等。
   首先要先建立map容器，並指定前面建立的div的id:mapid，讓容器能夠在mapid的div中展現，設定地圖的中心點座標及縮放等級。所以在$('#mapid').height(window.innerHeight);下面繼續寫入：

   var myMap = L.map('mapid', {
       center: [22.73444963475145, 120.28458595275877],
       zoom: 14
   });
   

7. 在容器中加底圖
   底下為加入OSM的底圖，包含一些來源資訊。同樣在var map = ......之後繼續填寫
   這樣就完成一個可以縮放的地圖了!!

   L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
       maxZoom: 14,
       attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
   }).addTo(myMap);
   

8. 為了讓畫面填好填滿，在前面加上css設定

   <style>
       body{
           margin: 0;    
           padding: 0;
       }
   </style>
   

完成後開啟網頁就會看到滿滿的地圖囉~
下圖的地圖範圍就是我的母校，國立高雄大學，接下來29天的文章也將會以我的母校以及高雄市為主要空間繼續寫下去，希望大家多多捧場~!!

感謝

感謝Line群裡實戰經驗豐富的邦友King Tzeng邀請群內報名，同時也要謝謝Amos老師邀請組團， 終於成團!
希望能順利完賽

大家一起加油!

如果文章中有錯誤或疑問的地方請各位留言提出指正~

以下分享團隊其他隊員的鐵人賽文章

團隊主題連結

CssCoke - Amos老師

• 影片教學組- 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎
• Modern Web- 連續30天的超實務網頁設計的垂直置中教學

King Tzeng

• Modern Web- 穢土轉生之術～ 重構那些自己寫的Code