How can I create overlay-layer like in the example?

Dash Python
,
1

Hello, Guys!
Can you help me figure out how can I realize the appearence of half-transparent layer over the other one like in this example?
I know that it should be Callback after the clickData, but something like changing display from
html.Div(id="overlay-layer", style={"display": "none"}) to

@app.callback(
    Output("overlay-layer", "style"),
    Input("show-layer-button", "n_clicks"),
    State("overlay-layer", "style")
)
def show_overlay(n_clicks, style):
    if n_clicks > 0:
        style["display"] = "block"
    return style

@app.callback(
    Output("overlay-layer", "style"),
    Input("close-layer-button", "n_clicks"),
    State("overlay-layer", "style")
)
def hide_overlay(n_clicks, style):
    if n_clicks > 0:
        style["display"] = "none"
    return style

Here I tried to realize a simple button instead of clickData, but it didn’t work for me :frowning:

2

Code you posted is pretty spotty, I would use leaflet and the dl.FeatureGroup like this simple example I setup for you:

from dash import Dash, html, Input, Output, State
import dash_leaflet as dl

app = Dash(external_stylesheets=['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'])
app.layout = html.Div(
    [
        dl.Map(
            id='map',
            children=[
                dl.TileLayer(),
                dl.FeatureGroup(id='overlay_layer'),
                dl.EasyButton(
                    id='show-layer-button',
                    position='topleft',
                    title='Click me!',
                    icon='fa fa-eye'
                )
            ],
            center=[49, 10],
            zoom=4,
            style={'height': '50vh'}
        ),
    ]
)


@app.callback(
    Output('overlay_layer', 'children'),
    [Input('show-layer-button', 'n_clicks')],
    prevent_initial_call=True
)
def show_hide_layer(n_clicks):
    if n_clicks is None or n_clicks % 2 == 0:
        return None
    else:
        return dl.Marker(position=[50, 10], children=dl.Tooltip('Hello, world!'))


if __name__ == '__main__':
    app.run(debug=True, port=8182)
3

Wow, thank you! Very nice library!
But am I right that this library works only with maps?
I want to realize overlay-layout over tables: when I choose cell, then hidden layout will apear over the table with additional information and plotly graphs.

4

Ah, didn’t understand the original question. For your purpose I’d offer this useful page developed by @AnnMarieW with examples and templates that should help point you in the right direction: https://dashaggridexamples.pythonanywhere.com/

2 Likes