jupyter-widgets / ipyleaflet

A Jupyter - Leaflet.js bridge
https://ipyleaflet.readthedocs.io
MIT License
1.48k stars 363 forks source link

Incorrect rendering in Jupyter lab/html #1113

Open jfhawkin opened 1 year ago

jfhawkin commented 1 year ago

I am trying to setup a webpage with an interactive map using Quarto and ipyleaflet based on the following example: https://quarto.org/docs/interactive/widgets/jupyter.html

I'm running an example script from the ipyleaflet documentation (https://ipyleaflet.readthedocs.io/en/latest/layers/geodata.html) as follows

from ipyleaflet import Map, GeoData, basemaps, LayersControl
import geopandas
import json

countries = geopandas.read_file(geopandas.datasets.get_path('naturalearth_lowres'))

m = Map(center=(52.3,8.0), zoom = 3, basemap= basemaps.Esri.WorldTopoMap)

geo_data = GeoData(geo_dataframe = countries,
                   style={'color': 'black', 'fillColor': '#3366cc', 'opacity':0.05, 'weight':1.9, 'dashArray':'2', 'fillOpacity':0.6},
                   hover_style={'fillColor': 'red' , 'fillOpacity': 0.2},
                   name = 'Countries')

m.add_layer(geo_data)
m.add_control(LayersControl())

m

This renders correctly when run in Jupyter notebook but not Jupyter lab. In the notebook (6.5.2), it gives the map with the countries layer built off a geopandas db. In lab (3.5.0), it only displays the basemap (no countries or layer selector). In both cases, running ```quarto preview MY_FILE.ipynb" does not display any cell output.

Running !jupyter labextension list gives me (after creating a clean environment with only ipyleaflet/geopandas added)

Config option `kernel_spec_manager_class` not recognized by `ListLabExtensionsApp`.
[W 2023-05-10 16:12:37.455 LabApp] Config option `kernel_spec_manager_class` not recognized by `LabApp`.
JupyterLab v3.5.0
C:\Users\XXX\Anaconda3\share\jupyter\labextensions
        jupyter-leaflet v0.17.2 enabled ok
        jupyterlab_pygments v0.2.2 enabled ok (python, jupyterlab_pygments)
        @jupyter-widgets/jupyterlab-manager v5.0.7 enabled ok (python, jupyterlab_widgets)

Other labextensions (built into JupyterLab)
   app dir: C:\Users\XXX\Anaconda3\share\jupyter\lab
jfhawkin commented 1 year ago

I ran some additional tests and posted a related question to the Quarto team. Everything seems to work right using their qmd file but not the ipynb file generated from it. I get a partially rendered map in Jupyter lab (base map only) and no output in the html (with a message "/jupyter-leaflet.js (404: Not Found)" in the terminal).