{"id":20619710,"url":"https://github.com/twtrubiks/leaflet-tutorials-interesting","last_synced_at":"2025-04-15T11:55:09.556Z","repository":{"id":84518964,"uuid":"82766166","full_name":"twtrubiks/leaflet-tutorials-interesting","owner":"twtrubiks","description":"leaflet tutorials interesting use Python Flask","archived":false,"fork":false,"pushed_at":"2017-02-22T07:58:27.000Z","size":128,"stargazers_count":25,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T11:55:08.034Z","etag":null,"topics":["google-map","interesting","leaflet","map","python-flask","tutorials"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-22T05:51:02.000Z","updated_at":"2024-12-28T16:26:46.000Z","dependencies_parsed_at":"2023-03-02T04:30:27.980Z","dependency_job_id":null,"html_url":"https://github.com/twtrubiks/leaflet-tutorials-interesting","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fleaflet-tutorials-interesting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fleaflet-tutorials-interesting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fleaflet-tutorials-interesting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fleaflet-tutorials-interesting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/leaflet-tutorials-interesting/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067775,"owners_count":21207395,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-map","interesting","leaflet","map","python-flask","tutorials"],"created_at":"2024-11-16T12:12:20.265Z","updated_at":"2025-04-15T11:55:09.551Z","avatar_url":"https://github.com/twtrubiks.png","language":"JavaScript","readme":"# leaflet-tutorials-interesting\n[leaflet](http://leafletjs.com/) tutorials interesting use Python Flask 📝\n\n* [Youtube Demo](https://youtu.be/JVljuudfamM)\n\n\n\n## Leaflet 與  Google Map 比較\n\n* [leaflet](http://leafletjs.com/) 在手機上表現的效能以及速度勝過 Google Map\n* Google Map 精準度比 [leaflet](http://leafletjs.com/) 高\n* [leaflet](http://leafletjs.com/) 有很多額外的 [plugins](http://leafletjs.com/plugins.html)\n\n## 安裝套件\n確定電腦有安裝 [Python](https://www.python.org/) 之後\n\nclone 我的簡單範例\n\n```\ngit clone https://github.com/twtrubiks/leaflet-tutorials-interesting\n```\n\n接著請在  cmd (命令提示字元) 輸入以下指令\n```\npip install -r requirements.txt\n```\n\n## 使用方法 以及 執行畫面\n\n先產生模擬資料\n```\npython generator_data.py\n```\n執行完畢後， app.db 裡會多出 200 筆資料，可以使用 [SQLiteBrowser](http://sqlitebrowser.org/) 觀看\n\n![alt tag](http://i.imgur.com/QSFJANB.jpg)\n\n接著我們設計簡單的 api ， 其實就是去讀 app.db 的資料，接著在吐給前端而已。\n\n```\n@app.route(\"/api\", methods=['POST'])\ndef api():\n    db_data = MapPets.query.all()\n    infornation_dic = {}\n    infornation_list = []\n    for data in db_data:\n        infornation_dic['data'] = []\n        infornation_dic['Name'] = data.Name\n        infornation_dic['Picture'] = data.Picture\n        infornation_dic['Color'] = data.Color\n        infornation_dic['Longitude'] = data.Longitude\n        infornation_dic['Latitude'] = data.Latitude\n        infornation_list.append(infornation_dic)\n        infornation_dic = {}\n\n    return json.dumps(infornation_list)\n```\n\n\n## 執行畫面\n\n```\npython app.py\n```\n\n首頁\n\n左上角可以全螢幕\n\n![alt tag](http://i.imgur.com/6GcySl1.jpg)\n\n![alt tag](http://i.imgur.com/RQYBOpw.jpg)\n\n點隨任一個動物，會跳出名稱和經緯度\n\n![alt tag](http://i.imgur.com/vL7ai1n.jpg)\n\n也有搜索功能\n\n![alt tag](http://i.imgur.com/ihcEUrZ.jpg)\n\n選定後，會移到該動物的位置\n\n![alt tag](http://i.imgur.com/tiwg6s7.jpg)\n\n\n\n\n## 執行環境\n* Python 3.4.3\n\n## Reference\n* [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster)\n* [leaflet-locatecontrol](https://github.com/domoritz/leaflet-locatecontrol)\n* [leaflet.fullscreen](https://github.com/brunob/leaflet.fullscreen)\n* [leaflet-search](https://github.com/stefanocudini/leaflet-search)\n* [Leaflet.SmoothMarkerBouncing](https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing)\n\n\n## License\nMIT license\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fleaflet-tutorials-interesting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fleaflet-tutorials-interesting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fleaflet-tutorials-interesting/lists"}