{
"cells": [
{
"cell_type": "markdown",
"id": "0",
"metadata": {},
"source": [
"\n",
"\n",
"Uncomment the following line to install [geemap](https://geemap.org) if needed."
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "1",
"metadata": {},
"outputs": [],
"source": [
"# !pip install geemap"
]
},
{
"cell_type": "markdown",
"id": "2",
"metadata": {},
"source": [
"# How to add interactive widgets to the map"
]
},
{
"cell_type": "markdown",
"id": "3",
"metadata": {},
"source": [
"## Import libraries"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "4",
"metadata": {},
"outputs": [],
"source": [
"import ee\n",
"import geemap\n",
"import ipyleaflet\n",
"import ipywidgets as widgets"
]
},
{
"cell_type": "markdown",
"id": "5",
"metadata": {},
"source": [
"## Create an interactive map"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "6",
"metadata": {},
"outputs": [],
"source": [
"Map = geemap.Map(center=[40, -100], zoom=4)\n",
"Map"
]
},
{
"cell_type": "markdown",
"id": "7",
"metadata": {},
"source": [
"## Add Earth Engine data\n",
"\n",
"### Add raster data"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "8",
"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",
"id": "9",
"metadata": {},
"source": [
"### Add vector data"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "10",
"metadata": {},
"outputs": [],
"source": [
"fc = ee.FeatureCollection(\"TIGER/2018/States\")\n",
"Map.addLayer(fc, {}, \"US States\")"
]
},
{
"cell_type": "markdown",
"id": "11",
"metadata": {},
"source": [
"## Change layer opacity"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "12",
"metadata": {},
"outputs": [],
"source": [
"Map"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "13",
"metadata": {},
"outputs": [],
"source": [
"dem_layer = Map.find_layer(\"DEM\")\n",
"dem_layer.interact(opacity=(0, 1, 0.1))"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "14",
"metadata": {},
"outputs": [],
"source": [
"vector_layer = Map.find_layer(\"US States\")\n",
"vector_layer.interact(opacity=(0, 1, 0.1))"
]
},
{
"cell_type": "markdown",
"id": "15",
"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,
"id": "16",
"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,
"id": "17",
"metadata": {},
"outputs": [],
"source": [
"int_slider.value"
]
},
{
"cell_type": "markdown",
"id": "18",
"metadata": {},
"source": [
"#### FloatSlider"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "19",
"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,
"id": "20",
"metadata": {},
"outputs": [],
"source": [
"float_slider.value"
]
},
{
"cell_type": "markdown",
"id": "21",
"metadata": {},
"source": [
"#### IntProgress"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "22",
"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,
"id": "23",
"metadata": {},
"outputs": [],
"source": [
"int_text = widgets.IntText(\n",
" value=7,\n",
" description=\"Any:\",\n",
")\n",
"int_text"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "24",
"metadata": {},
"outputs": [],
"source": [
"float_text = widgets.FloatText(\n",
" value=7.5,\n",
" description=\"Any:\",\n",
")\n",
"float_text"
]
},
{
"cell_type": "markdown",
"id": "25",
"metadata": {},
"source": [
"### Boolean widgets\n",
"\n",
"#### ToggleButton"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "26",
"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,
"id": "27",
"metadata": {},
"outputs": [],
"source": [
"toggle_button.value"
]
},
{
"cell_type": "markdown",
"id": "28",
"metadata": {},
"source": [
"#### Checkbox"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "29",
"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,
"id": "30",
"metadata": {},
"outputs": [],
"source": [
"checkbox.value"
]
},
{
"cell_type": "markdown",
"id": "31",
"metadata": {},
"source": [
"### Selection widgets\n",
"\n",
"#### Dropdown"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "32",
"metadata": {},
"outputs": [],
"source": [
"dropdown = widgets.Dropdown(\n",
" options=[\"USA\", \"Canada\", \"Mexico\"], value=\"Canada\", description=\"Country:\"\n",
")\n",
"dropdown"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "33",
"metadata": {},
"outputs": [],
"source": [
"dropdown.value"
]
},
{
"cell_type": "markdown",
"id": "34",
"metadata": {},
"source": [
"#### RadioButtons"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "35",
"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,
"id": "36",
"metadata": {},
"outputs": [],
"source": [
"radio_buttons.value"
]
},
{
"cell_type": "markdown",
"id": "37",
"metadata": {},
"source": [
"### String widgets\n",
"\n",
"#### Text"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "38",
"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,
"id": "39",
"metadata": {},
"outputs": [],
"source": [
"text.value"
]
},
{
"cell_type": "markdown",
"id": "40",
"metadata": {},
"source": [
"#### Textarea"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "41",
"metadata": {},
"outputs": [],
"source": [
"widgets.Textarea(\n",
" value=\"Hello World\",\n",
" placeholder=\"Type something\",\n",
" description=\"String:\",\n",
" disabled=False,\n",
")"
]
},
{
"cell_type": "markdown",
"id": "42",
"metadata": {},
"source": [
"#### HTML"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "43",
"metadata": {},
"outputs": [],
"source": [
"widgets.HTML(\n",
" value=\"Hello World\",\n",
" placeholder=\"Some HTML\",\n",
" description=\"Some HTML\",\n",
")"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "44",
"metadata": {},
"outputs": [],
"source": [
"widgets.HTML(\n",
" value=''\n",
")"
]
},
{
"cell_type": "markdown",
"id": "45",
"metadata": {},
"source": [
"### Button"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "46",
"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",
"id": "47",
"metadata": {},
"source": [
"### Date picker"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "48",
"metadata": {},
"outputs": [],
"source": [
"date_picker = widgets.DatePicker(description=\"Pick a Date\", disabled=False)\n",
"date_picker"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "49",
"metadata": {},
"outputs": [],
"source": [
"date_picker.value"
]
},
{
"cell_type": "markdown",
"id": "50",
"metadata": {},
"source": [
"### Color picker"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "51",
"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,
"id": "52",
"metadata": {},
"outputs": [],
"source": [
"color_picker.value"
]
},
{
"cell_type": "markdown",
"id": "53",
"metadata": {},
"source": [
"### Output widget"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "54",
"metadata": {},
"outputs": [],
"source": [
"out = widgets.Output(layout={\"border\": \"1px solid black\"})\n",
"out"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "55",
"metadata": {},
"outputs": [],
"source": [
"with out:\n",
" for i in range(10):\n",
" print(i, \"Hello world!\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "56",
"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,
"id": "57",
"metadata": {},
"outputs": [],
"source": [
"out.clear_output()\n",
"with out:\n",
" display(widgets.IntSlider())\n",
"out"
]
},
{
"cell_type": "markdown",
"id": "58",
"metadata": {},
"source": [
"## Add a widget to the map"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "59",
"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,
"id": "60",
"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,
"id": "61",
"metadata": {},
"outputs": [],
"source": [
"with output_widget:\n",
" print(\"Nice map!\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "62",
"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,
"id": "63",
"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
}