grass.jupyter: add ipyleaflet backend (#3330)

OSGeo · Jan 31, 2024 · cd494bd · cd494bd
1 parent f302d66
commit cd494bd
Show file tree

Hide file tree

Showing 3 changed files with 245 additions and 104 deletions.
diff --git a/.github/workflows/optional_requirements.txt b/.github/workflows/optional_requirements.txt
@@ -1,3 +1,4 @@
 folium
 jupyter
 PyVirtualDisplay
+ipyleaflet
diff --git a/doc/notebooks/jupyter_tutorial.ipynb b/doc/notebooks/jupyter_tutorial.ipynb
@@ -10,7 +10,7 @@
     "\n",
     "The _grass.jupyter_ package was initially written as part of [Google Summer of Code in 2021](https://trac.osgeo.org/grass/wiki/GSoC/2021/JupyterAndGRASS) by Caitlin Haedrich and was experimentally included in version 8.0.0. Caitlin further improved it thanks to the [GRASS Mini Grant 2022](https://trac.osgeo.org/grass/wiki/GSoC/2021/JupyterAndGRASS/MiniGrant2022). The package was officially released for the first time as part of version 8.2.0. Credits for mentoring and additional development go to Vaclav Petras, Helena Mitasova, Stefan Blumentrath, and Anna Petrasova as well as to many members of the GRASS community who provided important feedback.\n",
     "\n",
-    "In addition to simplifying the launch of *GRASS GIS* with a dedicated _init_ function, _grass.jupyter_ has two main display classes, _Map_ and _InteractiveMap_. Using the GRASS rendering engine in the background, _Map_ creates maps as PNG images. _InteractiveMap_ displays GRASS rasters and vectors with [*folium*](http://python-visualization.github.io/folium/), a [*leaflet*](https://leafletjs.com/) library for Python. The package includes also _Map3D_ and [_TimeSeriesMap_](temporal.ipynb).\n",
+    "In addition to simplifying the launch of *GRASS GIS* with a dedicated _init_ function, _grass.jupyter_ has two main display classes, _Map_ and _InteractiveMap_. Using the GRASS rendering engine in the background, _Map_ creates maps as PNG images. _InteractiveMap_ displays GRASS rasters and vectors either with [*folium*](http://python-visualization.github.io/folium/), or [*ipyleaflet*](https://ipyleaflet.readthedocs.io/en/latest/), both are [*leaflet*](https://leafletjs.com/)-based libraries for Python. The package includes also _Map3D_ and [_TimeSeriesMap_](temporal.ipynb).\n",
     "\n",
     "This interactive notebook is available online thanks to the [Binder](https://mybinder.org) service. To run the select part (called a *cell*), hit `Shift + Enter`."
    ]
@@ -210,7 +210,7 @@
    "source": [
     "## Interactive Map Display\n",
     "\n",
-    "The `InteractiveMap` class displays *GRASS GIS* rasters and vectors with [*folium*](http://python-visualization.github.io/folium/), a [*leaflet*](https://leafletjs.com/) library for *Python*."
+    "The `InteractiveMap` class displays *GRASS GIS* rasters and vectors with [*folium*](http://python-visualization.github.io/folium/) or [*ipyleaflet*](https://ipyleaflet.readthedocs.io/en/latest/)."
    ]
   },
   {
@@ -220,7 +220,7 @@
    "outputs": [],
    "source": [
     "# Create Interactive Map\n",
-    "raleigh_map = gj.InteractiveMap(width = 600)"
+    "raleigh_map = gj.InteractiveMap(width=600)"
    ]
   },
   {
@@ -232,7 +232,7 @@
     "# Add raster, vector and layer control to map\n",
     "raleigh_map.add_raster(\"elevation\")\n",
     "raleigh_map.add_vector(\"roadsmajor\")\n",
-    "raleigh_map.add_layer_control(position = \"bottomright\")"
+    "raleigh_map.add_layer_control(position=\"bottomright\")"
    ]
   },
   {
@@ -279,11 +279,9 @@
    "source": [
     "import folium \n",
     "\n",
-    "# Create figure\n",
-    "fig = folium.Figure(width=600, height=400)\n",
     "\n",
-    "# Create a map to add to the figure later\n",
-    "m = folium.Map(tiles=\"Stamen Terrain\", location=[35.761168,-78.668271], zoom_start=13)\n",
+    "# Create a map\n",
+    "m = folium.Map(location=[35.761168,-78.668271], zoom_start=13)\n",
     "\n",
     "# Create and add elevation layer to map\n",
     "gj.Raster(\"elevation\", opacity=0.5).add_to(m)\n",
@@ -296,11 +294,45 @@
     "    [35.781608,-78.675800], popup=\"<i>Point of Interest</i>\", tooltip=tooltip\n",
     ").add_to(m)\n",
     "\n",
-    "# Add the map to the figure\n",
-    "fig.add_child(m)\n",
+    "# Display map\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## GRASS-ipyleaflet Integration\n",
+    "\n",
+    "We can also pass GRASS rasters and vectors directly to ipyleaflet with the Raster and Vector classes. This provides much more flexibility when creating maps since we can access all of ipyleaflet's capabilities."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipyleaflet \n",
+    "\n",
+    "# Create map\n",
+    "m = ipyleaflet.Map(center=[35.761168,-78.668271], zoom=13)\n",
+    "\n",
+    "# Create and add elevation layer to map\n",
+    "gj.Raster(\"elevation\", opacity=0.5).add_to(m)\n",
+    "\n",
+    "# Do some cool ipyleaflet stuff!\n",
+    "# Like make a tooltip\n",
+    "title = \"Click me!\"\n",
+    "# and add a marker\n",
+    "marker = ipyleaflet.Marker(name='marker', location=(35.781608,-78.675800), title=title)\n",
+    "\n",
+    "# Add the marker to the map\n",
+    "m.add(marker)\n",
     "\n",
-    "# Display figure\n",
-    "fig"
+    "control = ipyleaflet.LayersControl(position='topright')\n",
+    "m.add(control)\n",
+    "m"
    ]
   },
   {