Change tools visibility in EditControl of Dash Leaflet

Hi all,
I’ve a problem with a very simple app for changing the visibility of some tools of Dash Leaflet EditControl.

The callback is able to change the property “position” of the tool, but has no effect on the property ‘draw’, used for enable/disable draw controls.

For sure I made a mistake.
I’d appreciate your kindly help and thanks in advance.

Here is the code:

import dash_leaflet as dl
from dash import Dash, html, Output, Input
from dash.exceptions import PreventUpdate
from dash_extensions.javascript import assign


app = Dash(prevent_initial_callbacks=True)

# ------------------------------------------
# Layout
# ------------------------------------------
app.layout = html.Div([
    
    dl.Map(center=[56, 10], zoom=4, children=[
        dl.TileLayer(), 
        dl.FeatureGroup([
                dl.EditControl(id="id-edit_control",
                            draw={
                                    "circlemarker":False,
                                    "circle": False,                               
                                    "polygon": True,
                                    "polyline": True,
                                    "rectangle": False,
                                    "marker": False,
                                    },
                                ), 
                dl.Marker(position=[56, 10])
            ]),
    ], 
    style={'width': '50%', 'height': '50vh', "display": "inline-block"}, id="map"),
    html.Button("Change tools visibility", id="id-btn-change-tools"),
    
])

# ------------------------------------------
# Callback for changing the tools visibility
# ------------------------------------------
@app.callback(Output("id-edit_control",    "draw"), 
              Output("id-edit_control",    "position"), 
              Input("id-btn-change-tools", "n_clicks"))
def trigger_mode(n_clicks):

    print ('change visibility')
    
    draw={
        "circlemarker":False,
        "circle": False,                               
        "polygon": False,
        "polyline": False,
        "rectangle": False,
        "marker": False,
        }
    
    position = 'topleft'

    return draw, position                        

# ------------------------------------------
# Main program
# ------------------------------------------
if __name__ == '__main__':
    app.run(debug=False)

for a permanent solution you could use style. Create a style.css in your assets folder and use the inspector to hunt down the tools you don’t want in the edit control. For example if you want to remove the class="leaflet-draw-draw-circle" then in the style.css you would:

.leaflet-draw-draw-circle {
    display: none;
}

make sure to link the assets folder in the app with app = Dash(__name__, assets_folder='assets')

Alternatively if you are trying to setup a button to hide/display the toolbar you’d want to hit the FeatureGroup children. The callback when triggered should return a blank list to hide it or

dl.EditControl(id="id-edit_control",
                        draw={
                                "circlemarker":False,
                                "circle": False,                               
                                "polygon": True,
                                "polyline": True,
                                "rectangle": False,
                                "marker": False,
                                },
                            )

to show the edit controls.

so something like:

import dash_leaflet as dl
from dash import Dash, html, Output, Input, no_update
from dash.exceptions import PreventUpdate

# Initialize Dash app with assets folder configuration
app = Dash(
    __name__,
    assets_folder='assets',
    prevent_initial_callbacks=True
)

# Define default drawing tools configuration
DEFAULT_DRAW_TOOLS = {
    "circlemarker": False,
    "circle": False,
    "polygon": True,
    "polyline": True,
    "rectangle": False,
    "marker": False,
}

# Layout configuration
MAP_STYLE = {
    'width': '50%',
    'height': '50vh',
    'display': 'inline-block'
}

# Define the layout
app.layout = html.Div([

    dl.Map(
        center=[56, 10],
        zoom=4,
        children=[
            dl.TileLayer(),
            dl.EasyButton(icon="fa-icons", title="edit control toggle", id="id-btn-change-tools", n_clicks=1),
            dl.FeatureGroup(
                id="edit_control_wrapper",
                children=[

                ]
            ),
        ],
        style=MAP_STYLE,
        id="map"
    )
])


@app.callback(
    [Output("edit_control_wrapper", "children"),
     ],
    Input("id-btn-change-tools", "n_clicks")
)
def toggle_drawing_tools(n_clicks):
    """
    Toggle the visibility of drawing tools on button click.

    Args:
        n_clicks (int): Number of button clicks

    Returns:
        EditControl Display
    """
    if not n_clicks:
        raise PreventUpdate

    if n_clicks % 2 == 0:
        # Show drawing tools
        edit_control = [
            dl.EditControl(
                id="id-edit_control",
                draw=DEFAULT_DRAW_TOOLS,
                position='topleft'
            )
        ]
        return edit_control
    else:
        # Hide drawing tools
        return [dl.Marker(position=[56, 10])]




if __name__ == '__main__':
    app.run_server(debug=True, port=7787)