Ipywidgets
Introduction to ipywidgets
Import libraries¶
In [1]:
Copied!
# !pip install geohey
# !pip install geohey
In [2]:
Copied!
import geohey
import geohey
Create an interactive map¶
In [3]:
Copied!
m = geohey.Map()
m
m = geohey.Map()
m
Out[3]:
In [4]:
Copied!
url = "https://opendata.digitalglobe.com/events/mauritius-oil-spill/post-event/2020-08-12/105001001F1B5B00/105001001F1B5B00.tif"
# m.add_raster(url, name='Raster', fit_bounds=True)
url = "https://opendata.digitalglobe.com/events/mauritius-oil-spill/post-event/2020-08-12/105001001F1B5B00/105001001F1B5B00.tif"
# m.add_raster(url, name='Raster', fit_bounds=True)
Change layer opacity¶
In [5]:
Copied!
m.layers
m.layers
Out[5]:
(TileLayer(attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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'),)
In [6]:
Copied!
raster_layer = m.layers[-1]
raster_layer.interact(opacity=(0, 1, 0.1))
raster_layer = m.layers[-1]
raster_layer.interact(opacity=(0, 1, 0.1))
Out[6]:
Widget list¶
Widget list: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html
Icons: https://fontawesome.com/v4.7.0/icons
Numeric widgets¶
IntSlider¶
In [7]:
Copied!
import ipywidgets as widgets
import ipywidgets as widgets
In [8]:
Copied!
int_slider = widgets.IntSlider(
value=2000, min=1984, max=2020, step=1, description="Year:"
)
int_slider
int_slider = widgets.IntSlider(
value=2000, min=1984, max=2020, step=1, description="Year:"
)
int_slider
Out[8]:
In [9]:
Copied!
int_slider
int_slider
Out[9]:
In [10]:
Copied!
int_slider.value
int_slider.value
Out[10]:
2000
In [11]:
Copied!
int_slider.value = 2019
int_slider.value = 2019
FloatSlider¶
In [12]:
Copied!
float_slider = widgets.FloatSlider(
value=0, min=-1, max=1, step=0.05, description="Threshold:"
)
float_slider
float_slider = widgets.FloatSlider(
value=0, min=-1, max=1, step=0.05, description="Threshold:"
)
float_slider
Out[12]:
In [13]:
Copied!
float_slider.value
float_slider.value
Out[13]:
0.0
IntProgress¶
In [14]:
Copied!
int_progress = widgets.IntProgress(
value=7,
min=0,
max=10,
step=1,
description="Loading:",
bar_style="", # 'success', 'info', 'warning', 'danger' or ''
orientation="horizontal",
)
int_progress
int_progress = widgets.IntProgress(
value=7,
min=0,
max=10,
step=1,
description="Loading:",
bar_style="", # 'success', 'info', 'warning', 'danger' or ''
orientation="horizontal",
)
int_progress
Out[14]:
In [15]:
Copied!
int_progress.value = 10
int_progress.value = 10
In [16]:
Copied!
int_text = widgets.IntText(
value=7,
description="Any:",
)
int_text
int_text = widgets.IntText(
value=7,
description="Any:",
)
int_text
Out[16]:
In [17]:
Copied!
float_text = widgets.FloatText(
value=7.5,
step=2,
description="Any:",
)
float_text
float_text = widgets.FloatText(
value=7.5,
step=2,
description="Any:",
)
float_text
Out[17]:
In [18]:
Copied!
toggle_button = widgets.ToggleButton(
value=False,
description="Click me",
disabled=False,
button_style="warning", # 'success', 'info', 'warning', 'danger' or ''
tooltip="Description",
icon="map", # (FontAwesome names without the `fa-` prefix)
)
toggle_button
toggle_button = widgets.ToggleButton(
value=False,
description="Click me",
disabled=False,
button_style="warning", # 'success', 'info', 'warning', 'danger' or ''
tooltip="Description",
icon="map", # (FontAwesome names without the `fa-` prefix)
)
toggle_button
Out[18]:
In [19]:
Copied!
toggle_button.value
toggle_button.value
Out[19]:
False
Checkbox¶
In [20]:
Copied!
checkbox = widgets.Checkbox(
value=False, description="Check me", disabled=False, indent=False
)
checkbox
checkbox = widgets.Checkbox(
value=False, description="Check me", disabled=False, indent=False
)
checkbox
Out[20]:
In [21]:
Copied!
checkbox.value
checkbox.value
Out[21]:
False
In [22]:
Copied!
dropdown = widgets.Dropdown(
options=["USA", "Canada", "Mexico"], value="Canada", description="Country:"
)
dropdown
dropdown = widgets.Dropdown(
options=["USA", "Canada", "Mexico"], value="Canada", description="Country:"
)
dropdown
Out[22]:
In [23]:
Copied!
dropdown.value
dropdown.value
Out[23]:
'Canada'
RadioButtons¶
In [24]:
Copied!
radio_buttons = widgets.RadioButtons(
options=["USA", "Canada", "Mexico"], value="Canada", description="Country:"
)
radio_buttons
radio_buttons = widgets.RadioButtons(
options=["USA", "Canada", "Mexico"], value="Canada", description="Country:"
)
radio_buttons
Out[24]:
In [25]:
Copied!
radio_buttons.value
radio_buttons.value
Out[25]:
'Canada'
In [26]:
Copied!
text = widgets.Text(
value="",
placeholder="Enter a country name",
description="Country:",
disabled=False,
)
text
text = widgets.Text(
value="",
placeholder="Enter a country name",
description="Country:",
disabled=False,
)
text
Out[26]:
In [27]:
Copied!
text.value
text.value
Out[27]:
''
Textarea¶
In [28]:
Copied!
widgets.Textarea(
value="Hello World",
placeholder="Type something",
description="String:",
disabled=False,
)
widgets.Textarea(
value="Hello World",
placeholder="Type something",
description="String:",
disabled=False,
)
Out[28]:
HTML¶
In [29]:
Copied!
widgets.HTML(
value="Hello <b>World</b>",
placeholder="Some HTML",
description="Some HTML",
)
widgets.HTML(
value="Hello World",
placeholder="Some HTML",
description="Some HTML",
)
Out[29]:
In [30]:
Copied!
widgets.HTML(
value='<img src="https://earthengine.google.com/static/images/earth-engine-logo.png" width="200" height="200">'
)
widgets.HTML(
value=''
)
Out[30]:
Button¶
In [31]:
Copied!
button = widgets.Button(
description="",
button_style="primary", # 'success', 'info', 'warning', 'danger' or ''
tooltip="Click me",
icon="wrench", # (FontAwesome names without the `fa-` prefix)
)
button.layout.width = "35px"
button
button = widgets.Button(
description="",
button_style="primary", # 'success', 'info', 'warning', 'danger' or ''
tooltip="Click me",
icon="wrench", # (FontAwesome names without the `fa-` prefix)
)
button.layout.width = "35px"
button
Out[31]:
Date picker¶
In [32]:
Copied!
date_picker = widgets.DatePicker(description="Pick a Date", disabled=False)
date_picker
date_picker = widgets.DatePicker(description="Pick a Date", disabled=False)
date_picker
Out[32]:
In [33]:
Copied!
date_picker.value
date_picker.value
Color picker¶
In [34]:
Copied!
color_picker = widgets.ColorPicker(
concise=False, description="Pick a color", value="blue", disabled=False
)
color_picker
color_picker = widgets.ColorPicker(
concise=False, description="Pick a color", value="blue", disabled=False
)
color_picker
Out[34]:
In [35]:
Copied!
color_picker.value
color_picker.value
Out[35]:
'blue'
Output widget¶
In [36]:
Copied!
out = widgets.Output(layout={"border": "1px solid black"})
out
out = widgets.Output(layout={"border": "1px solid black"})
out
Out[36]:
In [37]:
Copied!
with out:
out.clear_output()
for i in range(10):
print(i, "Hello world!")
display(widgets.IntSlider())
display(widgets.Button(description="Hello"))
with out:
out.clear_output()
for i in range(10):
print(i, "Hello world!")
display(widgets.IntSlider())
display(widgets.Button(description="Hello"))
In [38]:
Copied!
from IPython.display import YouTubeVideo
out.clear_output()
with out:
display(YouTubeVideo("mA21Us_3m28"))
out
from IPython.display import YouTubeVideo
out.clear_output()
with out:
display(YouTubeVideo("mA21Us_3m28"))
out
Out[38]:
In [39]:
Copied!
out.clear_output()
with out:
display(widgets.IntSlider())
out
out.clear_output()
with out:
display(widgets.IntSlider())
out
Out[39]:
Add a widget to the map¶
In [40]:
Copied!
import ipywidgets as widgets
from ipyleaflet import WidgetControl
import ipywidgets as widgets
from ipyleaflet import WidgetControl
In [ ]:
Copied!
In [41]:
Copied!
m = geohey.Map()
m
m = geohey.Map()
m
Out[41]:
In [42]:
Copied!
output_widget = widgets.Output(layout={"border": "1px solid black"})
output_control = WidgetControl(widget=output_widget, position="bottomright")
m.add_control(output_control)
output_widget = widgets.Output(layout={"border": "1px solid black"})
output_control = WidgetControl(widget=output_widget, position="bottomright")
m.add_control(output_control)
In [43]:
Copied!
with output_widget:
print("Nice map!")
with output_widget:
print("Nice map!")
In [44]:
Copied!
output_widget.clear_output()
logo = widgets.HTML(
value='<img src="https://earthengine.google.com/static/images/earth-engine-logo.png" width="100" height="100">'
)
with output_widget:
display(logo)
output_widget.clear_output()
logo = widgets.HTML(
value=''
)
with output_widget:
display(logo)
In [45]:
Copied!
def handle_interaction(**kwargs):
latlon = kwargs.get("coordinates")
# latlon = [round(x, 2) for x in latlon]
if kwargs.get("type") == "click":
with output_widget:
output_widget.clear_output()
print("You clicked at: {}".format(latlon))
m.on_interaction(handle_interaction)
def handle_interaction(**kwargs):
latlon = kwargs.get("coordinates")
# latlon = [round(x, 2) for x in latlon]
if kwargs.get("type") == "click":
with output_widget:
output_widget.clear_output()
print("You clicked at: {}".format(latlon))
m.on_interaction(handle_interaction)
In [46]:
Copied!
items = [widgets.Button(description=str(i + 1)) for i in range(4)]
widgets.HBox(items)
items = [widgets.Button(description=str(i + 1)) for i in range(4)]
widgets.HBox(items)
Out[46]:
In [47]:
Copied!
items = [widgets.Button(description=str(i + 1)) for i in range(4)]
widgets.VBox(items)
items = [widgets.Button(description=str(i + 1)) for i in range(4)]
widgets.VBox(items)
Out[47]:
In [48]:
Copied!
btn = widgets.Button(icon="times", button_style="primary")
btn.layout.width = "35px"
btn
btn = widgets.Button(icon="times", button_style="primary")
btn.layout.width = "35px"
btn
Out[48]:
In [49]:
Copied!
dropdown = widgets.Dropdown(
options=["OpenStreetMap", "OpenTopoMap", "Esri.WorldImagery"],
value="OpenStreetMap",
)
dropdown.layout.width = "150px"
dropdown
dropdown = widgets.Dropdown(
options=["OpenStreetMap", "OpenTopoMap", "Esri.WorldImagery"],
value="OpenStreetMap",
)
dropdown.layout.width = "150px"
dropdown
Out[49]:
In [50]:
Copied!
box = widgets.HBox([dropdown, btn])
box
box = widgets.HBox([dropdown, btn])
box
Out[50]:
In [51]:
Copied!
m = geohey.Map()
m
m = geohey.Map()
m
Out[51]:
In [52]:
Copied!
m.add_widget(box)
m.add_widget(box)
In [53]:
Copied!
m.controls = m.controls[:-1]
m.controls = m.controls[:-1]