leaflet-tutorials-interesting

leaflet tutorials interesting use Python Flask 📝

• Youtube Demo

Leaflet 與 Google Map 比較

• leaflet 在手機上表現的效能以及速度勝過 Google Map
• Google Map 精準度比 leaflet 高
• leaflet 有很多額外的 plugins

安裝套件

確定電腦有安裝 Python 之後

clone 我的簡單範例

git clone https://github.com/twtrubiks/leaflet-tutorials-interesting

接著請在 cmd (命令提示字元) 輸入以下指令

pip install -r requirements.txt

使用方法 以及 執行畫面

先產生模擬資料

python generator_data.py

執行完畢後， app.db 裡會多出 200 筆資料，可以使用 SQLiteBrowser 觀看

接著我們設計簡單的 api ， 其實就是去讀 app.db 的資料，接著在吐給前端而已。

@app.route("/api", methods=['POST'])
def api():
    db_data = MapPets.query.all()
    infornation_dic = {}
    infornation_list = []
    for data in db_data:
        infornation_dic['data'] = []
        infornation_dic['Name'] = data.Name
        infornation_dic['Picture'] = data.Picture
        infornation_dic['Color'] = data.Color
        infornation_dic['Longitude'] = data.Longitude
        infornation_dic['Latitude'] = data.Latitude
        infornation_list.append(infornation_dic)
        infornation_dic = {}

    return json.dumps(infornation_list)

執行畫面

python app.py

首頁

左上角可以全螢幕

點隨任一個動物，會跳出名稱和經緯度

也有搜索功能

選定後，會移到該動物的位置

執行環境

• Python 3.4.3

Reference

• Leaflet.markercluster
• leaflet-locatecontrol
• leaflet.fullscreen
• leaflet-search
• Leaflet.SmoothMarkerBouncing

License

MIT license