✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to update a choropleth map?

Hello,

I want to create a dashboard where the user can choose out of a set of variables to be mapped as a choropleth map.
Mapping my dataframe to the map works, but as soon as I try out ways to update it on button press, it just stops working.

Below you can see my simplified code, where I removed the data-dependence with a simple randomization. On first loading, it colors the map randomly, after clicking on one of the dropdown elements, it randomly uses another color. But after that it just refuses to update the color.
This is the same problem I had when choosing the colors based on data.

import json
geoj_feat = json.loads(open("nuts.geojson").read())['features']
features = [feat for feat in geoj_feat]
sources = [{"type": "FeatureCollection", "features": features}]

app.layout = html.Div(
     html.Div([
        dcc.Dropdown(
            id="effect",
            options=[{"label": i, "value": i} for i in effects],
            value=random.choice(effects)
        ),
        dcc.Dropdown(
            id="var",
            options=[{"label": i, "value": i} for i in variables],
            value=random.choice(variables)
        ),
        dcc.Graph(id="map"),
        html.Div(id='table-container')
])
        )
        
@app.callback(dash.dependencies.Output('table-container', 'children'), 
          [dash.dependencies.Input('effect', 'value')])
def table_update(e):
  df1 = dataframe[dataframe['effect type'] == e]
  return generate_table(df1)

@app.callback( dash.dependencies.Output('map', 'figure'),
          [dash.dependencies.Input('effect', 'value'),
           dash.dependencies.Input('var', 'value')])
def map_update(e, v):
  colorscheme = ['rgb(255,247,236)','rgb(254,232,200)','rgb(253,212,158)','rgb(253,187,132)','rgb(252,141,89)','rgb(239,101,72)','rgb(215,48,31)','rgb(179,0,0)','rgb(127,0,0)']
  return {
        "data": [
            {
                  "type": "scattermapbox",
                  "lat": [47.751569],
                  "lon": [1.675063],
                  "mode": "markers",
            }
        ],
        "layout": {
                "autosize": True,
                "hovermode": "closest",
                "mapbox": {
                        "layers": [{
                                "sourcetype": 'geojson',
                                "source" : k,
                                "type" : "fill",
                                "color": random.choice(colorscheme)
                                } for k in sources],
                        "accesstoken": MAPBOX_KEY,
                        "bearing": 0,
                        "center": {
                                "lat": 40.7272,
                                "lon": -73.991251
                        },
                        "pitch": 0,
                        "zoom":2,
                        "style": "outdoors"
                }
        }
}


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