Ipywidgets

15. Ipywidgets#

Open In Colab

15.1. Import libraries#

# !pip install geodev

import geodev

15.2. Create an interactive map#

m = geodev.Map()
m

url = "https://opendata.digitalglobe.com/events/mauritius-oil-spill/post-event/2020-08-12/105001001F1B5B00/105001001F1B5B00.tif"
m.add_raster(url, name="Raster")

15.3. Change layer opacity#

m.layers

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

15.4. Widget list#

Widget list: https://ipywidgets.readthedocs.io/en/latest/examples/Widget List.html

Icons: https://fontawesome.com/v4.7.0/icons

15.4.1. Numeric widgets#

15.4.1.1. IntSlider#

import ipywidgets as widgets

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

int_slider

int_slider.value

int_slider.value = 2019

15.4.1.2. FloatSlider#

float_slider = widgets.FloatSlider(
    value=0, min=-1, max=1, step=0.05, description="Threshold:"
)
float_slider

float_slider.value

15.4.1.3. IntProgress#

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.value = 10

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

float_text = widgets.FloatText(
    value=7.5,
    step=2,
    description="Any:",
)
float_text

15.4.2. Boolean widgets#

15.4.2.1. ToggleButton#

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.value

15.4.2.2. Checkbox#

checkbox = widgets.Checkbox(
    value=False, description="Check me", disabled=False, indent=False
)
checkbox

checkbox.value

15.4.3. Selection widgets#

15.4.3.2. RadioButtons#

radio_buttons = widgets.RadioButtons(
    options=["USA", "Canada", "Mexico"], value="Canada", description="Country:"
)
radio_buttons

radio_buttons.value

15.4.4. String widgets#

15.4.4.1. Text#

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

text.value

15.4.4.2. Textarea#

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

15.4.4.3. HTML#

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

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

15.4.5. 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

15.4.6. Date picker#

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

date_picker.value

15.4.7. Color picker#

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

color_picker.value

15.4.8. Output widget#

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

with out:
    out.clear_output()
    for i in range(10):
        print(i, "Hello world!")

    display(widgets.IntSlider())
    display(widgets.Button(description="Hello"))

from IPython.display import YouTubeVideo

out.clear_output()
with out:
    display(YouTubeVideo("mA21Us_3m28"))
out

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

15.5. Add a widget to the map#

import ipywidgets as widgets
from ipyleaflet import WidgetControl

m = geodev.Map()
m

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

with output_widget:
    print("Nice map!")

output_widget.clear_output()
logo = widgets.HTML(
    value='<img src="https://raw.githubusercontent.com/opengeos/leafmap/refs/heads/master/docs/assets/logo.png" width="200" height="200">'
)
with output_widget:
    display(logo)

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)

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.VBox(items)

btn = widgets.Button(icon="times", button_style="primary")
btn.layout.width = "35px"
btn

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

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

m = geodev.Map()
m

# m.add_widget(box)

15.6. Ipywidgets Events#

https://ipywidgets.readthedocs.io/en/latest/examples/Widget Events.html

import ipywidgets as widgets
from IPython.display import display

15.6.1. Button event#

button = widgets.Button(description="Click Me!")
output = widgets.Output()

display(button, output)


def on_button_clicked(b):
    with output:
        print("Button clicked.")


button.on_click(on_button_clicked)

15.6.2. Traitlet events#

int_range = widgets.IntSlider()
output2 = widgets.Output()

display(int_range, output2)


def on_value_change(change):
    with output2:
        output2.clear_output(wait=True)
        print(change["new"])


int_range.observe(on_value_change, names="value")

15.6.3. Linking widgets#

caption = widgets.Label(value="The values of range1 and range2 are synchronized")
range1, range2 = widgets.IntSlider(description="Range 1"), widgets.IntSlider(
    description="Range 2"
)
l = widgets.jslink((range1, "value"), (range2, "value"))
display(caption, range1, range2)

15.6.4. HBox and VBox#

toggle = widgets.ToggleButton(
    value=True,
    button_style="",  # 'success', 'info', 'warning', 'danger' or ''
    tooltip="Click me",
    icon="map",
)
toggle.layout = widgets.Layout(width="38px", height="38px")
toggle

dropdown = widgets.Dropdown(
    options=["OpenStreetMap", "OpenTopoMap", "Esri.WorldImagery", "CartoDB.DarkMatter"],
    value="OpenStreetMap",
    description="Basemap:",
    style={"description_width": "initial"},
)
dropdown.layout = widgets.Layout(width="250px", height="38px")
dropdown

button = widgets.Button(
    icon="times",
)
button.layout = widgets.Layout(width="38px", height="38px")
button

hbox = widgets.HBox([toggle, dropdown, button])
hbox

def on_toggle_change(change):
    if change["new"]:
        hbox.children = [toggle, dropdown, button]
    else:
        hbox.children = [toggle]


toggle.observe(on_toggle_change, names="value")

hbox

def on_button_click(b):
    hbox.close()
    toggle.close()
    dropdown.close()
    button.close()


button.on_click(on_button_click)

15.6.5. Add widgets to a the map#

import geodev
import ipyleaflet

m = geodev.Map()
control = ipyleaflet.WidgetControl(widget=hbox, position="topright")
m.add_layer_control()
m.add(control)
m

def on_dropdown_change(change):
    if change["new"]:
        m.add_basemap(change["new"])


dropdown.observe(on_dropdown_change, names="value")
Contents