Leaflet example not rendering correctly to html

[jfhawkin]

I am trying to add a dynamic map to a webpage using Quarto and ipyleaflet. Working off the example below, I can get it to work with the qmd file render test.qmd --to html with all the elements (as on the example page. However, when I try to run it from Jupyter lab as a notebook, it doesn't give the output. Running quarto preview jupyter-2.ipynb gives a message "/jupyter-leaflet.js (404: Not Found)". Looking at the ipyleaflet documentation, everything should be setup right with the most recent versions of Jupyter lab/notebook. I can see jupyter-leaflet.js under my main environment. I tried running ```jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-leaflet", as recommended in the ipyleaflet documentation for older versions, as well as simply copying the containing folder over. No luck.

Qmd:

---
title: "Jupyter Widgets"
toc: false
execute:
  keep-ipynb: true
---

## Overview

[Jupyter Widgets](https://jupyter.org/widgets) enable you to use JavaScript visualization libraries like [Leaflet](https://ipyleaflet.readthedocs.io/en/latest/), [Plotly](https://plotly.com/python/), and [threejs](https://pythreejs.readthedocs.io/) directly from Python.

If you are using the Jupyter engine with Quarto this is a great way to incorporate interactivity without learning JavaScript.

## Leaflet Example

Including Jupyter Widgets within a Quarto document is as easy as including a plot. For example, here is how we embed a [Leaflet](https://ipyleaflet.readthedocs.io/en/latest/) map:

\```{python}
from ipyleaflet import Map, Marker, basemaps, basemap_to_tiles
m = Map(
  basemap=basemap_to_tiles(
    basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-04-08"
  ),
  center=(52.204793, 360.121558),
  zoom=4
)
m.add_layer(Marker(location=(52.204793, 360.121558)))
m
\```

ipynb

---
title: "Jupyter Widgets"
toc: false
format: 
  html:
    code-fold: false
jupyter: conda-env-geo-web-py
---

from ipyleaflet import Map, Marker, basemaps, basemap_to_tiles
m = Map(
  basemap=basemap_to_tiles(
    basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-04-08"
  ),
  center=(52.204793, 360.121558),
  zoom=4
)
m.add_layer(Marker(location=(52.204793, 360.121558)))
m

# should print map

x=2
x

# print 2 to make sure the notebook is working

[mcanouil]

Could you please format properly your message, i.e. make it readable?
Also, please ensure your example are "working", for instance your Python code cell is not closed.

[mcanouil]

I have no issues with the Quarto document or the Jupyter notebook (generated by Quarto) using venv.

Quarto	Jupyter

I am pretty sure, the issue is your environment/kernel, i.e., jupyter: conda-env-geo-web-py (I don't even know what kernel that is).

[mcanouil]

What's the output of quarto check inside your project?

[jfhawkin]

Thanks! You actually indirectly gave me my answer. Everything works fine, so long as I run it in VSCode and not Jupyter Lab. There were some known issues with Jupyter Lab. It seems they haven't worked out all the kinks. Equally likely, I am missing something in my setup there. Both the qmd and ipynb files correctly render the interactive maps for me, too.