Skip to content

Showing folium(based on leaflet.js) map with PyQt desktop app

License

Notifications You must be signed in to change notification settings

yjg30737/pyqt-folium-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

pyqt-folium-example

Showing folium(based on leaflet.js) map with PyQt desktop(+web) app

This is not the static map viewer, this is basic client-server side web app.

Server side is using the 5000 port. Therefore, you should check whether the port 5000 is already in use or not.

Requirements

  • folium
  • QtWebEngineView
  • jinja2 - to use javascript in the Python source
  • flask (Python web framework, it needs to build the web app) - to save the information in DB
  • flask_cors - to fix the CORS error

How to Use

  1. git clone ~
  2. python -m pip install PyQt5-stubs - if this is not installed, QtWebEngineWidgets might not work
  3. python -m pip install PyQtWebEngine
  4. python -m pip install folium
  5. python main.py

How to check the error

This script doesn't support error log on its own(it is very hard), so we need to use the browser like Chrome, Edge, Firefox.

  1. Go to the root directory
  2. Open the script.py file and uncomment the code below
# for test by browser
# app.run()
  1. python server.py
  2. open map.html
  3. Chrome, for example, you can see the log to figure it out it works well or not. It doesn't work for some reasons, you can fix the error on your own.

image

Preview

image

This is very basic one. Zoom in and out and you can see the country's name and region or anything like that

You can switch between each tile by clicking on each radio button.

Each time you click one of them, the Folium HTML file is saved and the QWebEngineView is reloaded.

Note

main.html will be generated for showing the folium map. main.html contains folium related scripts.

TODO

  • Toggle the sidebar
  • Connect one's route to the other
  • Stop the server when the web app is closed
  • Add feature to export it as DB
  • Get the location's name with tooltip

See Also

Note: examples on the list are the static map viewer. It doesn't use the server-side at all.