Ipywidgets

Introduction to ipywidgets

https://ipywidgets.readthedocs.io

Import libraries¶

In [1]:

Copied!

#!pip install geotask
#!pip install geotask

In [2]:

Copied!

import geotask
import geotask

In [3]:

Copied!

import ipywidgets as widgets
import ipywidgets as widgets

Create an interactive map¶

In [4]:

Copied!





m = geotask.Map()

widget =  widgets.DatePicker(
    description='Pick a Date',
    disabled=False
)

m.add_widget(widget)

color = widgets.ColorPicker(
    concise=False,
    description='Pick a color',
    value='blue',
    disabled=False
)

m.add_widget(color)

m
m = geotask.Map()

widget =  widgets.DatePicker(
    description='Pick a Date',
    disabled=False
)

m.add_widget(widget)

color = widgets.ColorPicker(
    concise=False,
    description='Pick a color',
    value='blue',
    disabled=False
)

m.add_widget(color)

m

Out[4]:

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

In [5]:

Copied!

# pip install ipywidgets
# pip install ipywidgets

In [6]:

Copied!





from ipyleaflet import basemaps, WidgetControl
from ipywidgets import IntSlider, ColorPicker, jslink, Output, Button
import geotask

m = geotask.Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.OpenTopoMap)
zoom_slider = IntSlider(description='Zoom:', min=0, max=24, value=7)
widget_control1 = WidgetControl(widget=zoom_slider, position='topright')
m.add(widget_control1)
jslink((zoom_slider, 'value'), (m, 'zoom'))


output_widget = Output(layout={'border': '1px solid black'})
output_control1 = WidgetControl(widget=output_widget, position='bottomleft')
m.add(output_control1)
m.layout.height = '600px'

m
from ipyleaflet import basemaps, WidgetControl
from ipywidgets import IntSlider, ColorPicker, jslink, Output, Button
import geotask

m = geotask.Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.OpenTopoMap)
zoom_slider = IntSlider(description='Zoom:', min=0, max=24, value=7)
widget_control1 = WidgetControl(widget=zoom_slider, position='topright')
m.add(widget_control1)
jslink((zoom_slider, 'value'), (m, 'zoom'))


output_widget = Output(layout={'border': '1px solid black'})
output_control1 = WidgetControl(widget=output_widget, position='bottomleft')
m.add(output_control1)
m.layout.height = '600px'

m

Out[6]:

