Ipyleaflet widget_control not show correctly with widgets.Output

[xiaogangzhu]

Hi all,

I am trying to render a colorbar to the map but it is not working correctly. The code for this issue:

import ipywidgets as widgets

# make colorbar
colors = ["#d7191c", "#fdae61", "#ffffbf", "#abdda4", "#2b83ba"]
vmin = z_orig.min()
vmax = z_orig.max()
levels = len(colors) * 10
cm = branca.colormap.LinearColormap(colors, vmin=vmin, vmax=vmax).to_step(5)

output = widgets.Output()
position = "bottomright"
colormap_ctrl = ipyleaflet.WidgetControl(
            widget=output,
            position=position,
            # transparent_bg=transparent_bg,
            # **kwargs,
        )
with output:
    output.outputs = ()
    display(cm)

m = Map(
    center=[0, 0],
    zoom=3,
    scroll_wheel_zoom=True,
    basemap=basemaps.CartoDB.DarkMatter,
)

m.add(colormap_ctrl)

This work well in jupyterlab

But not for shiny app, which only has a small point in the bottom right

the version of each pacakage
shiny 1.2.1
shinywidgets 0.3.4
ipywidgets 7.8.5

[cpsievert]

Can you share the code you're using to try t get this working with shiny? Generally speaking display() doesn't work in a shiny context. Instead, you'll want to use @render_widget for display.

[xiaogangzhu]

from shiny import App, reactive, render, ui, req
from shinywidgets import render_widget, output_widget
from ipyleaflet import (
    Map,
)
import ipyleaflet
import ipywidgets as widgets
from IPython.display import display
import branca

app_ui = ui.page_fluid(output_widget("map"))


# Define Server
def server(input, output, session):
    @reactive.effect
    # @render_widget
    def _():
        # make colorbar
        colors = ["#d7191c", "#fdae61", "#ffffbf", "#abdda4", "#2b83ba"]
        vmin = 0
        vmax = 1
        levels = len(colors)
        cm = branca.colormap.LinearColormap(colors, vmin=vmin, vmax=vmax).to_step(
            levels
        )

        output = widgets.Output()
        position = "bottomright"
        colormap_ctrl = ipyleaflet.WidgetControl(
            widget=output,
            position=position,
            # transparent_bg=transparent_bg,
            # **kwargs,
        )
        with output:
            output.outputs = ()
            display(cm)
        map.widget.add(colormap_ctrl)

    @render_widget
    def map():
        center = (18.5, 116.4)
        zoom = 4.5

        # Create map
        m = Map(
            center=center,
            zoom=zoom,
            # interpolation="nearest",
            # basemap=basemaps.CartoDB.DarkMatter,
            scroll_wheel_zoom=True,
        )

        return m


# Create Shiny app
app = App(app_ui, server, debug=False)

[xiaogangzhu]

Any update?