如何将大叶地图包含在 PyQt5 应用程序窗口中？

Question

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.

WANTED OUTPUT

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())

Answer 1

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())