iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
3
Modern Web

使用Leaflet及Folium開啟網頁地圖大門系列 第 1

01. Leaflet_起手式

起心動念

由於本身非資訊科系出身,但對於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!
直接來個起手式吧!建立一個包含地圖的網頁!!/images/emoticon/emoticon08.gif

起手式

使用前可以先下載檔案,或是直接在網頁中加入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天的文章也將會以我的母校以及高雄市為主要空間繼續寫下去,希望大家多多捧場~!!
Leaflet起手式完成畫面

感謝

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

大家一起加油!/images/emoticon/emoticon76.gif

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

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

團隊主題連結

CssCoke - Amos老師

King Tzeng


下一篇
02. Leaflet_Map Class基本介紹(上)
系列文
使用Leaflet及Folium開啟網頁地圖大門30

尚未有邦友留言

立即登入留言