In [1]:

#import geemap
# Map = geemap.Map()
# Map

#import geemap # Map = geemap.Map() # Map

In [2]:

import ipywidgets as widgets

import ipywidgets as widgets

In [3]:

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

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

icon: https://fontawesome.com/v4.7.0/icons/ #we can check from this website which fonts are available

In [4]:

toolbar_button = widgets.ToggleButton(
    value=False,
    tooltip="Toolbar",
    icon="camera",
    #layout=widgets.Layout(width="28px", height="28px", padding=padding), #if we remove this line we get a larger background
)
toolbar_button

toolbar_button = widgets.ToggleButton( value=False, tooltip="Toolbar", icon="camera", #layout=widgets.Layout(width="28px", height="28px", padding=padding), #if we remove this line we get a larger background ) toolbar_button

In [5]:

toolbar_button = widgets.ToggleButton(
    value=False,
    tooltip="Toolbar",
    icon="gear",
    layout=widgets.Layout(width="28px", height="28px", padding=padding), #if we remove this line we get a larger backgro
)
toolbar_button

toolbar_button = widgets.ToggleButton( value=False, tooltip="Toolbar", icon="gear", layout=widgets.Layout(width="28px", height="28px", padding=padding), #if we remove this line we get a larger backgro ) toolbar_button

In [6]:

import ipyleaflet

import ipyleaflet

In [7]:

#adding widget crontol from pcalss 12b
control = ipyleaflet.WidgetControl(widget = toolbar_button, position = 'topright')

#adding widget crontol from pcalss 12b control = ipyleaflet.WidgetControl(widget = toolbar_button, position = 'topright')

In [8]:

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

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

In [9]:

m.add_control(control) #see how the icon is displlayed on the toip map --This is the way how leafmap was constructed

m.add_control(control) #see how the icon is displlayed on the toip map --This is the way how leafmap was constructed

In [10]:

import leafmap

import leafmap

In [11]:

m2 = leafmap.Map()
m2

m2 = leafmap.Map() m2

In [ ]:

In [12]:

# toolbar_button.layout.width = "28px"

# toolbar_button.layout.width = "28px"

In [13]:

toolbar_button.value  #if selected the button added is goint o return true

toolbar_button.value #if selected the button added is goint o return true

Out[13]:

False

In [14]:

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

close_button = widgets.ToggleButton(
    value=False,
    tooltip="Close the tool",
    icon="times",
    button_style="danger", #styles from https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Styling.html
    layout=widgets.Layout(height="28px", width="28px", padding=padding),
)
close_button

#if you click in one type of icon all of them get selected they are connected

close_button = widgets.ToggleButton( value=False, tooltip="Close the tool", icon="times", button_style="danger", #styles from https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Styling.html layout=widgets.Layout(height="28px", width="28px", padding=padding), ) close_button #if you click in one type of icon all of them get selected they are connected

In [16]:

widgets.HBox([close_button, toolbar_button]) #horizontal box makes a list with location

widgets.HBox([close_button, toolbar_button]) #horizontal box makes a list with location

In [17]:

widgets.VBox([close_button, toolbar_button]) #horizontal box makes a list with location

widgets.VBox([close_button, toolbar_button]) #horizontal box makes a list with location

In [18]:

#suing children to reduce a menu to change things dinamically
box = widgets.HBox()
box.children = [close_button, toolbar_button]
box

#suing children to reduce a menu to change things dinamically box = widgets.HBox() box.children = [close_button, toolbar_button] box

In [19]:

box.children =[toolbar_button]
box

box.children =[toolbar_button] box

In [20]:

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

#widgets. hit tab and you will be able to see alll widgets

#widgets. hit tab and you will be able to see alll widgets

In [22]:

checkbox.value  #always each widget has a value

checkbox.value #always each widget has a value

Out[22]:

False

In [23]:

widgets.Checkbox() #this is a class inside the parethesis hit shift+tab to see the documentation

widgets.Checkbox() #this is a class inside the parethesis hit shift+tab to see the documentation

In [24]:

dropdown = widgets.Dropdown(
    options=["Option 1", "Option 2", "Option 3"],
    value=None, #to allow show eevrything unselected if you remove the line the first will be selected
    description="Dropdown:",
    layout=widgets.Layout(width=widget_width, padding=padding),
    style={"description_width": "initial"},#MEANS YOU DONT HAVE SPACE TO TEH LEFT OF THE WIDGET
)
dropdown

dropdown = widgets.Dropdown( options=["Option 1", "Option 2", "Option 3"], value=None, #to allow show eevrything unselected if you remove the line the first will be selected description="Dropdown:", layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"},#MEANS YOU DONT HAVE SPACE TO TEH LEFT OF THE WIDGET ) dropdown

In [25]:

int_slider = widgets.IntSlider(
    min=1,
    max=100,
    description="Int Slider: ",
    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=100, description="Int Slider: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_slider

In [26]:

#we can add and step

int_slider = widgets.IntSlider(
    min=0,
    max=100,
    step= 5,
    description="Int Slider: ",
    readout=True,
    continuous_update=True,
    layout=widgets.Layout(width=widget_width, padding=padding),
    style={"description_width": "initial"},
)
int_slider

#we can add and step int_slider = widgets.IntSlider( min=0, max=100, step= 5, description="Int Slider: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_slider

In [27]:

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

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

In [28]:

color = widgets.ColorPicker(
    concise=False,  #if we put to true the hegx colour is not shown
    description="Color:",
    value="white",
    style={"description_width": "initial"},
    layout=widgets.Layout(width=widget_width, padding=padding),
)
color

#example of bad documentaion

color = widgets.ColorPicker( concise=False, #if we put to true the hegx colour is not shown description="Color:", value="white", style={"description_width": "initial"}, layout=widgets.Layout(width=widget_width, padding=padding), ) color #example of bad documentaion

In [29]:

color.value

color.value

Out[29]:

'white'

In [30]:

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

textarea = widgets.Textarea(
  # value='https://google.com', if you add this by default therewill be atext so in oder to seeyour place holder we need to rmeove the text first
    placeholder="Placeholder", #enter teh value you want 
    layout=widgets.Layout(width=widget_width),
)
textarea

textarea = widgets.Textarea( # value='https://google.com', if you add this by default therewill be atext so in oder to seeyour place holder we need to rmeove the text first placeholder="Placeholder", #enter teh value you want layout=widgets.Layout(width=widget_width), ) textarea

In [32]:

buttons = widgets.ToggleButtons(
    value=None, #To select sth by default example a basemap
    options=["Apply", "Reset", "Close"],
    tooltips=["Apply the algorithm", "Reset", "Close"],
    button_style="primary",
)
buttons.style.button_width = "50px"
buttons

buttons = widgets.ToggleButtons( value=None, #To select sth by default example a basemap options=["Apply", "Reset", "Close"], tooltips=["Apply the algorithm", "Reset", "Close"], button_style="primary", ) buttons.style.button_width = "50px" buttons

In [33]:

buttons.value

buttons.value

Most powerful widget we can display images abutton widgets anything in there¶

In [34]:

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

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

In [35]:

output.clear_output()

output.clear_output()

In [36]:

#if this is run this sends again the output to the widget with the new mewssage
with output:
    #output.clear_output() #without the clear output will create a result for each iteration
    print("Running. Plase wait")
output

#if this is run this sends again the output to the widget with the new mewssage with output: #output.clear_output() #without the clear output will create a result for each iteration print("Running. Plase wait") output

In [37]:

with output:
    output.clear_output()
    print("Running ...")#this line of code will display the buttons
    display(buttons)
output

with output: output.clear_output() print("Running ...")#this line of code will display the buttons display(buttons) output

In [38]:

with output:
    output.clear_output()
    print("Running ...")#this line of code will display the buttons
    display(buttons)
    display(checkbox)
output

with output: output.clear_output() print("Running ...")#this line of code will display the buttons display(buttons) display(checkbox) output

#we can add an step¶

int_slider = widgets.IntSlider( min=0, max=100, step= 5, description="Int Slider: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_slider#we can add and step

int_slider = widgets.IntSlider( min=0, max=100, step= 5, description="Int Slider: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_sliderHow to put everything together

In [39]:

#we can add and step

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

#we can add and step int_slider = widgets.IntSlider( value = 4, #default min=1, max=24, step= 1, description="Zoom: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_slider

In [40]:

toolbar_widget = widgets.VBox()
toolbar_widget.children = [
    widgets.HBox([close_button, toolbar_button]), #nested box to add more columns
    checkbox,
    int_slider,
    float_slider,
    dropdown,
    text,
    color,
    textarea,
    buttons,
    output,
]
toolbar_widget

toolbar_widget = widgets.VBox() toolbar_widget.children = [ widgets.HBox([close_button, toolbar_button]), #nested box to add more columns checkbox, int_slider, float_slider, dropdown, text, color, textarea, buttons, output, ] toolbar_widget

In [41]:

control1 = ipyleaflet.WidgetControl(widget=toolbar_widget, position ='topright')

control1 = ipyleaflet.WidgetControl(widget=toolbar_widget, position ='topright')

In [42]:

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

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

In [43]:

m.add_control(control1)

m.add_control(control1)

In [44]:

m

m

Lets make it interactive - how to link with map¶

In [45]:

#lets analize this behaviour map has anttribute called zooom

m.zoom=3 #This changes alll associated maps

#lets analize this behaviour map has anttribute called zooom m.zoom=3 #This changes alll associated maps

We need to link the attribute with the intslider

In [46]:

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

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

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

In [47]:

m  #now zoom controls are usable

m #now zoom controls are usable

lets add this possiblity atttribute

In [48]:

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

toolbar_widget = widgets.VBox()
toolbar_widget.children = [
    widgets.HBox([close_button, toolbar_button]), #nested box to add more columns
    checkbox,
    int_slider,
    float_slider,
    dropdown,
    text,
    color,
    textarea,
    buttons,
    output,
]
toolbar_widget



m =ipyleaflet.Map(center=[40, -100], zoom=4, scroll_wheel_zoom=True)
m.add_control(control1)
widgets.jslink((m, 'zoom'), (int_slider, 'value'))

int_slider = widgets.IntSlider( value = 4, #default min=1, max=25, step= 1, description="Zoom: ", readout=True, continuous_update=True, layout=widgets.Layout(width=widget_width, padding=padding), style={"description_width": "initial"}, ) int_slider toolbar_widget = widgets.VBox() toolbar_widget.children = [ widgets.HBox([close_button, toolbar_button]), #nested box to add more columns checkbox, int_slider, float_slider, dropdown, text, color, textarea, buttons, output, ] toolbar_widget m =ipyleaflet.Map(center=[40, -100], zoom=4, scroll_wheel_zoom=True) m.add_control(control1) widgets.jslink((m, 'zoom'), (int_slider, 'value'))

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

In [49]:

m

m

In [50]:

m.center

m.center

Out[50]:

[40, -100]

In [51]:

widgets.jslink((m, "center") , (text, 'value'))  #adding the center attribute to the textbox

widgets.jslink((m, "center") , (text, 'value')) #adding the center attribute to the textbox

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

Adding multiple maps¶

In [52]:

out = widgets.Output()

out = widgets.Output()

In [53]:

with out:
    display(m)   
#Adding by running this cell many times we get as many maps synchronized

with out: display(m) #Adding by running this cell many times we get as many maps synchronized

In [54]:

box =widgets.HBox()

box =widgets.HBox()

In [55]:

box.children = [m,m,m]
box

box.children = [m,m,m] box

In [56]:

#def remove_widget()

#def remove_widget()

In [ ]:

---

Last update: 2023-05-11