Show dbc.Card when clicking on point in map

Hi everyone,
I have the following code

df_map = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vSPMQhe0RziV-GvpZis8_8cN2TOPE6s2pSQ_1qpBiMORgVGeOI_UccexX3tOAZf_hipnekydIsQvWN3/pub?gid=1280528379&single=true&output=csv')

map_fig = px.scatter_mapbox(df_map, lat="Latitude",lon="Longitude")

map_fig.update_layout(mapbox_style="open-street-map")

This shows a map with several points in it.
The objective would be that when the user hovers the map, a card shows up with the relevant information for that point that is in the dataframe.
Is this possible? I can’t find any information that leads the way in order to accomplish this

Any help would be really appreciated.

Disclaimer: Any solution provided will be used in a non-for-profit NGO project. No commercial use will be made

hi Jorge @jgomes_eu

maybe something like this:

import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, dcc, html, callback, Output, Input
import dash_bootstrap_components as dbc

df_map = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vSPMQhe0RziV-GvpZis8_8cN2TOPE6s2pSQ_1qpBiMORgVGeOI_UccexX3tOAZf_hipnekydIsQvWN3/pub?gid=1280528379&single=true&output=csv')
map_fig = px.scatter_mapbox(df_map, lat="Latitude",lon="Longitude")
map_fig.update_layout(mapbox_style="open-street-map")

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
    dcc.Graph(id='my-graph', figure=map_fig),
    html.Div(id='content')
])


@callback(
    Output('content', 'children'),
    Input('my-graph', 'hoverData')
)
def create_card(data):
    if not None:
        return dbc.Card(
            dbc.CardBody(f"This is lat ({data['points'][0]['lat']}) and lon ({data['points'][0]['lon']}) hovered over")
        )

    else:
        return "No hover"

if __name__ == '__main__':
    app.run_server()

1 Like

Hi @adamschroeder yes, it shows the lat and lon for the point. However I need to populate the card with more information, like “Kraj / Country” and others from the dataframe.

Is this possible?

My example accesses the hoverdata. Can you add data to the hover and then pull from there?

Or maybe you can pull directly from the dataframe: the hoverData will trigger the callback, then, we take the info from hoverdata to understand which rows in the df it corresponds to, then, we take that row data and display it in the dbc.Card()

Hi @adamschroeder, as usual you open the door to new knowledge.
So for anyone looking how to do this, here’s a working example

def create_card(data):
    if not None:
        actual_lat = data['points'][0]['lat'] # Get latitude from hoverdata
        actual_lon = data['points'][0]['lon'] # Get longitude from hoverdata
        # Create Dataframe that has a lat and longitude columns in the csv file
        df_map = pd.read_csv('your_csv_file_goes_here"')
        # Create a Dataframe with just the entry of the current mouse position
        current_point = df_map.loc[(df_map['Latitude'] == actual_lat) & (df_map['Longitude'] == actual_lon)]
       # Extract the variables from the current point that you want to put on the card 
        name = current_point['Meno / Name']
        address = current_point['Adresa / Address']
        county = current_point['Kraj / Country']
       # Return your design with the variables
        return dbc.Row(
            [
            dbc.Col(
                [
                    html.H4(name, className="card-title"),
                    html.P(address,className="card-text"),
                    html.P(county,className="card-text"),
                ],
            xs=6,
            ),
            ],
        )

    else:
        return "No hover"
# Run App 
if __name__ == "__main__":
    app.run_server(host='0.0.0.0', debug=True)   # change to false when deploying to a server 

1 Like

@jgomes_eu I love your commenting inside the code. It makes understanding the code a lot easier, especially for beginners. Thanks for sharing.

1 Like

@adamschroeder :slight_smile: I don’t know if it is professional or not, or within the rules, but leaving comments in the code is my thing. It helps me learn what is doing what, and it makes it easier - I think - for others to adapt it. And that is the whole point of it, right?

2 Likes