Uncomment the following line to install geemap if needed.

In [ ]:

# !pip install geemap

# !pip install geemap

How to add interactive widgets to the map¶

Import libraries¶

In [ ]:

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

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

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

Add Earth Engine data¶

Add raster data¶

In [ ]:

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

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

Map

Map

In [ ]:

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

In [ ]:

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

Widget list¶

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

Numeric widgets¶

IntSlider¶

In [ ]:

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

int_slider.value

int_slider.value

FloatSlider¶

In [ ]:

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

float_slider.value

float_slider.value

IntProgress¶

In [ ]:

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

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

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

In [ ]:

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

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

toggle_button.value

toggle_button.value

Checkbox¶

In [ ]:

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

checkbox.value

checkbox.value

Selection widgets¶

Dropdown¶

In [ ]:

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

dropdown.value

dropdown.value

RadioButtons¶

In [ ]:

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

radio_buttons.value

radio_buttons.value

String widgets¶

Text¶

In [ ]:

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

text.value

text.value

Textarea¶

In [ ]:

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

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

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

widgets.HTML( value='' )

Button¶

In [ ]:

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

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

date_picker.value

date_picker.value

Color picker¶

In [ ]:

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

color_picker.value

color_picker.value

Output widget¶

In [ ]:

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

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

In [ ]:

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

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

In [ ]:

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

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

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

In [ ]:

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)

In [ ]:

with output_widget:
    print("Nice map!")

with output_widget: print("Nice map!")

In [ ]:

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

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)