CODEWITHSUNDEEP
htmlpysidefoliumqwebengineview
user25363909
user25363909

Reputation: 1

error "Uncaught ReferenceError: L is not defined" running folium html file through QWebEngineView

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\"\u003eOpenStreetMap\u003c/a\u003e 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

EDIT had to remove few lines from HTML file because stackoverflow was marking it as a spam

Upvotes: 0

Views: 162

Answers (1)

nmd_r1_ad
nmd_r1_ad

Reputation: 1

The same error. Idk, but it's working:

data = io.BytesIO()
self.m.save(data, close_file=False)
self.web_view.setHtml(data.getvalue().decode()) # web_view is an QWebEngineView instance

Upvotes: 0

Related Questions