Leafmap Legend Not displaying in shiny python

micboat commented 2 months ago

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

gadenbuie commented 2 months ago

Thanks @micboat, could you share the results of pip freeze for this project? I can't quite get the example running, likely due to needing a specific combination of package versions.

micboat commented 2 months ago

Thanks.

(.venv)  % pip3 freeze
anyio==4.4.0
appdirs==1.4.4
appnope==0.1.4
argon2-cffi==23.1.0
argon2-cffi-bindings==21.2.0
arrow==1.3.0
asgiref==3.8.1
asttokens==2.4.1
async-lru==2.0.4
attrs==23.2.0
Babel==2.15.0
beautifulsoup4==4.12.3
bleach==6.1.0
boto3==1.35.3
botocore==1.35.3
bqplot==0.12.43
branca==0.7.2
certifi==2024.6.2
cffi==1.16.0
charset-normalizer==3.3.2
chevron==0.14.0
click==8.1.7
colour==0.1.5
comm==0.2.2
contourpy==1.2.1
cycler==0.12.1
debugpy==1.8.2
decorator==5.1.1
defusedxml==0.7.1
duckdb==1.0.0
exceptiongroup==1.2.1
executing==2.0.1
faicons==0.2.2
fastjsonschema==2.20.0
filelock==3.15.4
flatterer==0.19.19
folium==0.17.0
fonttools==4.53.0
fqdn==1.5.1
future==1.0.0
gdown==5.2.0
geojson==3.1.0
geopandas==1.0.0
googledrivedownloader==0.4
h11==0.14.0
here-map-widget-for-jupyter==1.1.3
htmltools==0.5.2
httpcore==1.0.5
httpx==0.27.0
idna==3.7
ijson==3.3.0
ipyevents==2.0.2
ipyfilechooser==0.6.0
ipykernel==6.29.5
ipyleaflet==0.19.1
ipython==8.18.0
ipython-genutils==0.2.0
ipytree==0.2.2
ipyvue==1.11.1
ipyvuetify==1.9.4
ipywidgets==7.8.1
isoduration==20.11.0
jedi==0.19.1
Jinja2==3.1.4
jmespath==1.0.1
joblib==1.4.2
json5==0.9.25
jsonpointer==3.0.0
jsonschema==4.22.0
jsonschema-specifications==2023.12.1
jupyter-events==0.10.0
jupyter-leaflet==0.19.1
jupyter-lsp==2.2.5
jupyter_client==8.6.2
jupyter_core==5.7.2
jupyter_server==2.14.1
jupyter_server_terminals==0.5.3
jupyterlab==4.2.3
jupyterlab_pygments==0.3.0
jupyterlab_server==2.27.2
jupyterlab_widgets==1.1.9
kiwisolver==1.4.5
leafmap==0.35.2
linkify-it-py==2.0.3
lzstring==1.0.4
mapclassify==2.6.1
markdown-it-py==3.0.0
MarkupSafe==2.1.5
matplotlib==3.9.0
matplotlib-inline==0.1.7
mdit-py-plugins==0.4.1
mdurl==0.1.2
mistune==3.0.2
mss==9.0.1
nbclient==0.10.0
nbconvert==7.16.4
nbformat==5.10.4
nest-asyncio==1.6.0
networkx==3.3
notebook==7.2.1
notebook_shim==0.2.4
numpy==1.26.4
orjson==3.10.7
overrides==7.7.0
packaging==24.1
pandas==2.2.2
pandocfilters==1.5.1
parso==0.8.4
pexpect==4.9.0
pillow==10.3.0
platformdirs==4.2.2
plotly==5.22.0
prometheus_client==0.20.0
prompt-toolkit==3.0.36
psutil==6.0.0
ptyprocess==0.7.0
pure-eval==0.2.2
pyarrow==16.1.0
pycparser==2.22
PyCRS==1.0.2
pydeck==0.9.1
Pygments==2.18.0
pyogrio==0.9.0
pyparsing==3.1.2
pyproj==3.6.1
pyshp==2.3.1
PySocks==1.7.1
pystac==1.10.1
pystac-client==0.8.2
python-box==7.2.0
python-dateutil==2.9.0.post0
python-json-logger==2.0.7
python-multipart==0.0.9
pytz==2024.1
PyYAML==6.0.1
pyzmq==26.0.3
questionary==2.0.1
referencing==0.35.1
requests==2.32.3
rfc3339-validator==0.1.4
rfc3986-validator==0.1.1
rpds-py==0.18.1
s3transfer==0.10.2
scikit-learn==1.5.0
scipy==1.14.0
scooby==0.10.0
seaborn==0.13.2
Send2Trash==1.8.3
shapely==2.0.4
shiny==0.10.2
shinylive==0.5.1
shinyswatch==0.6.1
shinywidgets==0.3.2
six==1.16.0
sniffio==1.3.1
soupsieve==2.5
stack-data==0.6.3
starlette==0.37.2
tenacity==8.4.2
terminado==0.18.1
threadpoolctl==3.5.0
tinycss2==1.3.0
tomli==2.0.1
tornado==6.4.1
tqdm==4.66.4
traitlets==5.14.3
traittypes==0.2.1
types-python-dateutil==2.9.0.20240316
typing_extensions==4.12.2
tzdata==2024.1
uc-micro-py==1.0.3
uri-template==1.3.0
urllib3==2.2.2
uvicorn==0.30.1
watchfiles==0.22.0
wcwidth==0.2.13
webcolors==24.6.0
webencodings==0.5.1
websocket-client==1.8.0
websockets==12.0
whitebox==2.3.4
whiteboxgui==2.3.0
widgetsnbextension==3.6.8
xyzservices==2024.6.0

gadenbuie commented 2 months ago

Thanks! I can reproduce the behavior -- the "Population" legend is expected in the map but not shown when used in Shiny via shinywidgets.

Actual	Expected

@cpsievert I think we can move this issue to posit-dev/py-shinywidgets.

Just a note that I had to comment out here-map-widget-for-jupyter in the requirements above

❯ uv pip install -r requirements.txt
  × No solution found when resolving dependencies:
  ╰─▶ Because here-map-widget-for-jupyter==1.1.3 depends on branca>=0.3.1,<0.5 and you require branca==0.7.2, we can conclude that
      your requirements and here-map-widget-for-jupyter==1.1.3 are incompatible.
      And because you require here-map-widget-for-jupyter==1.1.3, we can conclude that your requirements are unsatisfiable.

posit-dev / py-shinywidgets