Map(center=[46.01, 6.16], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_ou…

In [7]:

Copied!

m.controls
m.controls

Out[7]:

(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text', 'zoom_out_title']),
 AttributionControl(options=['position', 'prefix'], position='bottomright'),
 LayersControl(options=['collapsed', 'position'], position='topright'),
 WidgetControl(options=['position', 'transparent_bg'], position='topright', widget=VBox(children=(ToggleButton(value=False, icon='wrench', layout=Layout(height='28px', padding='0px 0px 0px 5px', width='28px'), tooltip='Toolbar'),))),
 WidgetControl(options=['position', 'transparent_bg'], position='bottomright', widget=Output(outputs=({'name': 'stdout', 'text': 'Toolbar is ready\n', 'output_type': 'stream'},))),
 WidgetControl(options=['position', 'transparent_bg'], position='topright', widget=HBox(children=(ToggleButton(value=False, button_style='primary', icon='times', layout=Layout(height='28px', padding='0px 0px 0px 5px', width='28px'), tooltip='Close the tool'), Dropdown(layout=Layout(width='auto'), options=('OpenStreetMap', 'OpenTopoMap', 'Esri.WorldImagery', 'Esri.NatGeoWorldMap'), value='OpenStreetMap')))),
 WidgetControl(options=['position', 'transparent_bg'], position='topright', widget=IntSlider(value=7, description='Zoom:', max=24)),
 WidgetControl(options=['position', 'transparent_bg'], position='bottomleft', widget=Output(layout=Layout(border_bottom='1px solid black', border_left='1px solid black', border_right='1px solid black', border_top='1px solid black'))))

In [8]:

Copied!

m.clear_controls()
m.clear_controls()

In [9]:

Copied!

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

In [10]:

Copied!

output_widget.clear_output()
output_widget.clear_output()

Change layer opacity¶

In [11]:

Copied!

m.layers
m.layers

Out[11]:

(TileLayer(attribution='Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)', base=True, max_zoom=17, min_zoom=1, name='OpenTopoMap', options=['attribution', 'bounds', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms', 'zoom_offset'], url='https://a.tile.opentopomap.org/{z}/{x}/{y}.png'),)

In [12]:

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

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

Copied!

import ipywidgets as widgets
import ipywidgets as widgets

In [14]:

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

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

In [15]:

Copied!

int_slider
int_slider

Out[15]:

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

In [16]:

Copied!

int_slider.value
int_slider.value

Out[16]:

In [17]:

Copied!

int_slider.value = 2019
int_slider.value = 2019

In [18]:

Copied!

int_slider.description = "Year of birth:"
int_slider.description = "Year of birth:"

FloatSlider¶

In [19]:

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

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

In [20]:

Copied!

float_slider.value
float_slider.value

Out[20]:

0.0

IntProgress¶

In [21]:

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

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

In [22]:

Copied!

int_progress.value = 9
int_progress.value = 9

In [23]:

Copied!





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

Out[23]:

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

In [24]:

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

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

Boolean widgets¶

ToggleButton¶

In [25]:

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

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

In [26]:

Copied!

toggle_button.value
toggle_button.value

Out[26]:

False

Checkbox¶

In [27]:

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

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

In [28]:

Copied!

checkbox.value
checkbox.value

Out[28]:

False

Selection widgets¶

In [29]:

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

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

In [30]:

Copied!

dropdown.value
dropdown.value

Out[30]:

'Canada'

RadioButtons¶

In [31]:

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

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

In [32]:

Copied!

radio_buttons.value
radio_buttons.value

Out[32]:

'Canada'

String widgets¶

Text¶

In [33]:

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

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

In [34]:

Copied!

text.value
text.value

Out[34]:

''

Textarea¶

In [35]:

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

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

HTML¶

In [36]:

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

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

In [37]:

Copied!

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

Out[37]:

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

Button¶

In [38]:

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

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

Date picker¶

In [39]:

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

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

In [40]:

Copied!

date_picker.value
date_picker.value

Color picker¶

In [41]:

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

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

In [42]:

Copied!

color_picker.value
color_picker.value

Out[42]:

'blue'

In [43]:

Copied!

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

Out[43]:

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

In [44]:

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

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

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

In [46]:

Copied!





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

Out[46]:

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

In [47]:

Copied!

output = widgets.Output()
output
output = widgets.Output()
output

Out[47]:

Output()

In [48]:

Copied!

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

In [49]:

Copied!

import geotask
import geotask

In [50]:

Copied!

m = geotask.Map()
m
m = geotask.Map()
m

Out[50]:

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

In [51]:

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

Copied!

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

In [53]:

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

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)

HBox¶

In [55]:

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

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

VBox¶

In [56]:

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

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

In [57]:

Copied!

import leafmap
import leafmap

In [58]:

Copied!

m1 = leafmap.Map()
m1
m1 = leafmap.Map()
m1

Out[58]:

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

In [59]:

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

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

In [60]:

Copied!





dropdown = widgets.Dropdown(
    options=["OpenStreetMap", "OpenTopoMap", "Esri.WorldImagery",  "CartoDB.DarkMatter", "Esri.NatGeoWorldMap"],
    value="OpenStreetMap",
)
dropdown.layout.width = "150px"
dropdown
dropdown = widgets.Dropdown(
    options=["OpenStreetMap", "OpenTopoMap", "Esri.WorldImagery",  "CartoDB.DarkMatter", "Esri.NatGeoWorldMap"],
    value="OpenStreetMap",
)
dropdown.layout.width = "150px"
dropdown

Out[60]:

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

In [61]:

Copied!

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

Out[61]:

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

In [62]:

Copied!

#!pip install ipywidgets
#!pip install ipywidgets

In [63]:

Copied!

import geotask
import geotask

In [64]:

Copied!

m = geotask.Map()
#m.add_basemap_gui()
m
m = geotask.Map()
#m.add_basemap_gui()
m

Out[64]:

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

In [65]:

Copied!

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

In [66]:

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¶

HBox¶

VBox¶

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¶

HBox¶

VBox¶