ipyleaflet example not working properly with JupyterLab

[giswqs]

The ipyleaflet example works fine with solara run. However, it is not working properly with JupyterLab. After running the code cell, changing the zoom slider can change the map zoom level. If you pan and zoom the map, the zoom slider will not be updated. Then moving the zoom slider will not zoom the map. It stops working completely.

import ipyleaflet

import solara

zoom = solara.reactive(5)
center = solara.reactive((53.2305799, 6.5323552))

@solara.component
def Page():
    with solara.Column(style={"min-width": "500px", "height": "500px"}):
        # solara components support reactive variables
        solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
        # using 3rd party widget library require wiring up the events manually
        # using zoom.value and zoom.set
        ipyleaflet.Map.element(  # type: ignore
            zoom=zoom.value,
            on_zoom=zoom.set,
            center=center.value,
            on_center=center.set,
            scroll_wheel_zoom=True,
        )
        solara.Text(f"Zoom: {zoom.value}")
        solara.Text(f"Center: {center.value}")

Page()

[giswqs]

I also tried out the example with leafmap. Same issue above. In addition, when I pan the map, the zoom slider disappears.

pip install leafmap

import leafmap

import solara

zoom = solara.reactive(5)
center = solara.reactive((53.2305799, 6.5323552))

@solara.component
def Page():
    with solara.Column(style={"min-width": "500px", "height": "520px"}):
        # solara components support reactive variables
        solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
        # using 3rd party widget library require wiring up the events manually
        # using zoom.value and zoom.set
        leafmap.Map.element(  # type: ignore
            zoom=zoom.value,
            on_zoom=zoom.set,
            center=center.value,
            on_center=center.set,
            scroll_wheel_zoom=True,
        )
        solara.Text(f"Zoom: {zoom.value}")
        solara.Text(f"Center: {center.value}")

Page()

[maartenbreddels]

I have trouble reproducing that the slider and map are not 'connected' anymore. Which version of ipywidgets and jupyter lab are you using?

[giswqs]

That might indeed be a package version issue. I was using my home computer for that demo. I will check the package versions when I am back home tonight.

It seems working fine on my office computer with the following version:

ipyleaflet         0.17.0
ipywidgets         7.7.2
jupyterlab         3.5.2