Added colorbar support for folium (opengeos#330)

* Added colorbar support for folium opengeos#329 * Updated notebooks * Fixed testing error Former-commit-id: 0fc89c0
wnelso18 · Dec 23, 2022 · 067d93d · 067d93d
1 parent eed5652
commit 067d93d
Show file tree

Hide file tree

Showing 10 changed files with 708 additions and 45 deletions.
diff --git a/docs/notebooks/03_cog_stac.ipynb b/docs/notebooks/03_cog_stac.ipynb
@@ -71,7 +71,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "os.environ['TITILER_ENDPOINT'] = 'https://titiler.xyz'  # Use the TiTiler demo endpoint. Replace this if needed."
+    "# Use the TiTiler demo endpoint. Replace this if needed.\n",
+    "os.environ['TITILER_ENDPOINT'] = 'https://titiler.xyz'"
    ]
   },
   {
@@ -393,7 +394,12 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.13"
+   "version": "3.9.15"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "31f05ea183a4718249d13ada7f166c6bdba1d00716247af5c11c23af8d5923f1"
+   }
   }
  },
  "nbformat": 4,

diff --git a/docs/notebooks/62_folium_colorbar.ipynb b/docs/notebooks/62_folium_colorbar.ipynb
@@ -0,0 +1,234 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "6f43c888-4745-4ce3-a4ce-1b23926b53e7",
+   "metadata": {},
+   "source": [
+    "[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=notebooks/62_folium_colorbar.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://githubtocolab.com/giswqs/leafmap/blob/master/examples/notebooks/62_folium_colorbar.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://gishub.org/leafmap-binder)\n",
+    "\n",
+    "**Adding colorbars to a folium map**\n",
+    "\n",
+    "Uncomment the following line to install [leafmap](https://leafmap.org) if needed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fb3d4f02-b029-4bc7-867f-4679c040e087",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import leafmap.foliumap as leafmap"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9d67dffc-4c68-4243-a94c-12e3cb7680a9",
+   "metadata": {},
+   "source": [
+    "Unlike the ipyleaflet plotting backend, folium does not support adding matplotlib colormap directly. One workaround is to save the maplotlib colormap as an image, then add the image to the map. Let's first create a colormap."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "ef94f639-b905-4f1c-aa03-9faf9538f791",
+   "metadata": {},
+   "source": [
+    "Create a colormap using specified parameters."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9404e90b-e886-4022-a9b4-87daed979339",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "params = {\n",
+    "    'width': 4.0,\n",
+    "    'height': 0.3,\n",
+    "    'vmin': 0,\n",
+    "    'vmax': 6000,\n",
+    "    'cmap': 'terrain',\n",
+    "    'label': 'Elevation (m)',\n",
+    "    'orientation': 'horizontal',\n",
+    "    'transparent': False,\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0c0649d0-75b9-49af-b860-6b765dfd7a00",
+   "metadata": {},
+   "source": [
+    "Save the colormap as an image."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ad11fc89-90f6-4579-92ec-78561223af28",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "leafmap.save_colorbar('colorbar.png', **params)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "4c7565f6-0c1f-4107-a44c-8de88837b60a",
+   "metadata": {},
+   "source": [
+    "You can also create use the `m.add_colormap()` method to add a colormap. Under the hood, it generate a colormap as an image, then add it to the map. You need to specified the position of the colormap using a tuple (x, y), which represents the percentage [0-100] from the lower-left corner. If the map size changes, you might need to change the colormap position as well. "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c49880d0-71a3-4eeb-add1-af8a94135a95",
+   "metadata": {},
+   "source": [
+    "Add a horizontal colormap to the map."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "df5c5eb9-1ddf-4c10-8157-f15f055883be",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map()\n",
+    "m.add_basemap('OpenTopoMap')\n",
+    "m.add_colormap(position=(55, 5), **params)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3a0cbd26-3a64-4f3d-ab58-651de5471d3d",
+   "metadata": {},
+   "source": [
+    "Make the colormap background transparent."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "be44f1c4-47e7-48d2-b0a8-75a811a7fae4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "params['transparent'] = True"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9b96ffc1-032b-44d5-9e1c-6993de550c14",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map()\n",
+    "m.add_basemap('OpenTopoMap')\n",
+    "m.add_colormap(position=(55, 5), **params)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "d1b9f9f0-b56e-4e48-a7e7-013f2eecd282",
+   "metadata": {},
+   "source": [
+    "Change the orientation to vertical."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "80b0d0fb-1e7f-444f-bd9b-ac30b508ee4e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "params = {\n",
+    "    'width': 0.3,\n",
+    "    'height': 4,\n",
+    "    'vmin': 0,\n",
+    "    'vmax': 6000,\n",
+    "    'cmap': 'terrain',\n",
+    "    'label': 'Elevation (m)',\n",
+    "    'orientation': 'vertical',\n",
+    "    'transparent': False,\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0df43e72-bcc7-447f-9573-b6d759f37a50",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map()\n",
+    "m.add_basemap('OpenTopoMap')\n",
+    "m.add_colormap(position=(85, 5), **params)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3eeb7a29-29f0-4633-af4c-e9e4958bd826",
+   "metadata": {},
+   "source": [
+    "To make the colormap position fixed at four corners (i.e., `bottomright`, `bottomleft`, `topright`, `topleft`), you need to make the image available through an HTTP URL (e.g., [imgur](https://imgur.com)). Local file paths are not supported. Use `m.add_image()` to add the colormap image to the map."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5eb3989c-d93d-4c69-8181-3301486337b2",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map()\n",
+    "m.add_basemap('OpenTopoMap')\n",
+    "image = 'https://i.imgur.com/SpmE7Cs.png'\n",
+    "m.add_image(image, position='bottomright')\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "92ce812e-2256-4561-9cda-eced63233cfe",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/hpHZiqT.png)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.15"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/docs/tutorials.md b/docs/tutorials.md
@@ -65,6 +65,7 @@
 59. Creating legends using leafmap with only one line of code ([notebook](https://leafmap.org/notebooks/59_create_legend))
 60. Adding text, images, HTML, and widgets to the map ([notebook](https://leafmap.org/notebooks/60_add_widget))
 61. Creating an animated GIF from a vector dataset ([notebook](https://leafmap.org/notebooks/61_vector_to_gif))
+62. Add colorbars to a folium map ([notebook](https://leafmap.org/notebooks/62_folium_colorbar))
 
 ## Demo
 

diff --git a/examples/README.md b/examples/README.md
@@ -72,9 +72,11 @@
 55. LiDAR data analysis and visualization with whitebox and leafmap ([notebook](https://leafmap.org/notebooks/55_lidar))
 56. Downloading 10-m National Elevation Dataset (NED) with only one line of code ([notebook](https://leafmap.org/notebooks/56_download_ned))
 57. Download data from The National Map ([notebook](https://leafmap.org/notebooks/57_national_map))
-58. Creating legends using leafmap with only one line of code ([notebook](https://leafmap.org/notebooks/59_create_legend))
-59. Adding text, images, HTML, and widgets to the map ([notebook](https://leafmap.org/notebooks/60_add_widget))
-60. Creating an animated GIF from a vector dataset ([notebook](https://leafmap.org/notebooks/61_vector_to_gif))
+58. Creating interactive maps with bokeh ([notebook](https://leafmap.org/notebooks/58_bokeh))
+59. Creating legends using leafmap with only one line of code ([notebook](https://leafmap.org/notebooks/59_create_legend))
+60. Adding text, images, HTML, and widgets to the map ([notebook](https://leafmap.org/notebooks/60_add_widget))
+61. Creating an animated GIF from a vector dataset ([notebook](https://leafmap.org/notebooks/61_vector_to_gif))
+62. Add colorbars to a folium map ([notebook](https://leafmap.org/notebooks/62_folium_colorbar))
 
 ## Demo
 

diff --git a/examples/notebooks/03_cog_stac.ipynb b/examples/notebooks/03_cog_stac.ipynb
@@ -71,7 +71,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "os.environ['TITILER_ENDPOINT'] = 'https://titiler.xyz'  # Use the TiTiler demo endpoint. Replace this if needed."
+    "# Use the TiTiler demo endpoint. Replace this if needed.\n",
+    "os.environ['TITILER_ENDPOINT'] = 'https://titiler.xyz'"
    ]
   },
   {
@@ -393,7 +394,12 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.13"
+   "version": "3.9.15"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "31f05ea183a4718249d13ada7f166c6bdba1d00716247af5c11c23af8d5923f1"
+   }
   }
  },
  "nbformat": 4,