search

jupyter-widgets / ipyleaflet

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

How to extend ipyleaflet with a python lib that inject CSS and JS in Jupyter? #1130

Open 12rambau opened 1 year ago

12rambau commented 1 year ago

cross-posting from SO as the downvoted machinery is already on its way...

I'm writing a python lib to create maps with vuetify based widgets sepal-ui. The lib is based on the ipyleaflet and ipyvutify packages.

To make them work together, I need to inject some extra css and javascript to the page. At the moment I'm doing it via ipywidgets display method:

# load custom styling of sepal_ui
sepal_ui_css = HTML(f"<style>{(CSS_DIR / 'custom.css').read_text()}</style>")

# load fa-6
fa_css = HTML(
    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>'
)

# create a small hack to remove fontawesome from the html output
clean_fa_js = Javascript((JS_DIR / "fontawesome.js").read_text())

# display all
display(sepal_ui_css, fa_css, clean_fa_js)

By looking at ipyleaflet code I realize that you don't need such a mechanism to inject leaflet and css into the notebooks. Can someone explain what is the methodology I should follow ? or maybe link me in the right direction in the Jupyter documentation ?