Does panel support leafmap with folium backend?

Panel
1

From this GH issue, it seems like it should. But I know, there doesn’t seem to be any official leafmap examples at panel’s documentation. I am running local JupyterLab server, installled with just pip, not conda. But I can’t seem to get my example to work even after pip install ipywidgets_bokeh. I would execute the code cell, but nothing gets rendered below it. An output cell is created, but it is blank. No errors are showing up in the console that I launched jupyter lab from. Not sure how to look for relevant javascript errors using browser console.

My example is pretty similar to the one in the GH issue, but even simpler:

import leafmap.foliumap as leafmap
import panel as pn
pn.extension(sizing_mode="stretch_width")

def get_map():
    return leafmap.Map(center=[40, -83], zoom=5)

my_map = get_map()

pn.panel(my_map, height=400) or pn.Column(my_map)

If I have a code cell that just executes my_map, it renders the leafmap fine. So I know my leafmap works fine or is setup properly.

pip freeze | grep “jupyter”:

jupyter-events==0.5.0
jupyter_client==7.4.8
jupyter_core==5.1.0
jupyter_server==2.0.1
jupyter_server_terminals==0.4.2
jupyterlab==3.5.1
jupyterlab-pygments==0.2.2
jupyterlab-widgets==1.1.1
jupyterlab_server==2.16.5

pip freeze | grep “bokeh”:

bokeh==2.4.3
ipywidgets-bokeh==1.3.0

Python 3.9.13
OS: Windows 10

2

Ooops, correction. Looks like her example is not using folium backend, but default backend (ipyleaflet backend). If I change my import to just:

import leafmap instead of import leafmap.foliumap as leafmap

then it works. But, I need to use the folium backend because for some reason the default backend can’t work with larger qty of data points.

If there is currently no support for leafmap with folium backend, no worries then!

1 Like
3

Hi @pybokeh

Could you

  • share a minimum, reproducible working example here and
  • make it very clear how to change this into a non-working example
  • and include any errors you see?

Then I will take a look. Thanks.

4

Thanks Marc!

Example that doesn’t work:

import leafmap.foliumap as leafmap  # using folium backend
import panel as pn
pn.extension(sizing_mode="stretch_width")

def get_map():
    return leafmap.Map(center=[40, -83], zoom=5)

my_map = get_map()

pn.panel(my_map, height=400)

Example that does work:

#import leafmap.foliumap as leafmap
import leafmap  # use default backend
import panel as pn
pn.extension(sizing_mode="stretch_width")

def get_map():
    return leafmap.Map(center=[40, -83], zoom=5)

my_map = get_map()

pn.panel(my_map, height=400)

I am not getting errors in the console where I launched jupyter lab from, nor am I getting errors from browser console (Chrome 108.0.5359.125).

5

You can use the to_html method of the map and wrap it in an iframe.

import leafmap.foliumap as leafmap
# import leafmap  # use default backend
import panel as pn
import html

pn.extension("ipywidgets", "folium", sizing_mode="stretch_width")

def get_map():
    return leafmap.Map(center=[40, -83], zoom=5)

def to_iframe(srcdoc: str, **params)->pn.pane.HTML:
    srcdoc = html.escape(srcdoc)
    return pn.pane.HTML(f"""<iframe title='test' srcdoc='{srcdoc}' style='height:100%;width:100%'></iframe>""", **params)

def to_panel(map, **params)->pn.pane.HTML:
    srcdoc = map.to_html()
    return to_iframe(srcdoc=srcdoc, **params)

map = get_map()
url = 'https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-02-16/pine-gulch-fire20/1030010076004E00.tif'
map.add_cog_layer(url, name="Fire (pre-event)")

component = to_panel(map, height=800, background="blue")

pn.template.FastListTemplate(
    site="Awesome Panel",
    title="Leafmap with Folium backend",
    main=[component]
).servable()

image
image1920×914 148 KB

If you need bidirectional communication please upvote Add bidirectional communication to folium · Issue #3986 · holoviz/panel (github.com)

6

Leafmap developer here. This issue is interesting. Usually the ipyleaflet plotting backend is a bit more tricky to use than folium mostly due to the complication caused by the package installation. In your case, it is the opposite, ipyleaflet work while folium doesn’t. Thanks Marc for providing the workaround. It would be great to have support for bidirecitonal communication for folium.

2 Likes