Using Dash graphs to create a placeholder for scatter line plot and scattermapbox.
html.Div([
html.Div(id='graphs', children=[
dcc.Graph({'type':'graph', 'index':1}, figure=blank_fig('plotly_dark')),
dcc.Graph({'type':'graph', 'index':1}, figure=blank_fig('plotly_dark'))]
])
The figures are initialized via a callback as you can see below using Plotly Express:
fig1 = px.line(x=df.index.seconds, y=df.ft, labels={'x':'Elasped Time(seconds)', 'y':'feet'}, title="(feet)", template='plotly_dark')
fig2 = px.scatter_mapbox(df, lat='deg1', lon='deg2', zoom=zoom, height=800,
text=['deltatime: {}'.format(i.total_seconds()) for i in df.index],
title=selected_values['report_type'], center=dict(lat=center[0], lon=center[1]))
fig2.update_layout(
mapbox_style="white-bg",
mapbox_layers=[{
"below": 'traces',
"sourcetype": "raster",
"sourceattribution": "Low-Res Satellite Imagery",
"source": [f"{self.map_host}/tiles/{{z}}/{{x}}/{{y}}.png"]
}]
)
fig2.update_traces(mode='markers', marker=dict(size=2, color='white'),
hovertemplate='lat: %{lat}'+'<br>lon: %{lon}<br>'+'%{text}')
During zoom operation on figure 1 I get the selected range via a callback. With this selected range we have a list of points then to pass to the selectedpoints parameter of the update_traces() function. The goal is to highlight those selected points in red but instead the whole line is painted red.
# retrieved from the relayout input. The xaxis is in seconds.
start = int(unique_data['xaxis.range[0]'])
end = int(unique_data['xaxis.range[1]'])
# using the above values we can then subselect the dataframe
fig = get_figure_with('mapbox') # retrieves the figure for fig2
selected_df = df[(df.index.seconds >= start) & (df.index.seconds <= end)]
points = list(selected_df[['latitude_deg','longitude_deg']].itertuples(index=False, name=None))
fig.update_traces(marker_color='Red', selectedpoints=points)
Is highlighting a segment of mapbox plot possible? For example the curved part of the plot below?
