Maps with complex polygon layers not rendering in Jupyter Lab/Notebook

Please add a code sample or a nbviewer link, copy-pastable if possible

# Your code here

Problem description

I have been trying to run your sample notebook in examples/Geopandas.ipnyb in both Jupyter Lab and Jupyter Notebook. When I execute the cells, they all execute with no error but no map is rendered. I have had a similar problem in my own notebooks that seems to occur when the polygons are complex and have a lot of data points. I can get it to render simple polygons and so it doesn’t seem to be a library problem. Can you confirm this example still works with the latest release?

Versions below: notebook: 5.2.2 Jupyter Lab: 0.30 (note I upgraded to 0.31 but was having issues getting Lab to load) python: 3.6 Folium: 0.5.0

Expected Output

Rendered map in the examples/Geopandas.ipnyb

Output of folium.__version__

0.5.0

[ocefpaf]

There are two separated issues here:

• loading maps on JupyterLab,
• maps with many elements are not loading on Chrome/Chromium on Jupyter.

The former is not in our roadmap! People can try ipyleaflet or, if that works, saving the folium HTML and seeing if JupyterLab can load it. The reason is b/c folium devs have no bandwidth to write a JupyterLab extension (and that was quite te moving target in the past which drove me away from it).

For the latter there is a workaround:

def embed_map(m):
    from IPython.display import IFrame

    m.save('index.html')
    return IFrame('index.html', width='100%', height='750px')

I don’t know the details of why everything works in all the browsers I tested but Chrome so I’m closing this as “won’t fix.” (PRs are still welcome though 😉)

[dstein64]

In the meantime, others encountering this issue can workaround the problem by using the following monkey patch, which works for folium==0.10.0 and branca==0.3.1. This code would have to be executed before using folium (e.g., in an early cell of a Jupyter notebook).

import base64

import folium

def _repr_html_(self, **kwargs):
    html = base64.b64encode(self.render(**kwargs).encode('utf8')).decode('utf8')
    onload = (
        'this.contentDocument.open();'
        'this.contentDocument.write(atob(this.getAttribute(\'data-html\')));'
        'this.contentDocument.close();'
    )
    if self.height is None:
        iframe = (
            '<div style="width:{width};">'
            '<div style="position:relative;width:100%;height:0;padding-bottom:{ratio};">'
            '<iframe src="about:blank" style="position:absolute;width:100%;height:100%;left:0;top:0;'
            'border:none !important;" '
            'data-html={html} onload="{onload}" '
            'allowfullscreen webkitallowfullscreen mozallowfullscreen>'
            '</iframe>'
            '</div></div>').format
        iframe = iframe(html=html, onload=onload, width=self.width, ratio=self.ratio)
    else:
        iframe = ('<iframe src="about:blank" width="{width}" height="{height}"'
                  'style="border:none !important;" '
                  'data-html={html} onload="{onload}" '
                  '"allowfullscreen" "webkitallowfullscreen" "mozallowfullscreen">'
                  '</iframe>').format
        iframe = iframe(html=html, onload=onload, width=self.width, height=self.height)
    return iframe

folium.branca.element.Figure._repr_html_ = _repr_html_