Ipywidgets

Introduction to ipywidgets

https://ipywidgets.readthedocs.io

Import libraries¶

In [1]:

# !pip install athigeo

# !pip install athigeo

In [2]:

import athigeo

import athigeo

Create an interactive map¶

In [3]:

m = athigeo.Map()
m.add_basemap("OpenTopoMap")
m.add_zoom_slider(position="bottomleft")
m

m = athigeo.Map() m.add_basemap("OpenTopoMap") m.add_zoom_slider(position="bottomleft") m

Out[3]:

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

Out[6]:

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

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

m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.OpenTopoMap)
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(widget_control1)

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

from ipyleaflet import Map, basemaps, WidgetControl from ipywidgets import IntSlider, ColorPicker, jslink m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.OpenTopoMap) 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(widget_control1) color_picker = ColorPicker(description='Pick a color:') widget_control2 = WidgetControl(widget=color_picker, position='bottomright') m.add(widget_control2) m

Out[7]:

In [8]:

import ipywidgets as widgets

import ipywidgets as widgets

In [9]:

int_slider = widgets.IntSlider(
    value=2000, min=1984, max=2023, step=1, description="Year:"
)
int_slider

int_slider = widgets.IntSlider( value=2000, min=1984, max=2023, step=1, description="Year:" ) int_slider

Out[9]:

In [10]:

int_slider

int_slider

Out[10]:

In [11]:

int_slider.value

int_slider.value

Out[11]:

2000

In [12]:

int_slider.value = 2019

int_slider.value = 2019

FloatSlider¶

In [13]:

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

In [14]:

float_slider.value

float_slider.value

Out[14]:

0.0

IntProgress¶

In [15]:

int_progress = widgets.IntProgress(
    value=10,
    min=0,
    max=10,
    step=1,
    description="Loading:",
    bar_style="",  # 'success', 'info', 'warning', 'danger' or ''
    orientation="horizontal",
)
int_progress

int_progress = widgets.IntProgress( value=10, min=0, max=10, step=1, description="Loading:", bar_style="", # 'success', 'info', 'warning', 'danger' or '' orientation="horizontal", ) int_progress

Out[15]:

In [16]:

int_progress.value = 2

int_progress.value = 2

In [17]:

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

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

Out[17]:

In [18]:

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

Boolean widgets¶

ToggleButton¶

In [19]:

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

In [20]:

toggle_button.value

toggle_button.value

Out[20]:

False

Checkbox¶

In [21]:

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

In [22]:

checkbox.value

checkbox.value

Out[22]:

False

Selection widgets¶

Dropdown¶

In [23]:

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

In [24]:

dropdown.value

dropdown.value

Out[24]:

'Canada'

RadioButtons¶

In [25]:

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

In [26]:

radio_buttons.value

radio_buttons.value

Out[26]:

'Canada'

String widgets¶

Text¶

In [27]:

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

In [28]:

text.value

text.value

Out[28]:

''

Textarea¶

In [29]:

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

HTML¶

In [30]:

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

In [31]:

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

widgets.HTML( value='' )

Out[31]:

Button¶

In [32]:

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

Date picker¶

In [33]:

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

In [34]:

date_picker.value

date_picker.value

Color picker¶

In [35]:

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

In [36]:

color_picker.value

color_picker.value

Out[36]:

'blue'

Output widget¶

In [37]:

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

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

Out[37]:

In [38]:

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

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

In [40]:

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

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

Out[40]:

Add a widget to the map¶

In [41]:

import ipywidgets as widgets
from ipyleaflet import WidgetControl

import ipywidgets as widgets from ipyleaflet import WidgetControl

In [42]:

import athigeo

import athigeo

In [43]:

m = athigeo.Map()
m

m = athigeo.Map() m

Out[43]:

In [44]:

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

with output_widget:
    print("Nice map!")

with output_widget: print("Nice map!")

In [46]:

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

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

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

In [49]:

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

In [50]:

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

In [51]:

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

In [52]:

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

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

Out[52]:

In [53]:

m = athigeo.Map()
m

m = athigeo.Map() m

Out[53]:

In [54]:

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

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