檢視 Leaflet.js 的原始碼

[[分類:OpenStreetMap]]
===安裝 jupyter ===
*打開終端機，安裝jupyter指令：'''!pip install folium'''。（MAC 使用者不用加「!」）
*打開終端機，安裝jupyter指令：'''!pip install notebook'''。（MAC 使用者不用加「!」）
*打開終端機，執行jupyter指令：'''jupyter notebook'''，安裝完成 jupyter 將會開啟瀏覽器。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_初始介面.png' width='600px' />

===使用方式：===
*如何新增 python 檔案。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_新增py.png' width='600px' />
*程式碼編輯介面。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_程式碼編輯介面.png' width='600px' />

===我的地圖===
*應用 Python 讀取 csv<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_顯示地標.png' width='600px' />
<pre>
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=14)

# 增加 markers
for i in range(0, len(data)):
    folium.Marker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']], popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m
</pre>
*如何變化標記：將標記改變成紅色圈。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_改變標記01.png' width='600px' />
<pre>
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)

# 增加 markers
for i in range(0, len(data)):
    
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
    radius=5,
    color='red',
    fill=True,
    fi11_color='red',
    popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m
</pre>
*如何變化標記：將標記改變成藍色圈且放大。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_改變標記02.png' width='600px' />
<pre>
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)

# 增加 markers
for i in range(0, len(data)):
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
    radius=8,
    color='blue',
    fill=True,
    fi11_color='blue',
    popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m
</pre>
*將程式轉換成網頁<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_網頁儲存.png' width='600px' /><br/><br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_網頁.png' width='600px' />
<pre>
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)

# 增加 markers
for i in range(0, len(data)):
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
    radius=8,
    color='blue',
    fill=True,
    fi11_color='blue',
    popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m

# 將 map 轉換成 網頁
m.save("index.html")
</pre>