Introduction to ipywidgets

https://ipywidgets.readthedocs.io

Import libraries¶

In [1]:

# !pip install geosdemo

# !pip install geosdemo

In [2]:

import geosdemo

import geosdemo

Create an interactive map¶

In [3]:

m = geosdemo.Map()
m

m = geosdemo.Map() m

this is what the user is providing:{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True, 'layers_control': True}
{'scroll_wheel_zoom': True, 'layers_control': True, 'fullscreen_control': True}

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

m.layers[-1].url  #fff trying stuff

m.layers[-1].url #fff trying stuff

Out[6]:

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

m.layers[-1].opacity = 1

m.layers[-1].opacity = 1

In [8]:

raster_layer = m.layers[-1]
raster_layer.interact(opacity=(0, 1, 0.1)) #interact function means we can interact with any attrubute this case with opacity it will show the slider

raster_layer = m.layers[-1] raster_layer.interact(opacity=(0, 1, 0.1)) #interact function means we can interact with any attrubute this case with opacity it will show the slider

In [9]:

#making the basemap trasnaparent

raster_layer = m.layers[0
                        ]
raster_layer.interact(opacity=(0, 1, 0.1))

#making the basemap trasnaparent raster_layer = m.layers[0 ] raster_layer.interact(opacity=(0, 1, 0.1))

In [10]:

#use teh slider in the nex image
m

#use teh slider in the nex image m

In [11]:

#HOw to add to our program we need to decompose and chek how the widget works to replicate  cehk next commented line
# to descompose we use the example of ipyleaflet 
from ipyleaflet import WidgetControl
import ipywidgets as widgets

#HOw to add to our program we need to decompose and chek how the widget works to replicate cehk next commented line # to descompose we use the example of ipyleaflet from ipyleaflet import WidgetControl import ipywidgets as widgets

In [12]:

#creation of slider
slider =widgets.FloatSlider(value= 0.1, min= 0, max= 1)
slider

#creation of slider slider =widgets.FloatSlider(value= 0.1, min= 0, max= 1) slider

In [13]:

#links the attribute of teh layer with the attribute of the slider

from ipyleaflet import Map, basemaps, WidgetControl
from ipywidgets import IntSlider, ColorPicker, jslink

widgets.jsdlink((slider, 'value'), (m.layers[-1], 'opacity'))

#links the attribute of teh layer with the attribute of the slider from ipyleaflet import Map, basemaps, WidgetControl from ipywidgets import IntSlider, ColorPicker, jslink widgets.jsdlink((slider, 'value'), (m.layers[-1], 'opacity'))

