經過昨天快速生成leaflet地圖後，是不是覺得之前學leaflet是在幹嘛?
快別這麼想，畢竟沒有leaflet就沒有今天的folium，更何況folium在使用上還是有一些限制的，所以我們今天就來看看folium到底做了甚麼!

檢視生成的HTML網頁

來看一下用folium跑出來的網頁原始碼，如果是依照上一篇文章跑出來的網頁，名稱應該會叫做 myMap.html

Head

首先來看一下網頁裡面head區塊寫了哪些東西：

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>L_PREFER_CANVAS=false; L_NO_TOUCH=false; L_DISABLE_3D=false;</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.2.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

<style>#map_929b734e59b44831afa47e8cdeabd045 {
    position: relative;
    width: 100.0%;
    height: 100.0%;
    left: 0.0%;
    top: 0.0%;
    }
</style>

我來把他稍微拆解一下，第一行屬於網頁的標籤語法，這邊就不說明了，先來看第一部份：

Leaflet

<script>L_PREFER_CANVAS=false; L_NO_TOUCH=false; L_DISABLE_3D=false;</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.2.0/dist/leaflet.js"></script>

這個部分剛好在第15天的文章中有提到，在glonbal switches的地方，文章中只有提到 L_NO_TOUCH, L_DISABLE_3D，沒有說到L_PREFER_CANVAS的部份。可以注意到他有在leaflet.js cdn的前面就先讀取了。還有另外一點就是folium使用的版本是1.2.0，所以如果要用一些新版才有的功能的話，就需要等新版的folium出來，或是自己再從網頁裡面修改，所以說先看leaflet是不是很重要啊~~

jQuery、Boostrap and Leaflet.awesome-markers

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>

這邊共讀取了3個套件，分別是jquery、boostrap及leaflet.awesome-markers。leaflet.awesome-markers在leaflet官網的plugin有提到，在Plugins - Leaflet - Markers & renderers列表中，來源網址為Leaflet.awesome-markers | Github，這部分的支援方式，在後面的folium介紹中應該會提到。

CSS

接下來看一下還有放那些樣式的資料

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.2.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>

上面程式碼包含leaflet、boostrap、font-awesome、leaflet.awesome-markers及leaflet.awesome.rotate的樣式，不過leaflet.awesome.rotate似乎沒有在plugin中看到，不知是不是因為版本關係。原本有懷疑是leaflet.awesome-markers的必要讀取條件，但似乎沒有github上面看到。

<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

接下來這兩行就是CSS的天下啦，設定頁面全填滿，且沒有任何margin及padding。並設定id="map"使用絕對定位，上下左右間格均設為0，如此一來就能看到滿滿的地圖囉~

<style>#map_929b734e59b44831afa47e8cdeabd045 {
    position: relative;
    width: 100.0%;
    height: 100.0%;
    left: 0.0%;
    top: 0.0%;
    }
</style>

在head裡面最後一個區塊，是設定id="map_929b734e59b44831afa47e8cdeabd045"的CSS樣式，map_後面的亂數就是folium隨機產生的，目的就是要應付出現好幾個地圖的狀況才這樣設定(我猜的)。

Body

看完了Head，來看一下Body吧~

<div class="folium-map" id="map_929b734e59b44831afa47e8cdeabd045" ></div>

body裡面就只有一行!!
也就是前面CSS裡id為map_亂數的那個設定，比對一下是不是完全一樣。

看到這邊，心裡有個小小的疑問：既然body裡面只有map_929b734e59b44831afa47e8cdeabd045，那為何在CSS的地方還要有#map的CSS設定呢??

恩.......這個疑問或許以後會得到解答，但肯定不是現在!
好了，看完body之後，再來就要看在body之後的script，這部分就留在明天繼續說吧~