This tutorial shows you how to add interactive widgets to the map.

GitHub: github.com/giswqs/geemap

Notebook: github.com/giswqs/geemap/blob/master/exampl..

Demo:

Video:

Import libraries

import ee
import geemap
import ipyleaflet
import ipywidgets as widgets

Create an interactive map

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

Add Earth Engine data

Add raster data

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

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

Change layer opacity

Map

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

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

Widget list

ipywidgets.readthedocs.io/en/latest/example..

Numeric widgets

IntSlider

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

int_slider.value

FloatSlider

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

float_slider.value

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_text = widgets.IntText(
    value=7,
    description='Any:',
)
int_text

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

Boolean widgets

ToggleButton

toggle_button = widgets.ToggleButton(
    value=False,
    description='Hello 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.value

Checkbox

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

checkbox.value

Selection widgets

Dropdown

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

dropdown.value

RadioButtons

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

radio_buttons.value

String widgets

Text

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

text.value

Textarea

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

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">'
)

Button

button = widgets.Button(
    description='Click me',
    button_style='success', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
#     icon='check' # (FontAwesome names without the `fa-` prefix)
)
button

Date picker

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

date_picker.value

Color picker

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

color_picker.value

Output widget

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

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

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

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

Add a widget to the 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

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

print('Nice map!')

with output_widget:
    print('Nice map!')
    print('Hello')

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