Render ipyleaflet and ipywidgets in mkdocs-jupyter

[giswqs]

The documentation website (https://leafmap.org) is built using MkDocs and mkdocs-jupyter with GitHub Actions (mkdocs.yml and docs.yml). Currently, it seems mkdocs-jupyter can only render folium maps. Ipyleaflet maps and ipywidgets do not show up on the webpage. Any advice on making the ipyleaflet-based interactive maps show up on https://leafmap.org would be greatly appreciated.

Examples:

• folium: https://leafmap.org/notebooks/01_leafmap_intro (interactive map working)
• ipyleaflet: https://leafmap.org/notebooks/18_point_layer (interactive map does not show up)
• heremap: https://leafmap.org/notebooks/16_heremap (interactive map does not show up)

@deeplook @sackh @martinRenou @davidbrochart @danielfrg @squidfunk @chrieke

[danielfrg]

I think the main issue is that the mkdocs-jupyter does not include the amd-embed.js from jupyter-widgets.

Take a look at: https://ipywidgets.readthedocs.io/en/latest/embedding.html

Maybe just including the JS into the mkdocs-material template will do it.

[giswqs]

@danielfrg Thank you for the advice. Can it (including the JS into the mkdocs-material template) be done within this repo or it has to be fixed by mkdocs-material?

[danielfrg]

It can be done in this repo: https://squidfunk.github.io/mkdocs-material/customization/

[giswqs]

I followed the MkDocs customization instruction to add two JavaScripts to the docs/javascripts directory and add the following lines to mkdocs.yml. However, ipyleaflet maps still do not show up. Should I also modify main.html and how? Sorry, my JavaScript knowledge is very limited. Any help will be appreciated.

extra_javascript:
    - javascripts/embed-amd.js
    - javascripts/require.min.js

[giswqs]

This is what it looks like when I clicked on the Embed widgets menu.