{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "\"Open\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", "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,\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', 'Canada', 'Mexico'],\n", " value='Canada',\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', 'Canada', 'Mexico'],\n", " value='Canada',\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": [ "#### HTML" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "widgets.HTML(\n", " value=\"Hello World\",\n", " placeholder='Some HTML',\n", " description='Some HTML',\n", ")" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "widgets.HTML(\n", " value=''\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(\n", " description='Pick a Date',\n", " disabled=False\n", ")\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,\n", " description='Pick a color',\n", " value='blue',\n", " 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", "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", "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=''\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(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": { "height": "calc(100% - 180px)", "left": "10px", "top": "150px", "width": "384px" }, "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 }