How can i use ipyleaflet instead of folium in PyQt5?

Question

I am working on a project for uni where im trying to get GPS data from a microcontroller and show the position using the pyqt5 web widget. First i used folium but i had to rerender the map everytime to move the marker which is a roundabout way of doing it. So i found ipyleaflet which can move and/or delete markers on will. BUT. Folium has a method _repr_html_() for converting the map to html and displaying it easy, but ipyleaflet doesnt have it. So i found a solution here on stackoverflow and adapted it to my code but it doesnt work for some reason.

Here is my code

import sys
import json
from ipyleaflet import Map, Marker, LayersControl, basemaps
from ui import *
from PyQt5.QtWidgets import QDialog, QApplication

from ipywidgets import HTML, IntSlider
from ipywidgets.embed import embed_minimal_html, embed_data

class MyForm(QDialog):
    def __init__(self):
        super().__init__()
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)

        html_template = """
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>IPyWidget export</title>
        </head>
        <body>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@^1.0.1/dist/embed-amd.js" crossorigin="anonymous"></script>

            <script type="application/vnd.jupyter.widget-state+json">
              {manager_state}
            </script>
            
            <div id="ipyleaflet-map">
                <script type="application/vnd.jupyter.widget-view+json">
                    {widget_views}
                </script>
            </div>

          </body>
        </html>
        """
    
        self.m = Map(center=(24.179509715480204, 12.66299706912081), zoom=16)
        marker = Marker(location=(24.179509715480204, 12.66299706912081), tooltip="woohhooo")
        self.m.add_layer(marker)
        data = embed_data(views=[self.m])
        manager_state = json.dumps(data['manager_state'])
        # print(manager_state)
        widget_views = [json.dumps(data['view_specs'])]
        rendered_template = html_template.format(manager_state=manager_state, widget_views=widget_views)
        # print(rendered_template)
        self.ui.widget.setHtml(rendered_template)
  
if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MyForm()
    w.show()
    sys.exit(app.exec_())

And here is the code for the ui, its pretty simple

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt5 UI code generator 5.15.0
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import QtWebEngineWidgets

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(638, 400)
        self.widget = QtWebEngineWidgets.QWebEngineView(Dialog)
        self.widget.setGeometry(QtCore.QRect(9, 9, 621, 390))
        self.widget.setObjectName("widget")

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))

And this is the error message that i get

js: Uncaught TypeError: Failed to construct 'URL': Invalid URL

When i open the generated html file in a browser it works fine but my code errors for some reason.

EDIT: How to add an Ipyleaflet map to a PyQt5 application? Here is the answer that i mentioned

How can i use ipyleaflet instead of folium in PyQt5?

0 Answers0