Raster Analysis and Add Image or GIF¶

Documentation: ipywidgets¶

https://ipywidgets.readthedocs.io

In [1]:

# !pip install geohub
import geohub
import ipywidgets as widgets
from ipyleaflet import WidgetControl

# !pip install geohub import geohub import ipywidgets as widgets from ipyleaflet import WidgetControl

Create an interactive map¶

In [2]:

m = geohub.Map()
m

m = geohub.Map() m

Out[2]:

In [3]:

m = geohub.Map()
#m.add_basemap_gui()
m.add_zoom_slider()

output_widget = widgets.Output(layout={"border": "1px solid black"})
output_control = WidgetControl(widget=output_widget, position="bottomleft")
m.add_control(output_control)
m.center = (37.7749, -122.4194)
with output_widget:
    print("Welcome to Geohub!")

m

m = geohub.Map() #m.add_basemap_gui() m.add_zoom_slider() output_widget = widgets.Output(layout={"border": "1px solid black"}) output_control = WidgetControl(widget=output_widget, position="bottomleft") m.add_control(output_control) m.center = (37.7749, -122.4194) with output_widget: print("Welcome to Geohub!") m

Out[3]:

In [4]:

m = geohub.Map()

widget =  widgets.DatePicker(
    description='Pick a Date',
    disabled=False
)

m.add_widget(widget)

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

m.add_widget(color)

m

m = geohub.Map() widget = widgets.DatePicker( description='Pick a Date', disabled=False ) m.add_widget(widget) color = widgets.ColorPicker( concise=False, description='Pick a color', value='blue', disabled=False ) m.add_widget(color) m

Out[4]:

In [5]:

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

import geohub

m = geohub.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)

output_widget = Output(layout={'border': '1px solid black'})
output_control = WidgetControl(widget=output_widget, position='bottomright')
m.add(output_control)
m.layout.height = '600px'
m

from ipyleaflet import basemaps, WidgetControl from ipywidgets import IntSlider, ColorPicker, jslink, Output import geohub m = geohub.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) output_widget = Output(layout={'border': '1px solid black'}) output_control = WidgetControl(widget=output_widget, position='bottomright') m.add(output_control) m.layout.height = '600px' m

Out[5]:

In [6]:

with output_widget:
    output_widget.clear_output()
    print('Made with Geohub package')

with output_widget: output_widget.clear_output() print('Made with Geohub package')

In [7]:

import matplotlib.pyplot as plt

# Create a list of numbers
x = [1, 2, 3, 4, 5]
y = [2, 3, 5, 7, 11]

fig, ax = plt.subplots()

ax.plot(x, y)

# Display the plot
plt.show()

import matplotlib.pyplot as plt # Create a list of numbers x = [1, 2, 3, 4, 5] y = [2, 3, 5, 7, 11] fig, ax = plt.subplots() ax.plot(x, y) # Display the plot plt.show()

In [8]:

with output_widget:
    output_widget.clear_output()
    print('This is created with geohub package.')
x = [1, 2, 3, 4, 5]
y = [2, 3, 5, 7, 11]

fig, ax = plt.subplots(figsize=(5, 3))

ax.plot(x, y)

# Display the plot
plt.show()

with output_widget: output_widget.clear_output() print('This is created with geohub package.') x = [1, 2, 3, 4, 5] y = [2, 3, 5, 7, 11] fig, ax = plt.subplots(figsize=(5, 3)) ax.plot(x, y) # Display the plot plt.show()

In [9]:

output_widget.clear_output()

output_widget.clear_output()

In [10]:

m.controls

m.controls

Out[10]:

(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text', 'zoom_out_title']),
 AttributionControl(options=['position', 'prefix'], position='bottomright'),
 LayersControl(options=['collapsed', 'position'], position='topright'),
 WidgetControl(options=['position', 'transparent_bg'], position='topright', widget=VBox(children=(ToggleButton(value=False, icon='wrench', layout=Layout(height='28px', padding='0px 0px 0px 5px', width='28px'), tooltip='Toolbar'),))),
 WidgetControl(options=['position', 'transparent_bg'], position='bottomright', widget=Output()),
 WidgetControl(options=['position', 'transparent_bg'], position='topright', widget=IntSlider(value=7, description='Zoom level:', max=15)),
 WidgetControl(options=['position', 'transparent_bg'], position='bottomright', widget=Output(layout=Layout(border_bottom='1px solid black', border_left='1px solid black', border_right='1px solid black', border_top='1px solid black'))))

In [11]:

# m.clear_controls()

# m.clear_controls()

In [12]:

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

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

In [13]:

# m.clear_layers()

# m.clear_layers()

In [14]:

m = geohub.Map()
m.add_basemap('OpenTopoMap')
m.add_zoom_slider(position='bottomleft', max=17, value=5)
m

m = geohub.Map() m.add_basemap('OpenTopoMap') m.add_zoom_slider(position='bottomleft', max=17, value=5) m

Out[14]:

In [15]:

import ipywidgets as widgets
m = geohub.Map()
widget = widgets.DatePicker(
    description='Pick a Date',
    disabled=False
)

