{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\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
}