https://github.com/twtrubiks/leaflet-tutorials-interesting
leaflet tutorials interesting use Python Flask
https://github.com/twtrubiks/leaflet-tutorials-interesting
google-map interesting leaflet map python-flask tutorials
Last synced: about 2 months ago
JSON representation
leaflet tutorials interesting use Python Flask
- Host: GitHub
- URL: https://github.com/twtrubiks/leaflet-tutorials-interesting
- Owner: twtrubiks
- License: mit
- Created: 2017-02-22T05:51:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-22T07:58:27.000Z (over 8 years ago)
- Last Synced: 2025-04-15T11:55:08.034Z (about 2 months ago)
- Topics: google-map, interesting, leaflet, map, python-flask, tutorials
- Language: JavaScript
- Homepage:
- Size: 125 KB
- Stars: 25
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# leaflet-tutorials-interesting
[leaflet](http://leafletjs.com/) tutorials interesting use Python Flask 📝
* [Youtube Demo](https://youtu.be/JVljuudfamM)
## Leaflet 與 Google Map 比較
* [leaflet](http://leafletjs.com/) 在手機上表現的效能以及速度勝過 Google Map
* Google Map 精準度比 [leaflet](http://leafletjs.com/) 高
* [leaflet](http://leafletjs.com/) 有很多額外的 [plugins](http://leafletjs.com/plugins.html)
## 安裝套件
確定電腦有安裝 [Python](https://www.python.org/) 之後
clone 我的簡單範例
```
git clone https://github.com/twtrubiks/leaflet-tutorials-interesting
```
接著請在 cmd (命令提示字元) 輸入以下指令
```
pip install -r requirements.txt
```
## 使用方法 以及 執行畫面
先產生模擬資料
```
python generator_data.py
```
執行完畢後， app.db 裡會多出 200 筆資料，可以使用 [SQLiteBrowser](http://sqlitebrowser.org/) 觀看
接著我們設計簡單的 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](https://github.com/Leaflet/Leaflet.markercluster)
* [leaflet-locatecontrol](https://github.com/domoritz/leaflet-locatecontrol)
* [leaflet.fullscreen](https://github.com/brunob/leaflet.fullscreen)
* [leaflet-search](https://github.com/stefanocudini/leaflet-search)
* [Leaflet.SmoothMarkerBouncing](https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing)
## License
MIT license