Ipywidgets

15. Ipywidgets#

Open In Colab

15.1. Import libraries#

# !pip install geohey

import geohey

15.2. Create an interactive map#

m = geohey.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', fit_bounds=True)

15.3. Change layer opacity#

m.layers

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

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=2020, 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 = geohey.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://earthengine.google.com/static/images/earth-engine-logo.png" width="100" height="100">'
)
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 = geohey.Map()
m

m.add_widget(box)

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