feat: support leaflet maps in the theme (#1112)

Fix #1110

docs/examples/pydata.md

@@ -89,7 +89,7 @@ data = xr.DataArray(
 data
 ```
 
-## `jupyter-sphinx`
+## jupyter-sphinx
 
 Another common library is `jupyter-sphinx`.
 This section demonstrates a subset of functionality above to make sure it behaves as expected.
@@ -103,3 +103,15 @@ data = rng.standard_normal((3, 100))
 fig, ax = plt.subplots()
 ax.scatter(data[0], data[1], c=data[2], s=3)
 ```
+
+## ipyleaflet
+
+`ipyleaflet` is a **Jupyter**/**Leaflet** bridge enabling interactive maps in the Jupyter notebook environment. this demonstrate how you can integrate maps in your documentation.
+
+```{jupyter-execute}
+from ipyleaflet import Map, basemaps
+
+# display a map centered on France
+m = Map(basemap=basemaps.Esri.WorldImagery,  zoom=5, center=[46.21, 2.21])
+m
+```

pyproject.toml

@@ -65,7 +65,8 @@ doc = [
   "sphinx-togglebutton",
   # Install nbsphinx in case we want to test it locally even though we can't load
   # it at the same time as MyST-NB.
-  "nbsphinx"
+  "nbsphinx",
+  "ipyleaflet",
 ]
 test = [
   "pytest",

src/pydata_sphinx_theme/assets/styles/extensions/_leaflet.scss

@@ -0,0 +1,14 @@
+/**
+ * style for the various mapping libs based on leaflet (folium, geemap, ipyleaflet)
+ * mainly ensure the good display of the maps in both themes and avoid the customization
+ * of the tiles
+ */
+
+/**
+ * avoid border override from pydata-sphinx-theme
+ * minimal selctor to get the priority
+ */
+html[data-theme="dark"] .bd-content img.leaflet-tile.leaflet-tile-loaded {
+  border-radius: 0;
+  padding: 0;
+}

src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss

@@ -69,6 +69,7 @@
 @import "./extensions/sphinx_panels";
 @import "./extensions/togglebutton";
 @import "./extensions/notebooks";
+@import "./extensions/leaflet";
 
 // Page-specific CSS
 @import "./pages/search";