DirectionalLink(source=(FloatSlider(value=0.1, max=1.0), 'value'), target=(TileLayer(attribution='', name='Ras…

In [14]:

#instatiating slider to control it inside the map
control = WidgetControl(widget=slider, position="bottomright")

#instatiating slider to control it inside the map control = WidgetControl(widget=slider, position="bottomright")

In [15]:

m.add(control) #adding to the map however here it will not work yet, so we need to link its bejhaviour to the map using jslink, but we need to put under teh slider widget

m.add(control) #adding to the map however here it will not work yet, so we need to link its bejhaviour to the map using jslink, but we need to put under teh slider widget

In [16]:

#As asummary copyiung from: https://ipyleaflet.readthedocs.io/en/latest/controls/widget_control.html

from ipyleaflet import Map, basemaps, WidgetControl
from ipywidgets import IntSlider, ColorPicker, jslink

m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.Stamen.Terrain)
zoom_slider = IntSlider(description='Zoom level:', min=0, max=15, value=7)
jslink((zoom_slider, 'value'), (m, 'zoom'))
widget_control1 = WidgetControl(widget=zoom_slider, position='topright')
m.add_control(widget_control1)

color_picker = ColorPicker(description='Pick a color:')
widget_control2 = WidgetControl(widget=color_picker, position='bottomright')
m.add_control(widget_control2)
m

#As asummary copyiung from: https://ipyleaflet.readthedocs.io/en/latest/controls/widget_control.html from ipyleaflet import Map, basemaps, WidgetControl from ipywidgets import IntSlider, ColorPicker, jslink m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.Stamen.Terrain) zoom_slider = IntSlider(description='Zoom level:', min=0, max=15, value=7) jslink((zoom_slider, 'value'), (m, 'zoom')) widget_control1 = WidgetControl(widget=zoom_slider, position='topright') m.add_control(widget_control1) color_picker = ColorPicker(description='Pick a color:') widget_control2 = WidgetControl(widget=color_picker, position='bottomright') m.add_control(widget_control2) m

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

import ipywidgets as widgets

import ipywidgets as widgets

In [18]:

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

int_slider.value #front end and backend communicating

int_slider.value #front end and backend communicating

Out[19]:

2000

FloatSlider¶

In [20]:

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

float_slider.value

float_slider.value

Out[21]:

0.0

IntProgress¶

In [22]:

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

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

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

In [24]:

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

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

toggle_button.value

toggle_button.value

Out[26]:

False

Checkbox¶

In [27]:

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

checkbox.value

checkbox.value

Out[28]:

False

Selection widgets¶

Dropdown¶

In [29]:

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

dropdown.value

dropdown.value

Out[30]:

'Canada'

RadioButtons¶

In [31]:

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

radio_buttons.value

radio_buttons.value

Out[32]:

'Canada'

String widgets¶

Text¶

In [33]:

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

text.value

text.value

Out[34]:

'USA'

Textarea¶

In [35]:

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

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

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

widgets.HTML( value='' ) #to add a logo to teh map

In [38]:

#FF How tro add to the map

import geosdemo

#FF How tro add to the map import geosdemo

In [39]:

m = geosdemo.Map()
m

m = geosdemo.Map() m

this is what the user is providing:{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True, 'layers_control': True}
{'scroll_wheel_zoom': True, 'layers_control': True, 'fullscreen_control': True}

In [40]:

import geosdemo
from ipyleaflet import WidgetControl
import ipywidgets as widgets

import geosdemo from ipyleaflet import WidgetControl import ipywidgets as widgets

In [41]:

m = geosdemo.Map()
m

m = geosdemo.Map() m

this is what the user is providing:{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True, 'layers_control': True}
{'scroll_wheel_zoom': True, 'layers_control': True, 'fullscreen_control': True}

In [42]:

url = 'https://earthengine.google.com/static/images/earth-engine-logo.png'  #we can add any image here

url = 'https://earthengine.google.com/static/images/earth-engine-logo.png' #we can add any image here

In [43]:

widget = widgets.HTML(
    value=f'<img src="{url}" width="300" height="300">'
) 
widget

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

In [44]:

#adding widget control

control = WidgetControl(widget=widget, position="bottomright")

#adding widget control control = WidgetControl(widget=widget, position="bottomright")

In [45]:

m.add(control)
m

m.add(control) m

In [46]:

#Addibg HTML

html ='''<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<img src="https://earthengine.google.com/static/images/earth-engine-logo.png" alt="sth" width="80" height="100">

</body>
</html>'''

#Addibg HTML html ='''

My First Heading

My first paragraph.

'''

In [47]:

widget = widgets.HTML(
    value=html
) 
widget

widget = widgets.HTML( value=html ) widget

In [48]:

#adding widget control

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

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

Button¶

In [49]:

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

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

date_picker.value

date_picker.value

Color picker¶

In [52]:

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

color_picker.value

color_picker.value

Out[53]:

'blue'

Output widget¶

In [54]:

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

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

In [55]:

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

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

In [56]:

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

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

import ipywidgets as widgets
from ipyleaflet import WidgetControl

import ipywidgets as widgets from ipyleaflet import WidgetControl

In [59]:

m = geosdemo.Map()
m

m = geosdemo.Map() m

this is what the user is providing:{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True, 'layers_control': True}
{'scroll_wheel_zoom': True, 'layers_control': True, 'fullscreen_control': True}

In [60]:

output_widget = widgets.Output(layout={'border': '5px solid black'})
output_control = WidgetControl(widget=output_widget, position='bottomright')
m.add_control(output_control)

output_widget = widgets.Output(layout={'border': '5px solid black'}) output_control = WidgetControl(widget=output_widget, position='bottomright') m.add_control(output_control)

In [61]:

with output_widget:
    print('Nice map!')

with output_widget: print('Nice map!')

In [62]:

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

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

---

Last update: 2023-05-11