{
"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"**Introduction to ipywidgets**\n",
"\n",
"https://ipywidgets.readthedocs.io"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## Import libraries"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# !pip install geoproject"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"import geoproject"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## Create an interactive map"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "f0a492cea4404f63b63af409164b4ab1",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Map(center=[48, 2], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"m = geoproject.Map()\n",
"m"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"url = \"https://opendata.digitalglobe.com/events/mauritius-oil-spill/post-event/2020-08-12/105001001F1B5B00/105001001F1B5B00.tif\"\n",
"m.add_raster(url, name='Raster', fit_bounds=True)"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## Change layer opacity"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"(TileLayer(attribution='© OpenStreetMap contributors', base=True, max_zoom=19, min_zoom=1, name='OpenStreetMap.Mapnik', options=['attribution', 'bounds', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms', 'zoom_offset'], url='https://tile.openstreetmap.org/{z}/{x}/{y}.png'),\n",
" TileLayer(attribution='', loading=True, name='Raster', options=['attribution', 'bounds', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms', 'zoom_offset'], url='https://titiler.xyz/cog/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?url=https%3A%2F%2Fopendata.digitalglobe.com%2Fevents%2Fmauritius-oil-spill%2Fpost-event%2F2020-08-12%2F105001001F1B5B00%2F105001001F1B5B00.tif'))"
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"m.layers"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "42db6edfff224fb0a82520441de9d994",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Box(children=(FloatSlider(value=1.0, description='opacity', max=1.0),))"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"raster_layer = m.layers[-1]\n",
"raster_layer.interact(opacity=(0, 1, 0.1))"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## Widget list\n",
"\n",
"Widget list: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html\n",
"\n",
"Icons: https://fontawesome.com/v4.7.0/icons\n",
"\n",
"### Numeric widgets\n",
"\n",
"#### IntSlider"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [],
"source": [
"import ipywidgets as widgets"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "31ac374b403d4d5688db6b7acca01ac9",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"IntSlider(value=2000, description='Year:', max=2020, min=1984)"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"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"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"#### FloatSlider"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "a287bf27f320492dab4829f30c6be3d3",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"FloatSlider(value=0.0, description='Threshold:', max=1.0, min=-1.0, step=0.05)"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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",
")"
]
},
{
"attachments": {},
"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='![](\"https://earthengine.google.com/static/images/earth-engine-logo.png\")
'\n",
")"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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"
]
},
{
"attachments": {},
"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('mA21Us_3m28'))\n",
"out"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"out.clear_output()\n",
"with out:\n",
" display(widgets.IntSlider())\n",
"out"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## Add a widget to the map"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [],
"source": [
"import ipywidgets as widgets\n",
"from ipyleaflet import WidgetControl"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "a0c8664c99ac41ec9b87a516ecc039a9",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Map(center=[48, 2], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"m = geoproject.Map()\n",
"m"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {},
"outputs": [],
"source": [
"output_widget = widgets.Output(layout={'border': '1px solid black'})\n",
"output_control = WidgetControl(widget=output_widget, position='bottomright')\n",
"m.add_control(output_control)"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [],
"source": [
"with output_widget:\n",
" print('Nice map!')"
]
},
{
"cell_type": "code",
"execution_count": 14,
"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": 15,
"metadata": {},
"outputs": [],
"source": [
"def handle_interaction(**kwargs):\n",
" latlon = kwargs.get('coordinates')\n",
" # latlon = [round(x, 2) for x in latlon]\n",
" if kwargs.get('type') == 'click':\n",
" with output_widget:\n",
" output_widget.clear_output()\n",
" print('You clicked at: {}'.format(latlon))\n",
"\n",
"m.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.10.11"
},
"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
}