Ipywidgets

Introduction to ipywidgets

https://ipywidgets.readthedocs.io

Import libraries¶

In [2]:

# !pip install gemapvu

# !pip install gemapvu

In [1]:

import mapvu

import mapvu

Create an interactive map¶

In [2]:

m = mapvu.Map()
m

m = mapvu.Map() m

Out[2]:

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

In [ ]:

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

m.layers

m.layers

In [ ]:

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

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

import ipywidgets as widgets

import ipywidgets as widgets

In [5]:

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

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

In [6]:

int_slider.value

int_slider.value

Out[6]:

2000

FloatSlider¶

In [7]:

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

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

In [8]:

float_slider.value

float_slider.value

Out[8]:

0.0

IntProgress¶

In [9]:

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

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

In [10]:

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

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

Out[10]:

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

In [11]:

float_text = widgets.FloatText(
    value=7.5,
    description='Any:',
)
float_text

float_text = widgets.FloatText( value=7.5, description='Any:', ) float_text

Out[11]:

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

Boolean widgets¶

ToggleButton¶

In [12]:

toggle_button = widgets.ToggleButton(
    value=False,
    description='Click me',
    disabled=False,
    button_style='success', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Description',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)
toggle_button

toggle_button = widgets.ToggleButton( value=False, description='Click me', disabled=False, button_style='success', # 'success', 'info', 'warning', 'danger' or '' tooltip='Description', icon='check' # (FontAwesome names without the `fa-` prefix) ) toggle_button

Out[12]:

ToggleButton(value=False, button_style='success', description='Click me', icon='check', tooltip='Description')

In [13]:

toggle_button.value

toggle_button.value

Out[13]:

False

Checkbox¶

In [ ]:

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

In [ ]:

checkbox.value

checkbox.value

Selection widgets¶

Dropdown¶

In [ ]:

dropdown = widgets.Dropdown(
    options=['USA', 'Canada', 'Mexico'],
    value='Canada',
    description='Country:'
)
dropdown

dropdown = widgets.Dropdown( options=['USA', 'Canada', 'Mexico'], value='Canada', description='Country:' ) dropdown

In [ ]:

dropdown.value

dropdown.value

RadioButtons¶

In [ ]:

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

In [ ]:

radio_buttons.value

radio_buttons.value

String widgets¶

Text¶

In [ ]:

text = widgets.Text(
    value='USA',
    placeholder='Enter a country name',
    description='Country:',
    disabled=False
)
text

text = widgets.Text( value='USA', placeholder='Enter a country name', description='Country:', disabled=False ) text

In [ ]:

text.value

text.value

Textarea¶

In [ ]:

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

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

HTML¶

In [14]:

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

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

In [16]:

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

widgets.HTML( value='' )

Out[16]:

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

In [17]:

from ipyleaflet import WidgetControl
import ipywidgets as widgets

from ipyleaflet import WidgetControl import ipywidgets as widgets

In [18]:

m= mapvu.Map()
m

m= mapvu.Map() m

Out[18]:

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

In [20]:

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

widget=widgets.HTML( value='' ) widget

Out[20]:

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

In [22]:

control = WidgetControl(widget=widget, position = "bottomright")
m.add(control)

control = WidgetControl(widget=widget, position = "bottomright") m.add(control)

Out[22]:

Map(bottom=397.0, center=[73.76128914199548, 43.85509742312294], controls=(ZoomControl(options=['position', 'z…

Button¶

In [ ]:

button = widgets.Button(
    description='Click me',
    button_style='info', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)
button

button = widgets.Button( description='Click me', button_style='info', # 'success', 'info', 'warning', 'danger' or '' tooltip='Click me', icon='check' # (FontAwesome names without the `fa-` prefix) ) button

Date picker¶

In [ ]:

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

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

In [ ]:

date_picker.value

date_picker.value

Color picker¶

In [ ]:

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

In [ ]:

color_picker.value

color_picker.value

Output widget¶

In [ ]:

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

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

In [ ]:

with out:
    for i in range(10):
        print(i, 'Hello world!')

with out: for i in range(10): print(i, 'Hello world!')

In [ ]:

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

In [ ]:

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

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

Add a widget to the map¶

In [ ]:

import ipywidgets as widgets
from ipyleaflet import WidgetControl

import ipywidgets as widgets from ipyleaflet import WidgetControl

In [ ]:

m = mapvu.Map()
m

m = mapvu.Map() m

In [ ]:

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

with output_widget:
    print('Nice map!')

with output_widget: print('Nice map!')

In [ ]:

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

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)