In [1]:

import geosdemo
import ipywidgets as widgets
from ipyleaflet import WidgetControl

import geosdemo import ipywidgets as widgets from ipyleaflet import WidgetControl

Creating a toolbar button¶

In [2]:

widget_width = "250px" #setting the widget width 
padding = "0px 0px 0px 5px"  # upper, right, bottom, left

#creating the tolbar button
toolbar_button = widgets.ToggleButton(
    value=False,
    tooltip="Toolbar", #user hover an displays text
    icon="wrench", #https://fontawesome.com/v4/icons/
    layout=widgets.Layout(width="28px", height="28px", padding=padding),
)

#creating the 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),
)

widget_width = "250px" #setting the widget width padding = "0px 0px 0px 5px" # upper, right, bottom, left #creating the tolbar button toolbar_button = widgets.ToggleButton( value=False, tooltip="Toolbar", #user hover an displays text icon="wrench", #https://fontawesome.com/v4/icons/ layout=widgets.Layout(width="28px", height="28px", padding=padding), ) #creating the 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), )

In [3]:

toolbar = widgets.HBox([toolbar_button]) #only will be displayed one at the beggining because only one is active
toolbar #do not copy this one in the code geosdemo beacuse it will display intermediate stuff

#we have so far 3 widgets wrecht, close and box

toolbar = widgets.HBox([toolbar_button]) #only will be displayed one at the beggining because only one is active toolbar #do not copy this one in the code geosdemo beacuse it will display intermediate stuff #we have so far 3 widgets wrecht, close and box

We want that when we click this button sth appears and when we cleck agian it collapses

Adding toolbar event¶

In [4]:

#the idea of these 2 lines of code is to create an event in which when we click on the wrech sth happens 
#meaning the clossing button appears and then we can close
def toolbar_click(change):
    if change["new"]:
        toolbar.children = [toolbar_button, close_button]
    else:
        toolbar.children = [toolbar_button]
        
toolbar_button.observe(toolbar_click, "value") #when is clicked we are going to observe the close button
                                            #value is used in most of the time and means when we click is true and nclick is false
toolbar

#the idea of these 2 lines of code is to create an event in which when we click on the wrech sth happens #meaning the clossing button appears and then we can close def toolbar_click(change): if change["new"]: toolbar.children = [toolbar_button, close_button] else: toolbar.children = [toolbar_button] toolbar_button.observe(toolbar_click, "value") #when is clicked we are going to observe the close button #value is used in most of the time and means when we click is true and nclick is false toolbar

In [5]:

#for every widget we can asssign a function for every button

def close_click(change):
    if change["new"]:
        toolbar_button.close()
        close_button.close()
        toolbar.close()
        
close_button.observe(close_click, "value")
toolbar

#once this function is run and the widget run all the items are flush out from memory and we need to run again

#for every widget we can asssign a function for every button def close_click(change): if change["new"]: toolbar_button.close() close_button.close() toolbar.close() close_button.observe(close_click, "value") toolbar #once this function is run and the widget run all the items are flush out from memory and we need to run again

Adding toolbar grid¶

In [6]:

rows = 2
cols = 2
grid = widgets.GridspecLayout(rows, cols, grid_gap="0px", layout=widgets.Layout(width="62px"))

rows = 2 cols = 2 grid = widgets.GridspecLayout(rows, cols, grid_gap="0px", layout=widgets.Layout(width="62px"))

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

In [7]:

icons = ["folder-open", "map", "info", "question"] #names taken from the link above

for i in range(rows):
    for j in range(cols):
        grid[i, j] = widgets.Button(description="", button_style="primary", icon=icons[i*rows+j], 
                                    layout=widgets.Layout(width="28px", padding="0px"))
grid

icons = ["folder-open", "map", "info", "question"] #names taken from the link above for i in range(rows): for j in range(cols): grid[i, j] = widgets.Button(description="", button_style="primary", icon=icons[i*rows+j], layout=widgets.Layout(width="28px", padding="0px")) grid

Explantion¶

In [8]:

'''
i*rows+j , list(range(2)) -->[0,1]
[0,0]-->=0-->L[0]
[0,1]-->=1-->L[1]
[1,0]-->=2-->L[2]
[1,1]-->=3-->L[3] '''

''' i*rows+j , list(range(2)) -->[0,1] [0,0]-->=0-->L[0] [0,1]-->=1-->L[1] [1,0]-->=2-->L[2] [1,1]-->=3-->L[3] '''

Out[8]:

'\ni*rows+j , list(range(2)) -->[0,1]\n[0,0]-->=0-->L[0]\n[0,1]-->=1-->L[1]\n[1,0]-->=2-->L[2]\n[1,1]-->=3-->L[3] '

In [9]:

toolbar = widgets.VBox([toolbar_button])  
toolbar
##means that in the tool bar we can have a vertical but also in each row a composite 
#in this case as will be displayed in the next block we are going to have a horizontal row and a grid row

toolbar = widgets.VBox([toolbar_button]) toolbar ##means that in the tool bar we can have a vertical but also in each row a composite #in this case as will be displayed in the next block we are going to have a horizontal row and a grid row

In [10]:

def toolbar_click(change):
    if change["new"]: #means once is clicked
        toolbar.children = [widgets.HBox([close_button, toolbar_button]), grid]
    else:
        toolbar.children = [toolbar_button]
        
