Problem with Densitymapbox chart type

Hi,

this is my first post to the forum which I have been following quite actively during the past 12 months. I have been using Dash to implement web GUI for my app, and I am very impressed how easily and flexibly you can implement cool looking dashboards with Dash. Many thanks to Dash team for making this possible!

In my app I am having callback which updates the map either with ‘scattermapbox’ or ‘densitymapbox’ traces, depending on which of the inputs of the callback changes. I have observed, that if I first update the map with trace of type ‘scattermapbox’, then the consequent update with trace type of ‘densitymapbox’ is not visible in the map at all (or vice versa).

Perhaps I have parametrised my layout incorrectly, or what could explain this weird behaviour? I highly appreciate if you could help me to solve this problem.

I am using following versions: dash v1.1.1, dash-core-components v1.1.2 and plotly v4.1.1.

Following example illustrates the problem I am facing:

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = dbc.Container([
    dbc.Row([dbc.Button('click me!', id = 'button_id')], justify = "center"),
    dbc.Row([dcc.Graph(id = 'graph')], justify = "center")])

@app.callback(Output('graph', 'figure'),
              [Input('button_id', 'n_clicks')])
def update_figure(n):
    if not n:
        return dash.no_update
    point = {'lat': 60.978869, 'lon': 25.66120}
    if n % 2:
        trace = {
            'lat':[point['lat']],
            'lon':[point['lon']],
            'type': 'scattermapbox',
            'mode': 'markers',
            'marker': {'size': 20}
        }
    else:
        trace = {
            'lat':[point['lat']],
            'lon':[point['lon']],
            'z':[10],
            'type': 'densitymapbox'
        }
    return {
        'data': [trace],
        'layout': {
            'autosize': True,
            'width': 900, 
            'mapbox': {
                'accesstoken':<add-your-token-here>,
                'center': {'lat': point['lat'], 'lon': point['lon']},
                'zoom': 15,
                'style': 'satellite'
            },
            'margin': {
                'l': 0, 'r': 0, 'b': 0, 't': 0
            },
            'clickmode': 'event+select',
            'hovermode': 'closest',
        }
    }

if __name__ == '__main__':
    app.run_server(debug=True,host='0.0.0.0',port = 8080) 

This is a bug, and I’ve filed a report here: https://github.com/plotly/plotly.js/issues/4285

1 Like