I’m trying to display a HTML file generated trough folium in the QWebEngineView Widget.
The HTML file is running fine when i open it in browser but gives an error when running it with QWebEngineView
Im using a M2 Macbook Air
python – 3.12.3
pyside6 – 6.7.1
folium – 0.16.0
I’m generating the HTML file through the following python code
import folium
loc = [40.713676187303776, -74.01269203808448]
m = folium.Map(location=loc)
m.save("/Users/yasharya/Documents/projects/PySide6/venv/Pyside6_Learn/QWebEngine/map.html")
The HTML file is created directly in directory where the main python code is.
The HTML code generated is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>
</head>
<body>
<div class="folium-map" id="map" ></div>
</body>
<script>
var map = L.map(
"map",
{
center: [28.98603581939582, 77.70582295635853],
crs: L.CRS.EPSG3857,
zoom: 10,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_1cabcf125de9d18cb7071e63fa140663 = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "u0026copy; u003ca href="https://www.openstreetmap.org/copyright"u003eOpenStreetMapu003c/au003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
);
tile_layer_1cabcf125de9d18cb7071e63fa140663.addTo(map);
</script>
</html>
Then i run the main code which run the HTML file
class widget(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("Map")
self.view = QWebEngineView()
local_file = os.path.abspath("/Users/yasharya/Documents/projects/PySide6/venv/Test/map.html")
self.view.setUrl(QUrl.fromLocalFile(local_file))
layout = QHBoxLayout()
layout.addWidget(self.view)
self.setLayout(layout)
if __name__ == "__main__":
app = QApplication(sys.argv)
widow = widget()
widow.show()
app.exec()
When running the code it shows the following error -> Uncaught ReferenceError: L is not defined
error
QWebEngineView
Although i get the QWebEngingView the html file is not loaded
- I tried asking chatGPT for an solution it give me some code it didn’t work
- I check QWebEngineView by running some other HTML file it runs fine
- I know that QWebEngineView cant run file bigger than 2mb the map file is smaller then that
- someone other then me also had this problem it was asked in tht QtForm but it remains unsolved
New contributor
user25363909 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.