toolbar_button.observe(toolbar_click, "value")
toolbar

def toolbar_click(change): if change["new"]: #means once is clicked toolbar.children = [widgets.HBox([close_button, toolbar_button]), grid] else: toolbar.children = [toolbar_button] toolbar_button.observe(toolbar_click, "value") toolbar

Adding toolbar to ipyleaflet¶

In [11]:

toolbar_ctrl = WidgetControl(widget=toolbar, position="topright")

toolbar_ctrl = WidgetControl(widget=toolbar, position="topright")

In [12]:

m = geosdemo.Map()
m.add_control(toolbar_ctrl)
m

m = geosdemo.Map() m.add_control(toolbar_ctrl) m

this is what the user is providing:{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True}
{'scroll_wheel_zoom': True, 'layers_control': True}
{'scroll_wheel_zoom': True, 'layers_control': True, 'fullscreen_control': True}

Now we want this respond to our clicks and do sth

In [13]:

#Very powerful can display almost anything, it will do anything until we use the fucntion asociating with an action
output = widgets.Output()
output_ctrl = WidgetControl(widget=output, position="bottomright")
m.add_control(output_ctrl)
m

#Very powerful can display almost anything, it will do anything until we use the fucntion asociating with an action output = widgets.Output() output_ctrl = WidgetControl(widget=output, position="bottomright") m.add_control(output_ctrl) m

In [14]:

#tells what to do when you do a click 
def tool_click(b):    
    with output:
        output.clear_output()
        print(f"You clicked the {b.icon} button")

#tells what to do when you do a click def tool_click(b): with output: output.clear_output() print(f"You clicked the {b.icon} button")

In [15]:

#line added to show how output works
with output:
    output.clear_output()
    print("hello world")

#line added to show how output works with output: output.clear_output() print("hello world")

In [16]:

#Associates previous actions to every icon
for i in range(rows):
    for j in range(cols):
        tool = grid[i, j]
        tool.on_click(tool_click)

#Associates previous actions to every icon for i in range(rows): for j in range(cols): tool = grid[i, j] tool.on_click(tool_click)

How to add a dropdown list in an icon¶

In [17]:

output = widgets.Output()
output_ctrl = WidgetControl(widget=output, position="bottomright")
m.add_control(output_ctrl)

output = widgets.Output() output_ctrl = WidgetControl(widget=output, position="bottomright") m.add_control(output_ctrl)

In [18]:

with output:
    output.clear_output()
    print("hello world")

with output: output.clear_output() print("hello world")

In [19]:

#Creating the widget
basemap = widgets.Dropdown(
    options =["OpenStreetMap", "SATELLITE", "ROADMAP"],
    value = None,
    description = "Basemap",
    style = {"description_width": "initial"},
    layout = widgets.Layout(width="250px")
)
basemap

#Creating the widget basemap = widgets.Dropdown( options =["OpenStreetMap", "SATELLITE", "ROADMAP"], value = None, description = "Basemap", style = {"description_width": "initial"}, layout = widgets.Layout(width="250px") ) basemap

In [20]:

basemap.value  #Displaying the value

basemap.value #Displaying the value

In [21]:

#creating the control

#creating the control

In [22]:

basemap_ctrl = WidgetControl(widget=basemap, position='topright')

basemap_ctrl = WidgetControl(widget=basemap, position='topright')

In [23]:

#the next function to theis only adds the control to display the dropdown list but does not change the base map
#this function changes the base map

def change_basemap(change):
    if change['new']:
        with output:
            print(basemap.value)
        m.add_basemap(basemap.value)              #function of geosdemo

#the next function to theis only adds the control to display the dropdown list but does not change the base map #this function changes the base map def change_basemap(change): if change['new']: with output: print(basemap.value) m.add_basemap(basemap.value) #function of geosdemo

In [24]:

#and now associating this to the widget
basemap.observe(change_basemap, 'value')

#and now associating this to the widget basemap.observe(change_basemap, 'value')

In [25]:

#now need to close the widget of basemaps otherwise the widget will be there always

#now need to close the widget of basemaps otherwise the widget will be there always

In [26]:

def tool_click(b):
    with output:
        output.clear_output()
        print(f"You clicked the {b.icon} button")
        
        if b.icon == "map": #if this happen hwt do you want to do--> add the control
            if basemap_ctrl not in m.controls: # to avoid crashes in case there is another control there
                m.add(basemap_ctrl)                   
    #means if no nothing happens if I keep clicking on the mao

def tool_click(b): with output: output.clear_output() print(f"You clicked the {b.icon} button") if b.icon == "map": #if this happen hwt do you want to do--> add the control if basemap_ctrl not in m.controls: # to avoid crashes in case there is another control there m.add(basemap_ctrl) #means if no nothing happens if I keep clicking on the mao

In [27]:

for i in range(rows):
    for j in range(cols):
        tool =grid[i,j]
        tool.on_click(tool_click)

for i in range(rows): for j in range(cols): tool =grid[i,j] tool.on_click(tool_click)

In [28]:

m  #select roadmap because that one was used in the geosdemo

m #select roadmap because that one was used in the geosdemo

In [ ]:

---

Last update: 2023-05-11