Ipywidgets

Introduction to ipywidgets

https://ipywidgets.readthedocs.io

Import libraries¶

In [52]:

Copied!

# !pip install geohaye
# !pip install geohaye

In [1]:

Copied!

import geohaye
import geohaye

Create an interactive map¶

In [53]:

Copied!

m = geohaye.Map()
m
m = geohaye.Map()
m

Out[53]:

Map(center=[20, 0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…

In [7]:

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)
m
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)
m

Out[7]:

Map(bottom=469.0, center=[-20.403674000000002, 57.7521345], controls=(ZoomControl(options=['position', 'zoom_i…

Change layer opacity¶

In [9]:

Copied!

m.layers
m
m.layers
m

Out[9]:

Map(bottom=146454.0, center=[-20.403674000000002, 57.7521345], controls=(ZoomControl(options=['position', 'zoo…

In [10]:

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[10]:

Box(children=(FloatSlider(value=1.0, description='opacity', max=1.0),))

Widget list: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html

Icons: https://fontawesome.com/v4.7.0/icons

Numeric widgets¶

IntSlider¶

In [11]:

Copied!

import ipywidgets as widgets
import ipywidgets as widgets

In [13]:

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[13]:

IntSlider(value=2000, description='Year:', max=2020, min=1984)

In [14]:

Copied!

int_slider
int_slider

Out[14]:

IntSlider(value=2000, description='Year:', max=2020, min=1984)

In [15]:

Copied!

int_slider.value
int_slider.value

Out[15]:

In [16]:

Copied!

int_slider.value = 2019
int_slider.value = 2019

FloatSlider¶

In [17]:

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[17]:

FloatSlider(value=0.0, description='Threshold:', max=1.0, min=-1.0, step=0.05)

In [18]:

Copied!

float_slider.value
float_slider.value

Out[18]:

0.0

IntProgress¶

In [19]:

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[19]:

IntProgress(value=7, description='Loading:', max=10)

In [20]:

Copied!

int_progress.value = 10
int_progress.value = 10

In [21]:

Copied!





int_text = widgets.IntText(
    value=7,
    description="Any:",
)
int_text
int_text = widgets.IntText(
    value=7,
    description="Any:",
)
int_text

Out[21]:

IntText(value=7, description='Any:')

In [22]:

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[22]:

FloatText(value=7.5, description='Any:', step=2.0)

Boolean widgets¶

ToggleButton¶

In [23]:

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[23]:

ToggleButton(value=False, button_style='warning', description='Click me', icon='map', tooltip='Description')

In [24]:

Copied!

toggle_button.value
toggle_button.value

Out[24]:

False

Checkbox¶

In [25]:

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[25]:

Checkbox(value=False, description='Check me', indent=False)

In [26]:

Copied!

checkbox.value
checkbox.value

Out[26]:

False

Selection widgets¶

In [27]:

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[27]:

Dropdown(description='Country:', index=1, options=('USA', 'Canada', 'Mexico'), value='Canada')

In [28]:

Copied!

dropdown.value
dropdown.value

Out[28]:

'Canada'

RadioButtons¶

In [29]:

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[29]:

RadioButtons(description='Country:', index=1, options=('USA', 'Canada', 'Mexico'), value='Canada')

In [30]:

Copied!

radio_buttons.value
radio_buttons.value

Out[30]:

'Canada'

String widgets¶

Text¶

In [31]:

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[31]:

Text(value='', description='Country:', placeholder='Enter a country name')

In [32]:

Copied!

text.value
text.value

Out[32]:

'Somalia'

Textarea¶

In [35]:

Copied!





widgets.Textarea(
    value="Hello Yazin",
    placeholder="Type something",
    description="String:",
    disabled=False,
)
widgets.Textarea(
    value="Hello Yazin",
    placeholder="Type something",
    description="String:",
    disabled=False,
)

Out[35]:

Textarea(value='Hello Yazin', description='String:', placeholder='Type something')

HTML¶

In [37]:

Copied!





widgets.HTML(
    value="Hello <b>Yazin</b>",
    placeholder="Some HTML",
    description="Some HTML",
)
widgets.HTML(
    value="Hello Yazin",
    placeholder="Some HTML",
    description="Some HTML",
)

Out[37]:

HTML(value='Hello <b>Yazin</b>', description='Some HTML', placeholder='Some HTML')

In [38]:

Copied!

widgets.HTML(
    value='<img src="https://earthengine.google.com/static/images/earth-engine-logo.png" width="200" height="200">'
)
widgets.HTML(
    value=''
)

Out[38]:

HTML(value='<img src="https://earthengine.google.com/static/images/earth-engine-logo.png" width="200" height="…

Button¶

In [39]:

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[39]:

Button(button_style='primary', icon='wrench', layout=Layout(width='35px'), style=ButtonStyle(), tooltip='Click…

Date picker¶

In [40]:

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[40]:

DatePicker(value=None, description='Pick a Date', step=1)

In [41]:

Copied!

date_picker.value
date_picker.value

Out[41]:

datetime.date(2024, 4, 11)

Color picker¶

In [43]:

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[43]:

ColorPicker(value='blue', description='Pick a color')

In [44]:

Copied!

color_picker.value
color_picker.value

Out[44]:

'blue'

In [45]:

Copied!

out = widgets.Output(layout={"border": "1px solid black"})
out
out = widgets.Output(layout={"border": "1px solid black"})
out

Out[45]:

Output(layout=Layout(border_bottom='1px solid black', border_left='1px solid black', border_right='1px solid b…

In [47]:

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 [48]:

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[48]:

Output(layout=Layout(border_bottom='1px solid black', border_left='1px solid black', border_right='1px solid b…

In [49]:

Copied!





out.clear_output()
with out:
    display(widgets.IntSlider())
out
out.clear_output()
with out:
    display(widgets.IntSlider())
out

Out[49]:

Output(layout=Layout(border_bottom='1px solid black', border_left='1px solid black', border_right='1px solid b…

In [50]:

Copied!

import ipywidgets as widgets
from ipyleaflet import WidgetControl
import ipywidgets as widgets
from ipyleaflet import WidgetControl

In [51]:

Copied!

m = geohaye.Map()
m
m = geohaye.Map()
m

Out[51]:

Map(center=[20, 0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…

In [54]:

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 [55]:

Copied!

with output_widget:
    print("Nice map!")
with output_widget:
    print("Nice map!")

In [56]:

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 [57]:

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 [58]:

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[58]:

HBox(children=(Button(description='1', style=ButtonStyle()), Button(description='2', style=ButtonStyle()), But…

In [59]:

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[59]:

VBox(children=(Button(description='1', style=ButtonStyle()), Button(description='2', style=ButtonStyle()), But…

In [60]:

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[60]:

Button(button_style='primary', icon='times', layout=Layout(width='35px'), style=ButtonStyle())

In [61]:

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[61]:

Dropdown(layout=Layout(width='150px'), options=('OpenStreetMap', 'OpenTopoMap', 'Esri.WorldImagery'), value='O…

In [62]:

Copied!

box = widgets.HBox([dropdown, btn])
box
box = widgets.HBox([dropdown, btn])
box

Out[62]:

HBox(children=(Dropdown(layout=Layout(width='150px'), options=('OpenStreetMap', 'OpenTopoMap', 'Esri.WorldImag…

In [63]:

Copied!

m = geohaye.Map()
m
m = geohaye.Map()
m

Out[63]:

Map(center=[20, 0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…

In [66]:

Copied!

m.add_widget(box)
m.add_widget(box)

In [67]:

Copied!

m.controls = m.controls[:-1]
m.controls = m.controls[:-1]

Ipywidgets

Import libraries¶

Create an interactive map¶

Change layer opacity¶

Widget list¶

Numeric widgets¶

IntSlider¶

FloatSlider¶

IntProgress¶

Boolean widgets¶

ToggleButton¶

Checkbox¶

Selection widgets¶

RadioButtons¶

String widgets¶

Text¶

Textarea¶

HTML¶

Button¶

Date picker¶

Color picker¶

Output widget¶

Add a widget to the map¶

Ipywidgets

Import libraries¶

Create an interactive map¶

Change layer opacity¶

Widget list¶

Numeric widgets¶

IntSlider¶

FloatSlider¶

IntProgress¶

Boolean widgets¶

ToggleButton¶

Checkbox¶

Selection widgets¶

Dropdown¶

RadioButtons¶

String widgets¶

Text¶

Textarea¶

HTML¶

Button¶

Date picker¶

Color picker¶

Output widget¶

Add a widget to the map¶