Works with IPyLeaflet

Showcase
1

I just wanted to demonstrate that Panel works with the tools you know and love, INCLUDING IPYLEAFLET.

For more on using Ipywidgets with Panel check out the Ipywidget Guide.

For more on IpyLeaflet check out ipyleaflet: Interactive maps

You can serve the script below with panel serve name_of_script.py and you can then see it at http://localhost:5006.

from ipyleaflet import Map, Marker

import panel as pn

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

from ipyleaflet import Map, Marker

ACCENT_BASE_COLOR = "#DAA520"


def get_marker_and_map():
    center = (52.204793, 360.121558)

    lmap = Map(center=center, zoom=15, height=500)

    marker = Marker(location=center, draggable=True)
    lmap.add_layer(marker)
    lmap.layout.height="100%"
    lmap.layout.width="100%"
    return marker, lmap

marker, lmap = get_marker_and_map()

json_widget = pn.pane.JSON({}, height=75)

def on_location_changed(event):
    new = event["new"]
    json_widget.object = {"x": new[0], "y": new[1]}
marker.observe(on_location_changed, 'location')

component = pn.Column(
    pn.panel(lmap, sizing_mode="stretch_both", min_height=500),
    json_widget
)

template = pn.template.FastListTemplate(
    site="Awesome Panel",
    title="IPyLeaflet",
    logo="https://panel.holoviz.org/_static/logo_stacked.png",
    header_background=ACCENT_BASE_COLOR,
    accent_base_color=ACCENT_BASE_COLOR,
    main=[component],
).servable()
6 Likes
2

Hi @Marc, I’m seeing with your example and a simpler one I spun up that basemaps are not loading when passed into panel components. I.e., a ipyleaflet map that displays fine in notebook will not if wrapped in a panel component and/ or served in an app.
Is this something you’ve run into before? Do you happen to have pinned versions for this example?

1 Like
3

You are not the only one and I believe the reason Mr. @jbednar, @Marc and @philippjfr are not really addressing the geoviews/hvplot questions and bugs is their amazing work pushing Panel towards version 1.0 using Bokeh 3.0 and then maybe if they get a contract from geospatial we will get more support :slight_smile:. I am trying to figure out how it works to help out but there are multiple ways to do things behind the scenes and if you find a temporary hack please do share. Otherwise everyone keep up the great work.

1 Like
4

We do have ongoing geospatial funding, though it is not enough to fund much work per month. If you have any more to send our way, please do!

The problem @lalligagger is describing sounds like a CORS issue to me, which is not something we can fix. People who publish map tiles get to decide whether they can be embedded in separate deployments, and if they have chosen not to allow cross-origin usage, you just need to select a different map tile server (or download all the tiles and set up your own server, which takes time and money!). You may be hitting a different problem, but that’s the one I’m aware of! See e.g. javascript - XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header - Stack Overflow .

5

Thank you for the reply and as @StuckDuckF mentioned there is a recent issue I was able to find on this.

Sorry for bringing the issue here. In case anyone is looking for a quick answer, in my case ipyleaflet 17.0 works fine in panel (0.14.2) but 17.1 & 17.2 have the mentioned problem.

With just a couple of months of use I have been really impressed with Panel! Good geospatial viz is never easy in python, it seems.

2 Likes
6

Hi everyone,

I just try example from @Marc above to use ipyleaflet. In jupiter notebook is work fine and show the map, however if we run with panel there is no map showed and there was an error in the terminal says :
Error running application handler <bokeh.application.handlers.notebook.NotebookHandler object at 0x7fe88e0d0280>: module ‘comm’ has no attribute ‘DummyComm’
File ‘ipywidget.py’, line 69, in _on_widget_constructed:
(not (comm and isinstance(widget.comm, comm.DummyComm)) and Traceback (most recent call last):
File “/home/ubuntu/.local/lib/python3.9/site-packages/bokeh/application/handlers/code_runner.py”, line 231, in run
exec(self._code, module.dict)
File “/home/ubuntu/Holoviz/gallery/Tunu/Untitled6.ipynb”, line 49, in
" if (root._bokeh_is_loading > 0) {\n",
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/template/base.py”, line 388, in servable
return super().servable(title, location, area, target)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/viewable.py”, line 390, in servable
self.server_doc(title=title, location=location) # type: ignore
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/template/base.py”, line 351, in server_doc
return self._init_doc(doc, title=title, location=location)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/template/base.py”, line 610, in _init_doc
document = super()._init_doc(doc, comm, title, notebook, location)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/template/base.py”, line 186, in _init_doc
model = obj.get_root(document, comm, preprocess=False)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/layout/base.py”, line 279, in get_root
root = super().get_root(doc, comm, preprocess)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/viewable.py”, line 648, in get_root
root = self._get_model(doc, comm=comm)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/layout/base.py”, line 164, in _get_model
objects = self._get_objects(model, [], doc, root, comm)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/layout/base.py”, line 149, in _get_objects
child = pane._get_model(doc, root, model, comm)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/pane/ipywidget.py”, line 72, in _get_model
model = self._get_ipywidget(self.object, doc, root, comm, **kwargs)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/pane/ipywidget.py”, line 60, in _get_ipywidget
_on_widget_constructed(w, doc)
File “/home/ubuntu/.local/lib/python3.9/site-packages/panel/io/ipywidget.py”, line 69, in _on_widget_constructed
(not (comm and isinstance(widget.comm, comm.DummyComm)) and
AttributeError: module ‘comm’ has no attribute ‘DummyComm’

I use:
ipyleaflet 0.17.0
ipywidgets 7.7.5
ipywidgets-bokeh 1.5.0
panel 1.0.2

1 Like
7

I’m having a similar issue when trying to get an interactive plot as well. Were you ever able to resolve this?

8

Hi @Lewisc2 just try to update your panel? Currently I use panel 1.2.3 and it works.

thanks

9

Works for me with panel=1.3.1, ipyleaflet=0.17.4, ipywidgets_bokeh=1.5.0

# pip install panel ipyleaflet ipywidgets_bokeh
from ipyleaflet import Map, Marker

import panel as pn

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

ACCENT_BASE_COLOR = "#DAA520"


def get_marker_and_map():
    center = (52.204793, 360.121558)

    lmap = Map(center=center, zoom=15, height=500)

    marker = Marker(location=center, draggable=True)
    lmap.add_layer(marker)
    lmap.layout.height="100%"
    lmap.layout.width="100%"
    return marker, lmap

marker, lmap = get_marker_and_map()

json_widget = pn.pane.JSON({}, height=75)

def on_location_changed(event):
    new = event["new"]
    json_widget.object = {"x": new[0], "y": new[1]}

marker.observe(on_location_changed, 'location')

component = pn.Column(
    pn.panel(lmap, sizing_mode="stretch_both", min_height=500),
    json_widget
)

template = pn.template.FastListTemplate(
    title="IPyLeaflet",
    logo="https://panel.holoviz.org/_static/logo_stacked.png",
    header_background=ACCENT_BASE_COLOR,
    accent_base_color=ACCENT_BASE_COLOR,
    main=[component],
).servable()