convert notebook with html file embedded (not referenced to a local file)

[Alcampopiano]

Hello,

Apologies for not being able to piece this together from what I think is a related post.

I have a Folium map which is saved as a standalone HTML file. I can display this map inside of a jupyter notebook by doing the following:

IFrame(src='my_map.html', width=900, height=600)

Of course the map is a locally referenced file and so when I export this notebook and view it from another path (or on a remote server), the map is not found/is not displayed.

Is there a recommended way of embedding the HTML so that everything is contained inside the single exported notebook?

I have tried various things with nbconvert, for example:

jupyter nbconvert --to html --EmbedImagesPreprocessor.embed_images=True my_notebook.ipynb

I have also tried reading the HTML file into my notebook as a string. I figured I could use the notebook to render the string as HTML (and therefore everything would be self contained). This almost works as the interactive map appears; however, it is narrow (as shown below) and disappears completely when exported.

Any help is much appreciated. If necessary I can always build the interactive maps directly in this notebook and therefore avoid linked/referenced files altogether.

Allan

[MSeal]

The display(HTML(html_str)) is the recommended way for bundling the assets with the notebook object itself. How does this rendering differ visually from the IFrame visualization in this case? It might be that the notebook css rules are interfering with the rendering that the IFrame buffers. If that's the case you can also save the html_str to a tempfile right before doing the IFrame call to regenerate it in the notebook in the same manner.

[Alcampopiano]

Hi Matt,

Thanks for the response. I will try to answer your question.

When I display the file in an IFrame as follows:

IFrame(src='my_map.html', width=900, height=600)

It displays perfectly; however, it is an external file and therefore will not be bundled with the exported notebook.

When I display the map using display(HTML(html_str)) I get the image and behaviour noted above.

Interestingly, I just discovered that if I base64 encode the string and display it with IFrame it renders nicely (at least in Firefox, but I think that is a separate issue).

Matt, thanks for explaining the recommended way of bundling this asset. I can close the issue since the base64 encoded string does work as follows:

html_str = "data:text/html;base64," + base64.b64encode(html_str.encode('utf-8')).decode('utf-8')
display(IFrame(src=html_str, width=900, height=600))

[mgeier]

I guess it doesn't really make a difference, but you can also skip the base64 step:

import urllib
data_uri = 'data:text/html;charset=utf-8,' + urllib.parse.quote(html_str)
display(IFrame(data_uri, width='100%', height='250'))