Reputation: 380
I would like to ask how do I go about including a folium map into PyQt 5 window application such that the map does not take up the whole window. I have found a similar post on StackOverflow "How to show Folium map inside a PyQt5 GUI?", however, the solution code provided shown the folium map takes up the whole of the PyQt 5 window application.
So my question is how do I include the folium map but only takes up a portion of the PyQt 5 window application? As shown below, I am trying to include the map into the rectangle area. *The rectangle black box is drawn on paint for reference purposes.
FYI I have tried out the solution code from the StackOverflow post but I can't seem to be able to resize the map.
CURRENT CODE FOR REFERENCE
from PyQt5.QtWidgets import QMainWindow, QApplication, QPushButton
from PyQt5 import QtWebEngineWidgets
import sys
from PyQt5 import QtGui
from PyQt5.QtCore import QRect
class Window(QMainWindow):
def __init__(self):
super().__init__()
self.title = "MAP PROJECT"
self.left = 200
self.top = 100
self.width = 1500
self.height = 800
self.initWindow()
def initWindow(self):
# set window title
self.setWindowTitle(self.title)
# set window geometry
# self.setGeometry(self.left, self.top, self.width, self.height)
# Disable PyQt 5 application from resizing
self.setFixedSize(self.width, self.height)
self.buttonUI()
self.show()
def buttonUI(self):
shortPathButton = QPushButton("Find shortest path", self)
# (set button location (x, x) set button size (y, y)
shortPathButton.setGeometry(QRect(30, 300, 120, 50))
button2 = QPushButton("Another path", self)
# (set button location (x, x) set button size (y, y)
button2.setGeometry(QRect(30, 370, 120, 50))
button3 = QPushButton("Another path", self)
# (set button location (x, x) set button size (y, y)
button3.setGeometry(QRect(30, 440, 120, 50))
# Below code is to connect the button to the function
# button.clicked.connect(self.ClickMe)
# Create function for shortest path (A* algorithm)
"""def ClickMe(self):
print("Hello World")"""
if __name__ == "__main__":
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())
Upvotes: 2
Views: 4661
Reputation: 243887
The problem has nothing to do with a QWebEngineView or folium but how to place widgets inside the window, if so, then a solution is to use layouts in this case I will use the following structure: First a central widget is established, inside this one QHBoxLayout , and in the QHBoxLayout a QWidget is added as a container to the left side where a QVBoxLayout will be placed where the buttons will be, and to the right side the QWebEngineView:
import io
import sys
import folium
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets
class Window(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.initWindow()
def initWindow(self):
self.setWindowTitle(self.tr("MAP PROJECT"))
self.setFixedSize(1500, 800)
self.buttonUI()
def buttonUI(self):
shortPathButton = QtWidgets.QPushButton(self.tr("Find shortest path"))
button2 = QtWidgets.QPushButton(self.tr("Another path"))
button3 = QtWidgets.QPushButton(self.tr("Another path"))
shortPathButton.setFixedSize(120, 50)
button2.setFixedSize(120, 50)
button3.setFixedSize(120, 50)
self.view = QtWebEngineWidgets.QWebEngineView()
self.view.setContentsMargins(50, 50, 50, 50)
central_widget = QtWidgets.QWidget()
self.setCentralWidget(central_widget)
lay = QtWidgets.QHBoxLayout(central_widget)
button_container = QtWidgets.QWidget()
vlay = QtWidgets.QVBoxLayout(button_container)
vlay.setSpacing(20)
vlay.addStretch()
vlay.addWidget(shortPathButton)
vlay.addWidget(button2)
vlay.addWidget(button3)
vlay.addStretch()
lay.addWidget(button_container)
lay.addWidget(self.view, stretch=1)
m = folium.Map(
location=[45.5236, -122.6750], tiles="Stamen Toner", zoom_start=13
)
data = io.BytesIO()
m.save(data, close_file=False)
self.view.setHtml(data.getvalue().decode())
if __name__ == "__main__":
App = QtWidgets.QApplication(sys.argv)
window = Window()
window.show()
sys.exit(App.exec())
Upvotes: 4