examples/notebooks/40_ipywidgets.ipynb

{
    "cells": [
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "<a href=\"https://githubtocolab.com/gee-community/geemap/blob/master/examples/notebooks/40_ipywidgets.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>\n",
                "\n",
                "Uncomment the following line to install [geemap](https://geemap.org) if needed."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "# !pip install geemap"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "# How to add interactive widgets to the map"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "## Import libraries"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "import ee\n",
                "import geemap\n",
                "import ipyleaflet\n",
                "import ipywidgets as widgets"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "## Create an interactive map"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "Map = geemap.Map(center=[40, -100], zoom=4)\n",
                "Map"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "## Add Earth Engine data\n",
                "\n",
                "### Add raster data"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "dem = ee.Image('USGS/SRTMGL1_003')\n",
                "\n",
                "vis_params = {\n",
                "    'min': 0,\n",
                "    'max': 4000,\n",
                "    'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5'],\n",
                "}\n",
                "\n",
                "Map.addLayer(dem, vis_params, 'DEM')"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Add vector data"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "fc = ee.FeatureCollection('TIGER/2018/States')\n",
                "Map.addLayer(fc, {}, 'US States')"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "## Change layer opacity"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "Map"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "dem_layer = Map.find_layer('DEM')\n",
                "dem_layer.interact(opacity=(0, 1, 0.1))"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "vector_layer = Map.find_layer('US States')\n",
                "vector_layer.interact(opacity=(0, 1, 0.1))"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "## Widget list\n",
                "\n",
                "https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html\n",
                "\n",
                "### Numeric widgets\n",
                "\n",
                "#### IntSlider"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "int_slider = widgets.IntSlider(\n",
                "    value=2000, min=1984, max=2020, step=1, description='Year:'\n",
                ")\n",
                "int_slider"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "int_slider.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "#### FloatSlider"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "float_slider = widgets.FloatSlider(\n",
                "    value=0, min=-1, max=1, step=0.05, description='Threshold:'\n",
                ")\n",
                "float_slider"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "float_slider.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "#### IntProgress"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "int_progress = widgets.IntProgress(\n",
                "    value=7,\n",
                "    min=0,\n",
                "    max=10,\n",
                "    step=1,\n",
                "    description='Loading:',\n",
                "    bar_style='',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    orientation='horizontal',\n",
                ")\n",
                "int_progress"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "int_text = widgets.IntText(\n",
                "    value=7,\n",
                "    description='Any:',\n",
                ")\n",
                "int_text"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "float_text = widgets.FloatText(\n",
                "    value=7.5,\n",
                "    description='Any:',\n",
                ")\n",
                "float_text"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Boolean widgets\n",
                "\n",
                "#### ToggleButton"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "toggle_button = widgets.ToggleButton(\n",
                "    value=False,\n",
                "    description='Click me',\n",
                "    disabled=False,\n",
                "    button_style='success',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    tooltip='Description',\n",
                "    icon='check',  # (FontAwesome names without the `fa-` prefix)\n",
                ")\n",
                "toggle_button"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "toggle_button.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "#### Checkbox"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "checkbox = widgets.Checkbox(\n",
                "    value=False, description='Check me', disabled=False, indent=False\n",
                ")\n",
                "checkbox"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "checkbox.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Selection widgets\n",
                "\n",
                "#### Dropdown"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "dropdown = widgets.Dropdown(\n",
                "    options=['USA', 'Canada', 'Mexico'], value='Canada', description='Country:'\n",
                ")\n",
                "dropdown"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "dropdown.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "#### RadioButtons"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "radio_buttons = widgets.RadioButtons(\n",
                "    options=['USA', 'Canada', 'Mexico'], value='Canada', description='Country:'\n",
                ")\n",
                "radio_buttons"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "radio_buttons.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### String widgets\n",
                "\n",
                "#### Text"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "text = widgets.Text(\n",
                "    value='USA',\n",
                "    placeholder='Enter a country name',\n",
                "    description='Country:',\n",
                "    disabled=False,\n",
                ")\n",
                "text"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "text.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "#### Textarea"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.Textarea(\n",
                "    value='Hello World',\n",
                "    placeholder='Type something',\n",
                "    description='String:',\n",
                "    disabled=False,\n",
                ")"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "#### HTML"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.HTML(\n",
                "    value=\"Hello <b>World</b>\",\n",
                "    placeholder='Some HTML',\n",
                "    description='Some HTML',\n",
                ")"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "widgets.HTML(\n",
                "    value='<img src=\"https://earthengine.google.com/static/images/earth-engine-logo.png\" width=\"100\" height=\"100\">'\n",
                ")"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Button"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "button = widgets.Button(\n",
                "    description='Click me',\n",
                "    button_style='info',  # 'success', 'info', 'warning', 'danger' or ''\n",
                "    tooltip='Click me',\n",
                "    icon='check',  # (FontAwesome names without the `fa-` prefix)\n",
                ")\n",
                "button"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Date picker"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "date_picker = widgets.DatePicker(description='Pick a Date', disabled=False)\n",
                "date_picker"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "date_picker.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Color picker"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "color_picker = widgets.ColorPicker(\n",
                "    concise=False, description='Pick a color', value='blue', disabled=False\n",
                ")\n",
                "color_picker"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "color_picker.value"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "### Output widget"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "out = widgets.Output(layout={'border': '1px solid black'})\n",
                "out"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "with out:\n",
                "    for i in range(10):\n",
                "        print(i, 'Hello world!')"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "from IPython.display import YouTubeVideo\n",
                "\n",
                "out.clear_output()\n",
                "with out:\n",
                "    display(YouTubeVideo('7qRtsTCnnSM'))\n",
                "out"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "out.clear_output()\n",
                "with out:\n",
                "    display(widgets.IntSlider())\n",
                "out"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "## Add a widget to the map"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "Map = geemap.Map()\n",
                "\n",
                "dem = ee.Image('USGS/SRTMGL1_003')\n",
                "fc = ee.FeatureCollection('TIGER/2018/States')\n",
                "vis_params = {\n",
                "    'min': 0,\n",
                "    'max': 4000,\n",
                "    'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5'],\n",
                "}\n",
                "\n",
                "Map.addLayer(dem, vis_params, 'DEM')\n",
                "Map.addLayer(fc, {}, 'US States')\n",
                "\n",
                "Map"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "output_widget = widgets.Output(layout={'border': '1px solid black'})\n",
                "output_control = ipyleaflet.WidgetControl(widget=output_widget, position='bottomright')\n",
                "Map.add_control(output_control)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "with output_widget:\n",
                "    print('Nice map!')"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "output_widget.clear_output()\n",
                "logo = widgets.HTML(\n",
                "    value='<img src=\"https://earthengine.google.com/static/images/earth-engine-logo.png\" width=\"100\" height=\"100\">'\n",
                ")\n",
                "with output_widget:\n",
                "    display(logo)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "def handle_interaction(**kwargs):\n",
                "    latlon = kwargs.get('coordinates')\n",
                "    if kwargs.get('type') == 'click':\n",
                "        Map.default_style = {'cursor': 'wait'}\n",
                "        xy = ee.Geometry.Point(latlon[::-1])\n",
                "        selected_fc = fc.filterBounds(xy)\n",
                "\n",
                "        with output_widget:\n",
                "            output_widget.clear_output()\n",
                "\n",
                "            try:\n",
                "                name = selected_fc.first().get('NAME').getInfo()\n",
                "                usps = selected_fc.first().get('STUSPS').getInfo()\n",
                "                Map.layers = Map.layers[:4]\n",
                "                geom = selected_fc.geometry()\n",
                "                layer_name = name + '-' + usps\n",
                "                Map.addLayer(\n",
                "                    ee.Image().paint(geom, 0, 2), {'palette': 'red'}, layer_name\n",
                "                )\n",
                "                print(layer_name)\n",
                "            except Exception as e:\n",
                "                print('No feature could be found')\n",
                "                Map.layers = Map.layers[:4]\n",
                "\n",
                "        Map.default_style = {'cursor': 'pointer'}\n",
                "\n",
                "\n",
                "Map.on_interaction(handle_interaction)"
            ]
        }
    ],
    "metadata": {
        "kernelspec": {
            "display_name": "Python 3",
            "language": "python",
            "name": "python3"
        }
    },
    "nbformat": 4,
    "nbformat_minor": 5
}