Toolbar

In [1]:

import mapvu
import ipywidgets as widgets
from ipyleaflet import WidgetControl

import mapvu import ipywidgets as widgets from ipyleaflet import WidgetControl

Creating a toolbar button¶

In [8]:

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

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

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" padding = "0px 0px 0px 5px" # upper, right, bottom, left toolbar_button = widgets.ToggleButton( value=False, tooltip="Toolbar", icon="wrench", layout=widgets.Layout(width="28px", height="28px", padding=padding), ) 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 [9]:

toolbar = widgets.HBox([toolbar_button])
toolbar

toolbar = widgets.HBox([toolbar_button]) toolbar

Out[9]:

HBox(children=(ToggleButton(value=False, icon='wrench', layout=Layout(height='28px', padding='0px 0px 0px 5px'…

Adding toolbar event¶

In [10]:

def toolbar_click(change):
    if change["new"]:
        toolbar.children = [toolbar_button, close_button]
    else:
        toolbar.children = [toolbar_button]
        
toolbar_button.observe(toolbar_click, "value")

def toolbar_click(change): if change["new"]: toolbar.children = [toolbar_button, close_button] else: toolbar.children = [toolbar_button] toolbar_button.observe(toolbar_click, "value")

In [11]:

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

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

Out[11]:

HBox(children=(ToggleButton(value=False, icon='wrench', layout=Layout(height='28px', padding='0px 0px 0px 5px'…

Adding toolbar grid¶

In [12]:

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

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

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

In [ ]:

icons = ["folder-open", "map", "info", "question"]

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"] 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

Out[ ]:

GridspecLayout(children=(Button(button_style='primary', icon='folder-open', layout=Layout(grid_area='widget001…

In [14]:

toolbar = widgets.VBox([toolbar_button])

toolbar = widgets.VBox([toolbar_button])

In [15]:

def toolbar_click(change):
    if change["new"]:
        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"]: toolbar.children = [widgets.HBox([close_button, toolbar_button]), grid] else: toolbar.children = [toolbar_button] toolbar_button.observe(toolbar_click, "value") toolbar

Out[15]:

VBox(children=(ToggleButton(value=False, icon='wrench', layout=Layout(height='28px', padding='0px 0px 0px 5px'…

Adding toolbar to ipyleaflet¶

In [37]:

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

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

In [38]:

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

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

Out[38]:

Map(center=[20, 0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…

In [39]:

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

with output:
    output.clear_output()
    print("Hello World")

with output: output.clear_output() print("Hello World")

In [41]:

basemap = widgets.Dropdown(
    option =["OpenStreetMap","HYBRID","ROADMAP"],
    value=None,
    description="Basemap:",
    style={"description_width": "iniial"},
    layout=widgets.Layout(width="250px")
)
basemap

basemap = widgets.Dropdown( option =["OpenStreetMap","HYBRID","ROADMAP"], value=None, description="Basemap:", style={"description_width": "iniial"}, layout=widgets.Layout(width="250px") ) basemap

Out[41]:

Dropdown(description='Basemap:', layout=Layout(width='250px'), options=(), style=DescriptionStyle(description_…

In [42]:

basemap.value

basemap.value

In [43]:

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

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

In [ ]:

def change_basemap(change):
    if change["new"]:
        m.add_basemap(basemap.value)
     

def change_basemap(change): if change["new"]: m.add_basemap(basemap.value)

In [44]:

basemap.observe(change_basemap,'value')

basemap.observe(change_basemap,'value')

In [45]:

def tool_click(b):    
    with output:
        output.clear_output()
        print(f"You clicked the {b.icon} button")

        if b.icon == 'map':
            if basemap_crl not in m.controls:

                m.add(basemap_ctrl)

def tool_click(b): with output: output.clear_output() print(f"You clicked the {b.icon} button") if b.icon == 'map': if basemap_crl not in m.controls: m.add(basemap_ctrl)

In [46]:

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)