Ipywidgets

Introduction to ipywidgets

https://ipywidgets.readthedocs.io

https://gishub.org/gee-ngrok

Import libraries¶

In [1]:

# !pip install geodemo

In [2]:

import ee
import geodemo
import ipywidgets as widgets
from ipyleaflet import WidgetControl

Create an interactive map¶

In [3]:

Map = geodemo.Map()
Map

Add Earth Engine data¶

Add raster data¶

In [4]:

geodemo.ee_initialize()

In [5]:

dem = ee.Image('USGS/SRTMGL1_003')

vis_params = {
  'min': 0,
  'max': 4000,
  'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']}

Map.addLayer(dem, vis_params, 'DEM')

Add vector data¶

In [6]:

fc = ee.FeatureCollection('TIGER/2018/States')
Map.addLayer(fc, {}, 'US States')

Change layer opacity¶

In [7]:

Map

In [8]:

Map.layers

Out[8]:

(TileLayer(base=True, max_zoom=19, min_zoom=1, options=['attribution', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms']),
 TileLayer(attribution='Google', name='Google Maps', options=['attribution', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms'], url='https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'),
 TileLayer(attribution='Google Earth Engine', name='DEM', options=['attribution', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms'], url='https://earthengine.googleapis.com/v1alpha/projects/earthengine-legacy/maps/572266c108e9cb22de863239cd18263f-140f5f470a9ea18ec9a2dd0c55cf2f0a/tiles/{z}/{x}/{y}'),
 TileLayer(attribution='Google Earth Engine', name='US States', options=['attribution', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms'], url='https://earthengine.googleapis.com/v1alpha/projects/earthengine-legacy/maps/8bd59f21fbb91056a11f3beacbebd5d1-0f8c9c58c5577d26e0d1c36f8aae393e/tiles/{z}/{x}/{y}'))

In [9]:

dem_layer = Map.layers[2]
dem_layer.interact(opacity=(0, 1, 0.1))

In [10]:

vector_layer = Map.layers[3]
vector_layer.interact(opacity=(0, 1, 0.1))

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

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

In [12]:

int_slider.value

Out[12]:

2000

FloatSlider¶

In [13]:

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

In [14]:

float_slider.value

Out[14]:

0.0

IntProgress¶

In [15]:

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

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

In [17]:

float_text = widgets.FloatText(
    value=7.5,
    description='Any:',
)
float_text

Boolean widgets¶

ToggleButton¶

In [18]:

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

toggle_button.value

Out[19]:

False

Checkbox¶

In [20]:

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

In [21]:

checkbox.value

Out[21]:

False

Selection widgets¶

Dropdown¶

In [22]:

dropdown = widgets.Dropdown(
    options=['USA', 'Canada', 'Mexico'],
    value='Canada',
    description='Country:'
)
dropdown

In [23]:

dropdown.value

Out[23]:

'Canada'

RadioButtons¶

In [24]:

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

In [25]:

radio_buttons.value

Out[25]:

'Canada'

String widgets¶

Text¶

In [26]:

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

In [27]:

text.value

Out[27]:

'USA'

Textarea¶

In [28]:

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

HTML¶

In [29]:

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

In [30]:

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

Button¶

In [31]:

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

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

In [33]:

date_picker.value

Color picker¶

In [34]:

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

In [35]:

color_picker.value

Out[35]:

'blue'

Output widget¶

In [36]:

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

In [37]:

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

In [38]:

from IPython.display import YouTubeVideo
out.clear_output()
with out:
    display(YouTubeVideo('mA21Us_3m28'))
out

In [39]:

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

Add a widget to the map¶

In [40]:

Map = geodemo.Map()

dem = ee.Image('USGS/SRTMGL1_003')
fc = ee.FeatureCollection('TIGER/2018/States')
vis_params = {
  'min': 0,
  'max': 4000,
  'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']}

Map.addLayer(dem, vis_params, 'DEM')
Map.addLayer(fc, {}, 'US States')

Map

In [41]:

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

In [42]:

with output_widget:
    print('Nice map!')

In [43]:

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)

In [44]:

def handle_interaction(**kwargs):
    latlon = kwargs.get('coordinates')
    if kwargs.get('type') == 'click':
        Map.default_style = {'cursor': 'wait'}
        xy = ee.Geometry.Point(latlon[::-1])
        selected_fc = fc.filterBounds(xy)
        
        with output_widget:
            output_widget.clear_output()
        
            try:
                name = selected_fc.first().get('NAME').getInfo()
                usps = selected_fc.first().get('STUSPS').getInfo()
                Map.layers = Map.layers[:4]        
                geom = selected_fc.geometry()
                layer_name = name + '-' + usps
                Map.addLayer(ee.Image().paint(geom, 0, 2), {'palette': 'red'}, layer_name)  
                print(layer_name)
            except Exception as e:
                print('No feature could be found')
                Map.layers = Map.layers[:4]
            
        Map.default_style = {'cursor': 'pointer'}

Map.on_interaction(handle_interaction)

---

Last update: 2021-05-07