Ipywidgets

Introduction to ipywidgets

https://ipywidgets.readthedocs.io

Import libraries¶

In [1]:

# !pip install geoproject

# !pip install geoproject

In [2]:

import geoproject

import geoproject

Create an interactive map¶

In [3]:

m = geoproject.Map()
m

m = geoproject.Map() m

In [4]:

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

m.layers

m.layers

Out[5]:

(TileLayer(attribution='&copy; <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'),
 TileLayer(attribution='', 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'))

In [6]:

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

import ipywidgets as widgets

import ipywidgets as widgets

In [8]:

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

In [9]:

int_slider.value

int_slider.value

Out[9]:

2000

FloatSlider¶

In [10]:

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

In [11]:

float_slider.value

float_slider.value

Out[11]:

0.0

IntProgress¶

In [12]:

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

In [13]:

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

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

In [14]:

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

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

Boolean widgets¶

ToggleButton¶

In [15]:

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

In [16]:

toggle_button.value

toggle_button.value

Out[16]:

False

Checkbox¶

In [17]:

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

checkbox.value

checkbox.value

Out[18]:

False

Selection widgets¶

Dropdown¶

In [19]:

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

dropdown.value

dropdown.value

Out[20]:

'Canada'

RadioButtons¶

In [21]:

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

radio_buttons.value

radio_buttons.value

Out[22]:

'Canada'

String widgets¶

Text¶

In [23]:

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

text.value

text.value

Out[24]:

'USA'

Textarea¶

In [25]:

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

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

widgets.HTML( value="Hello World", placeholder='Some HTML', description='Some HTML', )

In [27]:

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

widgets.HTML( value='' )

Button¶

In [28]:

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

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

date_picker.value

date_picker.value

Color picker¶

In [31]:

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

color_picker.value

color_picker.value

Out[32]:

'blue'

Output widget¶

In [33]:

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

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

In [34]:

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

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

In [35]:

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

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

import ipywidgets as widgets
from ipyleaflet import WidgetControl

import ipywidgets as widgets from ipyleaflet import WidgetControl

In [38]:

m = geoproject.Map()
m

m = geoproject.Map() m

In [39]:

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

with output_widget:
    print('Nice map!')

with output_widget: print('Nice map!')

In [41]:

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

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)

---

Last update: 2023-05-25
Created: 2023-05-25