[FIXED] Unable to open a local HTML file generated in folium using wxPython

Issue

I am currently trying to plot GPS coordinates as markers on a map and displaying the result within wxPython.

I have used folium to plot coordinate markers and generate an HTML file:

import folium
fmap = folium.Map([-43.5321,172.6362], zoom_start=12)
folium.Marker([-43.5321,172.6362], popup='Marker1').add_to(fmap)
fmap.save('maparea.html')

I am able to open this HTML file in Firefox without any issues.

I need to create a programme in wxPython to display this HTML file, and I tried implementing the following code:

import wx 
import wx.html2 

class MyBrowser(wx.Dialog): 
    def __init__(self, *args, **kwds): 
        wx.Dialog.__init__(self, *args, **kwds) 

        sizer = wx.BoxSizer(wx.VERTICAL) 
        self.browser = wx.html2.WebView.New(self)
        self.browser.LoadURL("maparea.html")
        sizer.Add(self.browser, 1, wx.EXPAND, 10) 

        self.SetSizer(sizer) 
        self.SetSize((1280, 720)) 

if __name__ == '__main__': 
  app = wx.App() 
  dialog = MyBrowser(None) 
  dialog.Show() 
  app.MainLoop() 

However, all I get is a blank page. If I change the URL in the code to a website (e.g. http://www.google.com), the code above works without issues.

Why am I unable to view the HTML file in wxPython? Is there another way to load and display an HTML file in wxPython? I would prefer to use the HTML file over displaying a screenshot in wxPython, since I would like to retain the ability pan, zoom and click on markers within the map.

(I'm running Python 3.6.8 and wxPython 4.0.3 gtk3 (phoenix) wxWidgets 3.0.5 on Ubuntu 18.04.)

Solution

In addition to the file path needing to be a file:///url there appears to be some issue with an invalid character.
Try it without asking for the folium.Marker and you should see a map of Christchurch.

Edit: folium is using for the Marker the wrong character for a single quote ' it's using ` instead in it's var declarations. i.e. instead of

var html_280344edc4004eb6b0012ec2e57f9b85 = $('<div id="html_280344edc4004eb6b0012ec2e57f9b85" style="width: 100.0%; height: 100.0%;">Marker1</div>')[0]; 

it is providing:

var html_280344edc4004eb6b0012ec2e57f9b85 = $(`<div id="html_280344edc4004eb6b0012ec2e57f9b85" style="width: 100.0%; height: 100.0%;">Marker1</div>`)[0];

You can replace them or use webbrowser rather than wx.html2

Answered By - Rolf of Saxony