Ipywidgets box

In [1]:

# import geemap
# Map = geemap.Map()
# Map
# !pip install ipywidgets==8.0.4

# import geemap # Map = geemap.Map() # Map # !pip install ipywidgets==8.0.4

In [2]:

import ipywidgets as widgets
print(widgets.__version__)

import ipywidgets as widgets print(widgets.__version__)

7.7.5

In [3]:

widget_width = "250px"
padding = "0px 0px 0px 4px"  # upper, right, bottom, left

widget_width = "250px" padding = "0px 0px 0px 4px" # upper, right, bottom, left

icon: https://fontawesome.com/v4.7.0/icons/

In [4]:

toolbar_button = widgets.ToggleButton(
    value=False,
    tooltip="Toolbar",
    icon="gear",
    layout=widgets.Layout(width="28px", height="28px", padding=padding),
)
display(toolbar_button)

toolbar_button = widgets.ToggleButton( value=False, tooltip="Toolbar", icon="gear", layout=widgets.Layout(width="28px", height="28px", padding=padding), ) display(toolbar_button)

In [5]:

# toolbar_button.layout.width = "28px"

# toolbar_button.layout.width = "28px"

In [6]:

toolbar_button.value

toolbar_button.value

Out[6]:

False

In [7]:

close_button = widgets.ToggleButton(
    value=False,
    tooltip="Close the tool",
    icon="times",
    button_style="primary",
    layout=widgets.Layout(height="28px", width="28px", padding=padding),
)
close_button

close_button = widgets.ToggleButton( value=False, tooltip="Close the tool", icon="times", button_style="primary", layout=widgets.Layout(height="28px", width="28px", padding=padding), ) close_button

In [8]:

widgets.HBox([close_button, toolbar_button])

widgets.HBox([close_button, toolbar_button])

In [9]:

box = widgets.HBox()
box.children = [close_button, toolbar_button]
box

box = widgets.HBox() box.children = [close_button, toolbar_button] box

In [10]:

checkbox = widgets.Checkbox(
    description="Checkbox",
    indent=False,
    layout=widgets.Layout(padding=padding, width=widget_width),
)
checkbox

checkbox = widgets.Checkbox( description="Checkbox", indent=False, layout=widgets.Layout(padding=padding, width=widget_width), ) checkbox

In [11]:

dropdown = widgets.Dropdown(
    options=["Option 1", "Option 2", "Option 3"],
    value=None,
    description="Dropdown:",
    layout=widgets.Layout(width=widget_width, padding=padding),
    style={"description_width": "initial"},
)
dropdown

dropdown = widgets.Dropdown( options=["Option 1", "Option 2", "Option 3"], value=None, description="Dropdown:", layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) dropdown

In [12]:

int_slider = widgets.IntSlider(
    min=1,
    max=14,
    description="Zoom: ",
    readout=True,
    continuous_update=True,
    layout=widgets.Layout(width=widget_width, padding=padding),
    style={"description_width": "initial"},
)
int_slider

int_slider = widgets.IntSlider( min=1, max=14, description="Zoom: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_slider

In [13]:

float_slider = widgets.FloatSlider(
    min=1,
    max=100,
    description="Float Slider: ",
    readout=True,
    continuous_update=True,
    layout=widgets.Layout(width=widget_width, padding=padding),
    style={"description_width": "initial"},
)

float_slider = widgets.FloatSlider( min=1, max=100, description="Float Slider: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, )

In [14]:

color = widgets.ColorPicker(
    concise=False,
    description="Color:",
    value="white",
    style={"description_width": "initial"},
    layout=widgets.Layout(width=widget_width, padding=padding),
)
color

color = widgets.ColorPicker( concise=False, description="Color:", value="white", style={"description_width": "initial"}, layout=widgets.Layout(width=widget_width, padding=padding), ) color

In [15]:

text = widgets.Text(
    value="",
    description="Textbox:",
    placeholder="Enter sth.",
    style={"description_width": "initial"},
    layout=widgets.Layout(width=widget_width, padding=padding),
)
text

text = widgets.Text( value="", description="Textbox:", placeholder="Enter sth.", style={"description_width": "initial"}, layout=widgets.Layout(width=widget_width, padding=padding), ) text

In [16]:

textarea = widgets.Textarea(
    placeholder="Placeholder",
    layout=widgets.Layout(width=widget_width),
)
textarea

textarea = widgets.Textarea( placeholder="Placeholder", layout=widgets.Layout(width=widget_width), ) textarea

In [17]:

buttons = widgets.ToggleButtons(
    value=None,
    options=["Apply", "Reset", "Close"],
    tooltips=["Apply", "Reset", "Close"],
    button_style="primary",
)
buttons.style.button_width = "80px"
buttons

buttons = widgets.ToggleButtons( value=None, options=["Apply", "Reset", "Close"], tooltips=["Apply", "Reset", "Close"], button_style="primary", ) buttons.style.button_width = "80px" buttons

In [18]:

output = widgets.Output(layout=widgets.Layout(width=widget_width, padding=padding))
with output:
    output.clear_output()
    print("Running ...")
    display(buttons)
    print(buttons.value)
output

output = widgets.Output(layout=widgets.Layout(width=widget_width, padding=padding)) with output: output.clear_output() print("Running ...") display(buttons) print(buttons.value) output

In [19]:

toolbar_widget = widgets.VBox()
toolbar_widget.children = [
    widgets.HBox([close_button, toolbar_button]),
    checkbox,
    int_slider,
    float_slider,
    dropdown,
    text,
    color,
    textarea,
    buttons,
]
toolbar_widget

toolbar_widget = widgets.VBox() toolbar_widget.children = [ widgets.HBox([close_button, toolbar_button]), checkbox, int_slider, float_slider, dropdown, text, color, textarea, buttons, ] toolbar_widget

In [20]:

import ipyleaflet
control = ipyleaflet.WidgetControl(widget=toolbar_widget,position='topright')
m = ipyleaflet.Map(center=[40,-100],zoom=4,scroll_wheel_zoom=True)
m

import ipyleaflet control = ipyleaflet.WidgetControl(widget=toolbar_widget,position='topright') m = ipyleaflet.Map(center=[40,-100],zoom=4,scroll_wheel_zoom=True) m

In [21]:

m.add_control(control)

m.add_control(control)

In [22]:

widgets.jslink((m,'zoom'), (int_slider,'value'))
widgets.jslink((m,'center'), (text,'value'))

widgets.jslink((m,'zoom'), (int_slider,'value')) widgets.jslink((m,'center'), (text,'value'))

Link(source=(Map(center=[40, -100], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title'…

In [23]:

m.zoom

m.zoom

Out[23]:

4.0

---

Last update: 2023-05-25
Created: 2023-05-25