Leafmap Legend Not displaying in shiny python

Hi, thanks for bringing shiny to python. Not sure if this is something you can help with:

Environment Information

leafmap version:0.35.2
shiny:0.10.2
shinywidgets:0.3.2
Python version: 3.10.4
ipywidgets==7.8.1
Operating System: MacOS monterey

Description

Describe what you were trying to get done. Am trying to render leafmap (which uses ipyleaflet) within shiny app (python) using the chloropleth example here: example. Am using leafmap because of its added functionality and ease of use. Chloropleth Map display as expected. Only issue is the legend doesnt display. it just show. up as a tiny white square. Raised the issue here: [https://github.com/opengeos/leafmap/issues/875#issue-2479023780]() but was directed here

What I Did

from ipyleaflet import *
from shiny.express import  ui
from shinywidgets import  render_widget

import leafmap
data = leafmap.examples.datasets.countries_geojson

ui.page_opts(title="Market Change Profile", 

             )

with ui.sidebar(open="open"):
    ui.h4("Year Filter")

ui.nav_spacer()

with ui.nav_panel("Map"):
    with ui.card(full_screen=True):
        ui.card_header(f"Test Map")

        @render_widget
        def map_ui():
            m = leafmap.Map()
            m.add_data(
                data, column="POP_EST", scheme="Quantiles", cmap="Blues", legend_title="Population"
            )
            return m

If there was a crash, please include the traceback here.


HTML(value="<html>\n<body>\n  <div class='my-legend'>\n  <div class='legend-title'>Population</div>\n  <div class='legend-scale'>\n    <ul class='legend-labels'>\n      <li><span style='background:#f7fbff;'></span>[       140,    2484780]</li>\n      <li><span style='background:#c6dbef;'></span>(   2484780,    6229794]</li>\n      <li><span style='background:#6baed6;'></span>(   6229794,   14668522]</li>\n      <li><span style='background:#2171b5;'></span>(  14668522,   38476269]</li>\n      <li><span style='background:#08306b;'></span>(  38476269, 1379302771]</li>\n    </ul>\n  </div>\n  </div>\n\n  <style type='text/css'>\n    .my-legend .legend-title {\n      text-align: left;\n      margin-bottom: 2px;\n      margin-left: 2px;\n      font-weight: bold;\n      font-size: 90%;\n      }\n    .my-legend .legend-scale ul {\n      margin: 0;\n      margin-bottom: 5px;\n      padding: 0;\n      float: left;\n      list-style: none;\n      }\n    .my-legend .legend-scale ul li {\n      font-size: 80%;\n      list-style: none;\n      margin-left: 1px;\n      line-height: 18px;\n      margin-bottom: 2px;\n      }\n    .my-legend ul.legend-labels li span {\n      display: block;\n      float: left;\n      height: 16px;\n      width: 30px;\n      margin-right: 5px;\n      margin-left: 2px;\n      border: 1px solid #999;\n      }\n    .my-legend .legend-source {\n      font-size: 70%;\n      color: #999;\n      clear: both;\n      }\n    .my-legend a {\n      color: #777;\n      }\n  </style>\n</body>\n</html>\n")
INFO:     127.0.0.1:57549 - "GET /jupyter-leaflet.js HTTP/1.1" 404 Not Found
INFO:     127.0.0.1:57545 - "GET /ipyevents.js HTTP/1.1" 404 Not Found
INFO:     127.0.0.1:57547 - "GET /jupyter-leaflet.js HTTP/1.1" 404 Not Found
INFO:     127.0.0.1:57549 - "GET /ipyevents.js HTTP/1.1" 404 Not Found

posit-dev / py-shiny