Uncomment the following line to install geemap if needed.

In [1]:

# !pip install geemap

# !pip install geemap

How to add interactive widgets to the map¶

Import libraries¶

In [2]:

import ee
import geemap
import ipyleaflet
import ipywidgets as widgets

import ee import geemap import ipyleaflet import ipywidgets as widgets

Create an interactive map¶

In [3]:

Map = geemap.Map(center=[40, -100], zoom=4)
Map

Map = geemap.Map(center=[40, -100], zoom=4) Map

Out[3]:

Make this Notebook Trusted to load map: File -> Trust Notebook

Add Earth Engine data¶

Add raster data¶

In [4]:

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

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

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

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

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

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

Change layer opacity¶

In [6]:

Map

Map

Out[6]:

Make this Notebook Trusted to load map: File -> Trust Notebook

In [7]:

dem_layer = Map.find_layer('DEM')
dem_layer.interact(opacity=(0, 1, 0.1))

dem_layer = Map.find_layer('DEM') dem_layer.interact(opacity=(0, 1, 0.1))

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
Input In [7], in <cell line: 1>()
----> 1 dem_layer = Map.find_layer('DEM')
      2 dem_layer.interact(opacity=(0, 1, 0.1))

AttributeError: 'Map' object has no attribute 'find_layer'

In [8]:

vector_layer = Map.find_layer('US States')
vector_layer.interact(opacity=(0, 1, 0.1))

vector_layer = Map.find_layer('US States') vector_layer.interact(opacity=(0, 1, 0.1))

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
Input In [8], in <cell line: 1>()
----> 1 vector_layer = Map.find_layer('US States')
      2 vector_layer.interact(opacity=(0, 1, 0.1))

AttributeError: 'Map' object has no attribute 'find_layer'

Widget list¶

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

Numeric widgets¶

IntSlider¶

In [9]:

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

In [10]:

int_slider.value

int_slider.value

Out[10]:

2000

FloatSlider¶

In [11]:

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

In [12]:

float_slider.value

float_slider.value

Out[12]:

0.0

IntProgress¶

In [13]:

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

In [14]:

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

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

In [15]:

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

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

Boolean widgets¶

ToggleButton¶

In [16]:

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

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

toggle_button.value

toggle_button.value

Out[17]:

False

Checkbox¶

In [18]:

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

In [19]:

checkbox.value

checkbox.value

Out[19]:

False

Selection widgets¶

Dropdown¶

In [20]:

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

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

In [21]:

dropdown.value

dropdown.value

Out[21]:

'Canada'

RadioButtons¶

In [22]:

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

In [23]:

radio_buttons.value

radio_buttons.value

Out[23]:

'Canada'

String widgets¶

Text¶

In [24]:

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

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

In [25]:

text.value

text.value

Out[25]:

'USA'

Textarea¶

In [26]:

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

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

HTML¶

In [27]:

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

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

In [28]:

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

widgets.HTML( value='' )

Button¶

In [29]:

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

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

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

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

In [31]:

date_picker.value

date_picker.value

Color picker¶

In [32]:

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

In [33]:

color_picker.value

color_picker.value

Out[33]:

'blue'

Output widget¶

In [34]:

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

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

In [35]:

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

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

In [36]:

from IPython.display import YouTubeVideo

out.clear_output()
with out:
    display(YouTubeVideo('7qRtsTCnnSM'))
out

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

In [37]:

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

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

Add a widget to the map¶

In [38]:

Map = geemap.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

Map = geemap.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

Out[38]:

Make this Notebook Trusted to load map: File -> Trust Notebook

In [39]:

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

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

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
Input In [39], in <cell line: 3>()
      1 output_widget = widgets.Output(layout={'border': '1px solid black'})
      2 output_control = ipyleaflet.WidgetControl(widget=output_widget, position='bottomright')
----> 3 Map.add_control(output_control)

AttributeError: 'Map' object has no attribute 'add_control'

In [40]:

with output_widget:
    print('Nice map!')

with output_widget: print('Nice map!')

In [41]:

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

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)

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)

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
Input In [42], in <cell line: 28>()
     23                 Map.layers = Map.layers[:4]
     25         Map.default_style = {'cursor': 'pointer'}
---> 28 Map.on_interaction(handle_interaction)

AttributeError: 'Map' object has no attribute 'on_interaction'

---

Last update: 2022-03-14