How to build a map with lines connecting points and control tooltips over lines

📊 Plotly Python
1

I have a fairly simple goal:

I want to plot a bunch of points on a map of the United States.

When you hover over the point, I want to show some info about it (can do that).

Ideally, if you click on the point, I would like to show more info (is there an example of how to do that?)

For some of these points, I want to connect them with a line (can do that).

But, when I draw the line, it takes over the tool tips, so that all I see are the line data, covering the other tooltip data.

What I would prefer to do is only see data for the line if you hover over the line itself - somewhere between the two ends. And I would like that tooltip to be near the mouse, not at either of the ends.

Here’s the approach I’m trying to so far.

Please let me know if there is a better way (I tried line_mapbox with line_group property, but it performs VERY poorly).

The chart with the points:


fig1 = px.scatter_mapbox(
        df, 
        lat = 'latitude', 
        lon = 'longitude', 
        color = 'type',
        hover_name = 'stuff here', 
        hover_data = ['anchorBus'],
        mapbox_style = 'open-street-map',
        height = 900,
        color_continuous_scale=px.colors.sequential.Turbo
        )

Then I iterate over a dataframe and draw the lines:

    for index, row in df.iterrows():
        dfFrom = (filter for from)
        dfTo = (filter for to)
        # get the latitudes and longitudes:
        lat_from = dfFrom ['latitude'].values[0]
        lon_from = dfFrom ['longitude'].values[0]
        lat_to = dfTo ['latitude'].values[0]
        lon_to = dfTo ['longitude'].values[0]
        fig1.add_trace(
            go.Scattermapbox(
                mode='lines',
                lon=[lon_from, lon_to],
                lat=[lat_from, lat_to],
                line_color='teal',
                name=f'''{row['nameval']}''',
                textposition='middle right',
                text=f'''ID={row['ID']}''',
                showlegend=False,
                line=dict(width=4, color='cyan'),
                hoverinfo='text',
                hoverlabel=dict(
                    bgcolor='white',
                    font_size=14,
                    font_family='Rockwell'
                )
                )
            )
2

My advice would be to use leaflet, you’ll get further with leaflet than scattermapbox imo.

3

Thanks @PipInstallPython -
Playing with it, but not working as expected.
Any chance you see the issue here?

It all “works”, but I don’t see any markers, and I’m expecting 800.

I’ve tried format=“geojson” and also format=“geobuf”

    dfGeo = gpd.GeoDataFrame(df, geometry=gpd.points_from_xy(df.longitude, df.latitude))

    dl.Map(
        [
            dl.TileLayer(), 
            dl.GeoJSON(
                data=dfGeo.to_json(), 
                id="geojson",
                cluster=True,
                zoomToBounds=True,  # when true, zooms to bounds when data changes
                zoomToBoundsOnClick=True,  # when true, zooms to bounds of feature (e.g. cluster) on click
                superClusterOptions=dict(radius=150),   # adjust cluster size
            ),
        ],
        zoom=6, 
        center=[df.loc[:, 'latitude'].mean(), df.loc[:, 'longitude'].mean()],
        style={'width': '100%', 'height': '500px'}
        # style={'height': '50vh'}
    ),
4

I figured it out: have to use

data=dfGeo.__geo_interface__,

1 Like