Leaflet.js

安裝 jupyter

• 打開終端機，安裝jupyter指令：!pip install folium。（MAC 使用者不用加「!」）
• 打開終端機，安裝jupyter指令：!pip install notebook。（MAC 使用者不用加「!」）
• 打開終端機，執行jupyter指令：jupyter notebook，安裝完成 jupyter 將會開啟瀏覽器。
  

使用方式：

• 如何新增 python 檔案。
  
• 程式碼編輯介面。
  

我的地圖

• 應用 Python 讀取 csv
  

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

• 如何變化標記：將標記改變成紅色圈。
  

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

• 如何變化標記：將標記改變成藍色圈且放大。
  

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

• 將程式轉換成網頁
  
  
  

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")