examples/notebooks/ipywidgets_demo.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<a href=\"https://githubtocolab.com/giswqs/geemap/blob/master/examples/notebooks/ipywidgets_demo.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": [
    "# geemap and ipywidgets Demo\n",
    "\n",
    "Author: Qiusheng Wu ([Website](https://wetlands.io) - [GitHub](https://github.com/giswqs))\n",
    "\n",
    "**Keyboard shortcuts for Jupyter notebook:**\n",
    "\n",
    "- **Shift-Enter**: run cell, select below\n",
    "- **Ctrl-Enter**: run selected cells\n",
    "- **Alt-Enter**: run cell and insert below\n",
    "- **Ctrl-/**: comment\n",
    "- **Tab**: code completion or indent\n",
    "- **Shift-Tab**: tooltip\n",
    "\n",
    "## Install geemap"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import subprocess\n",
    "\n",
    "try:\n",
    "    import geemap\n",
    "except ImportError:\n",
    "    print('geemap package is not installed. Installing ...')\n",
    "    subprocess.check_call([\"python\", '-m', 'pip', 'install', 'geemap'])"
   ]
  },
  {
   "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": [
    "If you are using a VPN to access GEE, you might need to uncomment the following line and change the port to your Internet proxy."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# geemap.set_proxy(port=1080)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create an interactive map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "Map = geemap.Map(center=[37.71, 105.47], 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",
    "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('users/giswqs/public/chn_admin_level2')\n",
    "Map.addLayer(fc, {}, 'China admin level2')"
   ]
  },
  {
   "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('China admin level2')\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,\n",
    "    min=1984,\n",
    "    max=2020,\n",
    "    step=1,\n",
    "    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,\n",
    "    min=-1,\n",
    "    max=1,\n",
    "    step=0.05,\n",
    "    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,\n",
    "    description='Check me',\n",
    "    disabled=False,\n",
    "    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', 'China', 'India'],\n",
    "    value='China',\n",
    "    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', 'China', 'India'],\n",
    "    value='China',\n",
    "    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": [
    "### 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": [
    "widgets.DatePicker(\n",
    "    description='Pick a Date',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Pick a color',\n",
    "    value='blue',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "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",
    "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(center=[37.71, 105.47], zoom=4)\n",
    "\n",
    "dem = ee.Image('USGS/SRTMGL1_003')\n",
    "fc = ee.FeatureCollection('users/giswqs/public/chn_admin_level2')\n",
    "vis_params = {\n",
    "  'min': 0,\n",
    "  'max': 4000,\n",
    "  'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']}\n",
    "\n",
    "Map.addLayer(dem, vis_params, 'DEM')\n",
    "Map.addLayer(fc, {}, 'China admin level2')\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()"
   ]
  },
  {
   "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",
    "                admin1_id = selected_fc.first().get('ADM1_ZH').getInfo()\n",
    "                admin2_id = selected_fc.first().get('ADM2_ZH').getInfo()\n",
    "                Map.layers = Map.layers[:4]        \n",
    "                geom = selected_fc.geometry()\n",
    "                layer_name = admin1_id + '-' + admin2_id\n",
    "                Map.addLayer(ee.Image().paint(geom, 0, 2), {'palette': 'red'}, layer_name)  \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",
    "Map.on_interaction(handle_interaction)"
   ]
  }
 ],
 "metadata": {
  "hide_input": false,
  "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.8.5"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": true,
   "title_cell": "Table of Contents",
   "title_sidebar": "Table of Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": true
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}