Update Map Color Group Based on Click

Dash Python
1

Hello,

I am working on creating a map that allows a user to click on a group of data on the map and the selected data will change from whatever color it was previously on the map to white.

Here is my code so far:


import dash
import dash_html_components as html
import dash_core_components as dcc
from flask import Flask, Response
from dash.dependencies import Input, Output, State
import pandas as pd
import plotly.express as px
import itertools as itt
import numpy as np


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

df = px.data.carshare()

color_iterator = itt.cycle(px.colors.qualitative.Plotly)
color_map = {
    str(peak_hour): next(color_iterator)
    for peak_hour in range(df['peak_hour'].min(), df['peak_hour'].max()+1)
}

color_list = list(color_map.keys())
array_indexes = np.array(color_list, dtype=np.object)

fig = px.scatter_mapbox(df, lat="centroid_lat", lon="centroid_lon",
                        color = 'peak_hour')
fig.update_layout(mapbox_style="carto-darkmatter",
                  margin={"r":0,"t":0,"l":0,"b":0},
                  coloraxis_showscale=False
                  )
fig.update_geos(fitbounds="locations")

app.layout = html.Div(
    children=[
        html.Div(dcc.Graph(id='maptest',figure=fig)),
        html.Div(children=array_indexes[0],
                 id='current_selection',
                 style={'display': 'none'}
                    ), 
    ]
)


#Highlight Map Points on Click
@app.callback(Output("maptest",'figure'),
              Input('current_selection', 'children')
)

def update_map_color_click(current_selection):
    selection_color_map = color_map.copy()
    selection_color_map[current_selection] = "white"

    fig = px.scatter_mapbox(df, lat="lat", lon="lon",
                                color_discrete_map=selection_color_map,
                                color = 'peak_hour',
                                zoom=3, height=400,width=500)
    fig.update_layout(mapbox_style="carto-darkmatter",
                          margin={"r":0,"t":0,"l":0,"b":0},
                          coloraxis_showscale=False)

    return fig

@app.callback(
    Output("current_selection", "children"),
    Input("maptest", "clickData"),
    State("current_selection", "children")

)

def update_map_on_click(map_clickData,current_selection):

    if dash.callback_context.triggered[0]['prop_id'] == ".":
        return dash.no_update

    if dash.callback_context.triggered[0]['prop_id'] == "maptest.clickData":
        selection_id = map_clickData['points'][0]['marker.color'][0]
        if selection_id == current_selection:
            return dash.no_update
        else:
            return selection_id


if __name__ == "__main__":
    app.run_server(debug=True, port=8050)

The map loads just fine, but when I click on any point on this map, I get an error message that reads, “TypeError: ‘int’ object is not subscriptable” referring specifically to the line where I define “selection_id” in the 2nd callback. Not sure how to fix this issue as I believe I need to pull info from map_clickData in this way. Please let me know if this is not the most efficient way to go about this. Any help would be appreciated! Thank you!