Hello! So I am trying to accomplish something specific. I have an application with a scattermapbox component and a couple regular scatter components. I want to make it so when the user hovers over a point on the line graph, the corresponding gps marker on the scattermapbox changes color from purple to yellow. The data is based off a time interval selected by the user, and the map is initially populated using this callback.
@app.callback(
Output('map-figure-store', 'data'),
[Input('current-time-range-data', 'data')])
def update_map(data):
if data is None:
raise PreventUpdate
reel_motor_currents = data['reel_motor_current']
traction_motor_currents = data['traction_motor_current']
reel_motor_speeds = data['reel_motor_speed']
traction_motor_speeds = data['traction_motor_speed']
timestamps = data['timestamps']
latitudes = []
longitudes = []
colors = []
sizes = []
opacities = []
for gps_entry in data['gps_data']:
latitudes.append(gps_entry['lat'])
longitudes.append(gps_entry['lon'])
colors.append('rgb(138,43,226)')
sizes.append(15)
opacities.append(0.5)
center_lat = 0
center_lon = 0
if len(latitudes) is 0 or len(longitudes) is 0:
center_lat = 41.2606
center_lon = -81.90
else:
center_lat = latitudes[0]
center_lon = longitudes[0]
return {
'data': [
go.Scattermapbox(
lat=latitudes,
lon=longitudes,
mode='markers',
customdata=timestamps,
marker=go.scattermapbox.Marker(
size=sizes, opacity=opacities, color=colors
),
hoverinfo='text',
hovertext=[('<b>Traction</b><br>' +
'Motor Current: {}<br>' +
'Motor Speed: {}<br>' +
'<b>Reel</b><br>' +
'Motor Current: {}<br>' +
'Motor Speed: {}<br><br>'+
'{}').format(tmc['tmc'],
tms['t_speed'],
rmc['rmc'],
rms['r_speed'],
timestamp)for rmc, tmc, rms, tms, timestamp in zip(reel_motor_currents,
traction_motor_currents,
reel_motor_speeds,
traction_motor_speeds,
timestamps)]
)],
'layout':
go.Layout(
margin={'l': 40, 'b': 40, 't': 10, 'r': 40},
hovermode='closest',
mapbox=dict(bearing=0, center=dict(lat=center_lat, lon=center_lon),
pitch=0, zoom=14, style='satellite',
accesstoken=[redacted]),
paper_bgcolor='#f9f9f9',
plot_bgcolor='#f9f9f9'
)
}
The figure data is put in a dcc.Store component that is the input for a clientside callback with the following inputs and outputs:
app.clientside_callback(
ClientsideFunction("clientside", "figure"),
Output("map", "figure"),
[Input("map-figure-store", "data"),
Input("motor-current-graph", 'hoverData')])
And JS code:
if (!window.dash_clientside) {
window.dash_clientside = {}
}
window.dash_clientside.clientside = {
figure: function (fig_dict, hover_data) {
if (!fig_dict) {
throw "Figure data not loaded, aborting update."
}
if(!hover_data)
return fig_dict
// Copy the fig_data so we can modify it
var fig_dict_copy = {...fig_dict}
var hover_point_value = hover_data['points'][0]['x']
const entries = Object.entries(fig_dict_copy['data'][0]['customdata'])
for (const [index, time] of entries) {
if(time === hover_point_value){
fig_dict_copy['data'][0]['marker']['color'][index] = 'rgb(254,196,36)'
fig_dict_copy['data'][0]['marker']['opacity'][index] = 1.0
}
}
console.log(fig_dict_copy)
return fig_dict_copy
},
}
However when I put this into practice the console output shows that the color values are being changed. However the color of the markers do not change. I do know that the gps graph is being updated because if I hover over a point on the line graph while zoomed in on the gps graph, then the gps graph zooms back out.
Anyone know why the markers would not be showing their new assigned color value?
Edit: Please let me know if I need to provide any more information. I am very confused as to why this isn’t working.
Edit2: So I added clear_on_unhover to the motor current graph which got rid of a random yellow dot that would show up after re rendering the map by selecting a new period of time to look at, however this did not fix my issue and I have more proof that what should be happening, should in fact be happening but just isn’t.
I implemented a simple callback that prints the map’s figure every time it changes. Here you can see from the print that the figure does have different colors and opacities but none of these are reflected on the map itself.
