Changing selected marker color does not work in Scattermapbox

Dash Python
1

Hi
I’d like to change the color of selected points on my map, while it works on my jupyter notebook, it does not seem to have any effect doing it in dash. So I’m wondering whether I’m missing something, or it’s not possible in dash
Here is the part of the code:

data = [
    go.Scattermapbox(
        lat= df[df['cat'] == name]['lat'],
        lon= df[df['cat'] == name]['lon'],
        mode='markers',
        text= df[df['cat'] == name]['text'],
        selected={
            'marker':
                  {
                      'color':'black'
                  }
        }

    ) for name in ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']
]

layout = go.Layout(
    autosize=True,
    hovermode='closest',
    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=lat,
            lon=lon
        ),
        pitch=0,
        zoom=8
    ),
)

fig = dict(data=data, layout=layout)


app.layout = html.Div(
    dcc.Graph(
        id='graph',
        figure = fig
    )
)
2

Hi, and thanks for writing in.

I’m still not entirely clear on what you’re looking to do, what’s working in Jupyter, and not working in Dash. Would it be possible to create a simple dash app to replicate this restyle not happening?

3

Sure

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/2014_ebola.csv")

app = dash.Dash(__name__)
server = app.server

mapbox_access_token = 'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiY2ozcGI1MTZ3MDBpcTJ3cXR4b3owdDQwaCJ9.8jpMunbKjdq1anXwU5gxIw'

data = [
    go.Scattermapbox(
        lat=df['Lon'],
        lon=df['Lat'],
        mode='markers',

        # this is the part of the code that's not working for me 
        selected={
            'marker':
                {
                    'color': 'red'
                }
        }
        # <------------>

    )
]

layout = go.Layout(
    autosize=True,
    hovermode='closest',
    mapbox=dict(
        accesstoken=mapbox_access_token,
        center=dict(
            lat=9.95,
            lon=-9.7
        ),
        zoom=2
    ),
)

fig = dict(data=data, layout=layout)

app.layout = html.Div([
    dcc.Graph(id='graph', figure=fig)
])

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

Using lasso tool for example changes points color to red when I create this map on jupyter but nothing happens when running the app.

4

Hm, @pixinixi what version of dash, associated dash libraries, and plotly are you using? This is working for me with my environment (and the difference in versions could be why it’s working in jupyter and not from your terminal:

dash==0.21.0
dash-core-components==0.22.1
dash-html-components==0.10.0
dash-renderer==0.12.1
plotly==2.5.1

scattermapbox2

1 Like
5

I’m using:

dash==0.21.1
dash-core-components==0.21.0rc1
dash-html-components==0.10.1
dash-renderer==0.12.1
plotly==2.7.0

It turns out that dash-core-components version I’m using causes this issue, because when updated it works fine.
Thank you for taking the time :slight_smile: