Density Mapbox Plot (Heatmap) in Dash

Dash Python
1

Hi,

I came across a plotly.js example for a mapbox heatmap (densitymapbox - https://github.com/plotly/plotly.js/pull/3993)

Is there a way I can achieve the same on my dash app in python? It’s currently a dynamic scatter mapbox plot which I’m looking to convert to a dynamic heatmap.

Thanks!

2

There will be! This isn’t yet published in dash-core-components yet, but we’ll keep this thread updated when it is published. Next week or two.

3

The densitymapbox and scattermapbox have been added in the 4.1.0 version, released on the August 6th. Both work perfectly in jupyter lab but the densitymapbox does not in Dash. When returning the figure to a graph component, it displays a blank figure. Scattermapbox displays correctly however. Am I missing something ?

4

you’ll need to upgrade dash.

5

That was it indeed…! The Dash version installed on my machine was really outdated. Many thanks !

1 Like
6

Does anyone have an example using the density mapbox plot in a calback?

7

Here’s my example. I can’t recall how I landed on the radius calculation. I would not consider it the best approach, as I’m sure there’s a more elegant way to calculate it.

@app.callback(Output('reporting-trip-heatmap', 'figure'),
              [Input(component_id='reporting-vehicles-pool', component_property='value'),
               Input(component_id='reporting-date-picker-range', component_property='start_date'),
               Input(component_id='reporting-date-picker-range', component_property='end_date')])
def reporting_trip_heat_map(pool, start_date, end_date):
    sql_conn = pyodbc.connect(...)

    cursor = sql_conn.cursor()

    cursor.execute(
        "SELECT ... "
        "FROM ... "
        "WHERE ... ? "
		"AND ... ?",
		start_date, end_date
    )

    rows = cursor.fetchall()

    radius = 2 + (6000 / len(rows))

    lon = []
    lat = []

    for row in rows:
        lon.append(str(row[0]))
        lat.append(str(row[1]))

    fig = go.Figure()

    fig.add_trace(go.Densitymapbox(
        name='Density',
        lat=lat,
        lon=lon,
        radius=radius,
        hoverinfo='none'
    ))

    fig.update_layout(
        title='Trip Pickups',
        autosize=True,
        height=420,
        margin=dict(l=10, r=10, t=80, b=0),
        mapbox=go.layout.Mapbox(
            accesstoken=mapbox_access_token,
            style='streets',
            bearing=0,
            center=go.layout.mapbox.Center(
                lat=39.739151,
                lon=-104.9847031
            ),
            pitch=0,
            zoom=9
        )
    )

    return fig
8

thank you for this. it helps out.