How do i filter a table based on selected mapbox markers?

Dash Python
1

Hi everyone,

i want to filter a table based on the selected marker on my mapbox. I got the map/markers/table but unfortunately i cant manage to get any data from the selected marker i could use for the callback. I tried to make it work for hours, but didnt find anything that works for me, im also new to Python/Dash and might have missed sth :confused:. Maybe there´s someone out there who´s able to help me out with this one? :slight_smile:

Heres my code:

###################

fig = go.Figure(
 px.scatter_mapbox(df_vehicle_data, text="licence_plate", lat="fleet_lat", lon="fleet_lon", 
 color="vehicle_status",
                  custom_data=['licence_plate'], color_continuous_scale=px.colors.cyclical.IceFire,
                  size_max=20, zoom=10))

fig.update_layout(
margin=dict(l=0, r=0, t=0, b=0),
autosize=True,
clickmode='event+select',
legend=dict(
    x=0,
    y=1,
    font=dict(
        family="Courier",
        size=12,
        color="black"
    ),
    bgcolor="LightSteelBlue",
    bordercolor="Black",
    borderwidth=2
),
hovermode='closest',
mapbox=dict(
    accesstoken='',
    bearing=0,
    center=dict(
        lat=38.92,
        lon=-100.07
    ),
    pitch=0,
    zoom=5,
    style='',
),
)

#############

dcc.Graph(figure=fig, id='mapbox-overview'),


            html.Div(dt.DataTable(
                id='vehicle-table-overview',
                data=[{}],
                columns=[{'id': c, 'name': c, "deletable": True, "selectable": True} for c in
                         df_vehicle_data.columns],
                filter_action="native",
                editable=True,
                sort_action="native",
                sort_mode="multi",
                page_action="native",
                page_current=0,
                page_size=40,
                style_as_list_view=True,
                style_header={
                    'backgroundColor': '#f1f1f1',
                    'fontWeight': 'bold',
                    'fontSize': 12,
                    'fontFamily': 'Open Sans'
                },
                style_cell={
                    'padding': '5px',
                    'fontSize': 13,
                    'fontFamily': 'sans-serif'
                },
                style_cell_conditional=[
                    {
                        'if': {'column_id': c},
                        'textAlign': 'left'
                    } for c in ['Date', 'Region']
                ],
            ),

########Callback#########

@app.callback(
Output(component_id='vehicle-table-overview', component_property='data'),
[Input('mapbox-overview', 'clickData')])
def display_clickData(selected_vehicle):
if selected_vehicle is not None:
    filtered_df = df_vehicle_data[df_vehicle_data["licence_plate"].isin(selected_vehicle)]
    data = filtered_df.to_dict("records")
return data