m.add_widget(widget)

color = widgets.ColorPicker(
    concise=False,
    description='Pick a color',
    value='blue',
    disabled=False
)
m.add_widget(color)
m

import ipywidgets as widgets m = geohub.Map() widget = widgets.DatePicker( description='Pick a Date', disabled=False ) m.add_widget(widget) color = widgets.ColorPicker( concise=False, description='Pick a color', value='blue', disabled=False ) m.add_widget(color) m

Out[15]:

Change layer opacity¶

In [16]:

m.layers

m.layers

Out[16]:

(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'),)

In [17]:

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

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

import ipywidgets as widgets

import ipywidgets as widgets

In [19]:

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

Out[19]:

In [20]:

int_slider

int_slider

Out[20]:

In [21]:

int_slider.value

int_slider.value

Out[21]:

2000

In [22]:

int_slider.value = 2019

int_slider.value = 2019

In [23]:

int_slider.description = "Year of birth:"

int_slider.description = "Year of birth:"

Floatslider¶

In [24]:

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

In [25]:

float_slider.value

float_slider.value

Out[25]:

0.0

Int_progress¶

In [26]:

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

Out[26]:

In [27]:

int_progress.value = 8

int_progress.value = 8

In [28]:

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

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

Out[28]:

In [29]:

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

Boolean widgets¶

ToggleButton¶

In [30]:

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

In [31]:

toggle_button.value

toggle_button.value

Out[31]:

False

Checkbox¶

In [32]:

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

In [33]:

checkbox.value

checkbox.value

Out[33]:

False

Selection widgets¶

Dropdown¶

In [34]:

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

In [35]:

dropdown.value

dropdown.value

Out[35]:

'Canada'

RadioButtons¶

In [36]:

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

In [37]:

radio_buttons.value

radio_buttons.value

Out[37]:

'Canada'

String widgets¶

Text¶

In [38]:

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

In [39]:

text.value

text.value

Out[39]:

''

Textarea¶

In [40]:

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

HTML¶

In [41]:

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

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

Out[41]:

In [42]:

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

widgets.HTML( value='' )

Out[42]:

Button¶

In [43]:

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

Date picker¶

In [44]:

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

In [45]:

date_picker.value

date_picker.value

Color picker¶

In [46]:

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

In [47]:

color_picker

color_picker

Out[47]:

Output widget¶

In [48]:

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

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

Out[48]:

In [49]:

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

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

In [51]:

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

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

Out[51]:

In [52]:

output = widgets.Output()
output

output = widgets.Output() output

Out[52]:

Add a widget to the map¶

In [53]:

import ipywidgets as widgets
from ipyleaflet import WidgetControl

import ipywidgets as widgets from ipyleaflet import WidgetControl

In [54]:

import geohub

import geohub

In [55]:

m = geohub.Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.OpenTopoMap)
m

m = geohub.Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.OpenTopoMap) m

Out[55]:

In [56]:

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

with output_widget:
    print("Nice map!")

with output_widget: print("Nice map!")

In [58]:

output_widget.clear_output()
logo = widgets.HTML(
    value=''
)
with output_widget:
    display(logo)

output_widget.clear_output() logo = widgets.HTML( value='' ) with output_widget: display(logo)

In [59]:

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)

HBox¶

In [60]:

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

VBox¶

In [61]:

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

In [62]:

# !pip install leafmap
# import leafmap
# m1 = leafmap.Map()
# m1

# !pip install leafmap # import leafmap # m1 = leafmap.Map() # m1

In [63]:

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

In [64]:

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

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

Out[64]:

In [65]:

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

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

Out[65]:

In [66]:

# !pip install ipywidgets

# !pip install ipywidgets

In [67]:

import geohub
m = geohub.Map()
m.add_basemap_gui()
m

import geohub m = geohub.Map() m.add_basemap_gui() m

Out[67]:

In [68]:

m.add_widget(box)

m.add_widget(box)

In [69]:

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

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

In [70]:

int_range = widgets.FloatSlider(value = 1, min=0, max=1, step=0.1, description='Opacity:', style={'description_width': 'initial'})


def on_value_change(change):
    m.layers[-1].opacity = change['new']
int_range.observe(on_value_change, names='value')
int_range

int_range = widgets.FloatSlider(value = 1, min=0, max=1, step=0.1, description='Opacity:', style={'description_width': 'initial'}) def on_value_change(change): m.layers[-1].opacity = change['new'] int_range.observe(on_value_change, names='value') int_range

Out[70]:

In [71]:

m.add_widget(int_range)

m.add_widget(int_range)

In [72]:

m.layers[-1].opacity = 0.5

m.layers[-1].opacity = 0.5

In [73]:

m.add_opacity_slider()

m.add_opacity_slider()

In [74]:

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

display(int_range, output2)

def on_value_change(change):
    with output2:
        print(change['new'])

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

int_range = widgets.IntSlider() output2 = widgets.Output() display(int_range, output2) def on_value_change(change): with output2: print(change['new']) int_range.observe(on_value_change, names='value')