epifanio/pyqtwebtest.html

## pyqtwebtest.html
<!DOCTYPE html>
<html>
<head>
    <title>PyQtLeaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script>
    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

    var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
        streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

    var map = L.map('map', {
        center: [10, 10],
        zoom: 10,
        layers: [grayscale]
    });

    var baseLayers = {
        "Grayscale": grayscale,
        "Streets": streets
    };
    L.control.layers(baseLayers).addTo(map);

    // this is the "bounds" variable which I am trying to get from pyqt
    bounds = [map.getBounds().getSouthWest().lat, map.getBounds().getSouthWest().lng, map.getBounds().getNorthEast().lat, map.getBounds().getNorthEast().lng]
    console.log(bounds)
</script>
</body>
</html>

## pyqtwebtest.py
#!/usr/local/bin/python36

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *


class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.form_widget = FormWidget(self)
        _widget = QWidget()
        _layout = QVBoxLayout(_widget)
        _layout.addWidget(self.form_widget)
        self.setCentralWidget(_widget)


class FormWidget(QWidget):
    def __init__(self, parent):
        super(FormWidget, self).__init__(parent)
        self.__controls()
        self.__layout()

    def __controls(self):
        self.browser = QWebEngineView()
        self.browser.load(QUrl('http://localhost:8000/pyqtwebtest.html'))

    def __layout(self):
        self.vbox = QVBoxLayout()
        self.hBox = QVBoxLayout()
        self.getboundsbutton = QPushButton()
        self.mapbbox = QLineEdit()
        self.hBox.addWidget(self.browser)
        self.hBox.addWidget(self.getboundsbutton)
        self.hBox.addWidget(self.mapbbox)
        self.vbox.addLayout(self.hBox)
        self.setLayout(self.vbox)

        self.getboundsbutton.clicked.connect(self.updateBounds)

    def updateBounds(self):
        self.browser.page().runJavaScript("[map.getBounds().getSouthWest().lat, \
                                            map.getBounds().getSouthWest().lng, \
                                            map.getBounds().getNorthEast().lat, \
                                            map.getBounds().getNorthEast().lng]",
                                            self.getBounds)

    def getBounds(self, bounds):
        self.mapbbox.setText(str(bounds))
        self.bounds=bounds
        print(self.bounds)

def main():
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    app.exec_()


if __name__ == '__main__':
    sys.exit(main())
	<!DOCTYPE html>
	<html>
	<head>
	<title>PyQtLeaflet</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
	<style>
	#map {
	width: 600px;
	height: 400px;
	}
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script>
	var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

	var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
	streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});

	var map = L.map('map', {
	center: [10, 10],
	zoom: 10,
	layers: [grayscale]
	});

	var baseLayers = {
	"Grayscale": grayscale,
	"Streets": streets
	};
	L.control.layers(baseLayers).addTo(map);

	// this is the "bounds" variable which I am trying to get from pyqt
	bounds = [map.getBounds().getSouthWest().lat, map.getBounds().getSouthWest().lng, map.getBounds().getNorthEast().lat, map.getBounds().getNorthEast().lng]
	console.log(bounds)
	</script>
	</body>
	</html>
	#!/usr/local/bin/python36

	import sys
	from PyQt5.QtCore import *
	from PyQt5.QtGui import *
	from PyQt5.QtWidgets import *
	from PyQt5.QtWebEngineWidgets import *


	class MainWindow(QMainWindow):
	def __init__(self, parent=None):
	super(MainWindow, self).__init__(parent)
	self.form_widget = FormWidget(self)
	_widget = QWidget()
	_layout = QVBoxLayout(_widget)
	_layout.addWidget(self.form_widget)
	self.setCentralWidget(_widget)


	class FormWidget(QWidget):
	def __init__(self, parent):
	super(FormWidget, self).__init__(parent)
	self.__controls()
	self.__layout()

	def __controls(self):
	self.browser = QWebEngineView()
	self.browser.load(QUrl('http://localhost:8000/pyqtwebtest.html'))

	def __layout(self):
	self.vbox = QVBoxLayout()
	self.hBox = QVBoxLayout()
	self.getboundsbutton = QPushButton()
	self.mapbbox = QLineEdit()
	self.hBox.addWidget(self.browser)
	self.hBox.addWidget(self.getboundsbutton)
	self.hBox.addWidget(self.mapbbox)
	self.vbox.addLayout(self.hBox)
	self.setLayout(self.vbox)

	self.getboundsbutton.clicked.connect(self.updateBounds)

	def updateBounds(self):
	self.browser.page().runJavaScript("[map.getBounds().getSouthWest().lat, \
	map.getBounds().getSouthWest().lng, \
	map.getBounds().getNorthEast().lat, \
	map.getBounds().getNorthEast().lng]",
	self.getBounds)

	def getBounds(self, bounds):
	self.mapbbox.setText(str(bounds))
	self.bounds=bounds
	print(self.bounds)

	def main():
	app = QApplication(sys.argv)
	win = MainWindow()
	win.show()
	app.exec_()


	if __name__ == '__main__':
	sys.exit(main())