How to have a set of buttons update a px.scatter_mapbox map?

Dash Python
1

Hi all,
I have a map that feeds on a dataframe. The dataframe will have several categories (Legal Support, Medical Support, Day Care for Adults, Day Care for Children, etc)

For usability reasons we would rather have buttons instead of drop down menus (dropdown menus require translation to four different languages, buttons with icons (like the ones designed by @AnnMarieW here) are more universal.

Sorry for the long introduction, but I think it’s important to give some context.

I’ve tried the following

app.callback(
    Output(component_id="my_map", component_property="figure"),
    Input(component_id="children-button", component_property="n_clicks")
)

def upgrade_map(children_button):
    df = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vQsJNecpTfW1vwk-OSS6IjoDL5k-_qFrxEZn4ottbiGGqAN86oaX_y6nE30EBPuhobcErja--wogCVt/pub?gid=1498261538&single=true&output=csv')
    df_children = df[df['column_02']=="DETI"]
    print(df_children.info())
    fig_map = px.scatter_mapbox(df_children,lat='Latitude',lon='Longitude',
                            mapbox_style='carto-positron',
                            width=1000,height=1000,
                            hover_name='address',
                            custom_data=['address', 'opening_hours']
                            )

    fig_map.update_layout(
    hoverlabel=dict(
        bgcolor="white",
        font_size=16,
        font_family="sans-serif"
    )
)

    fig_map.update_traces(hovertemplate="Address: %{customdata[0]} <br>Opening Hours: %{customdata[1]}")
     return fig_map

However what this does is just go to the callback, without any input on the button, and present the filtered dataframe, which wasn’t the behaviour that I was expecting at all.

Any ideas how to have a click in the buttons change the data that is presented on the map? Is this even possible?

Code for Button Inside Card

card2 = dbc.CardGroup(
    [
        dbc.Card(
            dbc.CardBody(
                [
                    html.Button(html.Span([html.I(className="fas fa-baby-carriage ml-2")]),
                                           id='children-button',n_clicks=0)
                ]
            )
        ),
        
    ],className="mt-4 shadow",
)

App Code

app.layout = html.Div(
            [
            dbc.Row(
                [
                dbc.Col(
                        dbc.Card(id='main-card',children=card1),
                xl=2,
                ),
                dbc.Col(
                        dbc.Card(id='second-card',children=card2),
                xl=1,
                ),      
                ],
            ),
            dcc.Graph(id="my_map",figure=fig_map)
            ],
)

Disclaimer: This is for a non-profit NGO project. No commercial use will be made of any solution presented.