examples/notebooks/132_folium_colorbar.ipynb

{
    "cells": [
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "<a href=\"https://githubtocolab.com/gee-community/geemap/blob/master/examples/notebooks/132_folium_colorbar.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>\n",
                "\n",
                "**Adding colorbars to a folium map**\n",
                "\n",
                "Uncomment the following line to install [geemap](https://geemap.org) if needed."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "import ee\n",
                "import geemap.foliumap as geemap"
            ]
        },
        {
            "cell_type": "markdown",
            "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",
            "metadata": {},
            "source": [
                "Create a colormap using specified parameters."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "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",
            "metadata": {},
            "source": [
                "Save the colormap as an image."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "geemap.save_colorbar('colorbar.png', **params)"
            ]
        },
        {
            "cell_type": "markdown",
            "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",
            "metadata": {},
            "source": [
                "Add a horizontal colormap to the map."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "Map = geemap.Map()\n",
                "\n",
                "image = ee.Image('USGS/SRTMGL1_003')\n",
                "vis_params = {\n",
                "    'min': 0,\n",
                "    'max': 6000,\n",
                "    'palette': 'terrain',\n",
                "}\n",
                "Map.addLayer(image, vis_params, 'SRTM')\n",
                "\n",
                "Map.add_colormap(position=(55, 5), **params)\n",
                "Map"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "Make the colormap background transparent."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "params['transparent'] = True"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "Map = geemap.Map()\n",
                "Map.addLayer(image, vis_params, 'SRTM')\n",
                "Map.add_colormap(position=(55, 5), **params)\n",
                "Map"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "Change the orientation to vertical."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "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,
            "metadata": {},
            "outputs": [],
            "source": [
                "Map = geemap.Map()\n",
                "Map.addLayer(image, vis_params, 'SRTM')\n",
                "Map.add_colormap(position=(85, 5), **params)\n",
                "Map"
            ]
        },
        {
            "cell_type": "markdown",
            "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,
            "metadata": {
                "tags": []
            },
            "outputs": [],
            "source": [
                "Map = geemap.Map()\n",
                "Map.addLayer(image, vis_params, 'SRTM')\n",
                "image = 'https://i.imgur.com/SpmE7Cs.png'\n",
                "Map.add_image(image, position='bottomright')\n",
                "Map"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "![](https://i.imgur.com/hMj9fa2.png)"
            ]
        }
    ],
    "metadata": {
        "kernelspec": {
            "display_name": "Python 3",
            "language": "python",
            "name": "python3"
        }
    },
    "nbformat": 4,
    "nbformat_minor": 5
}