diff --git a/app.py b/app.py index e963058..76aac4c 100644 --- a/app.py +++ b/app.py @@ -68,6 +68,7 @@ def process_gpx(file_path): df['time_loc'] = df['time'].dt.tz_localize(None) df['time_diff'] = df['time'] - df['time'][0] df['time_diff_sec'] = df['time_diff'].dt.total_seconds() + df['duration_hms'] = df['time_diff'].apply(lambda td: str(td).split('.')[0]) # Cumulative distance (km) distances = [0] for i in range(1, len(df)): @@ -149,8 +150,42 @@ def create_info_banner(df): # START OF THE PLOTS # ============================================================================= def create_map_plot(df): - fig = px.line_mapbox(df, lat='lat', lon='lon', hover_name='time', - zoom=13, height=800) + # fig = px.line_mapbox( + # df, + # lat='lat', + # lon='lon', + # hover_name='time', + # hover_data={ + # 'cum_dist_km': ':.2f', + # 'duration_hms': True, + # 'lat': False, + # 'lon': False, + # 'time': False + # }, + # labels={ + # 'cum_dist_km': 'Distance (km) ', + # 'duration_hms': 'Elapsed Time ' + # }, + # zoom=13, + # height=800 + # ) + fig = px.line_mapbox( + df, + lat='lat', + lon='lon', + zoom=13, + height=800 + ) + + fig.update_traces( + hovertemplate=( + #"Time: %{customdata[0]}
" + + "Distance (km): %{customdata[1]:.2f}
" + + "Elapsed Time: %{customdata[2]}" + ), + customdata=df[['time', 'cum_dist_km', 'duration_hms']] + ) + # fig.update_layout(mapbox_style="open-street-map") fig.update_traces(line=dict(color="#f54269", width=3)) @@ -400,6 +435,7 @@ app.layout = html.Div([ # === Callbacks === +# Callback 1: Load GPX File and Store as JSON @app.callback( Output('stored-df', 'data'), Input('gpx-file-dropdown', 'value') @@ -408,7 +444,7 @@ def load_gpx_data(path): df = process_gpx(path) return df.to_json(date_format='iso', orient='split') - +# Callback 2: Update All Plots @app.callback( Output('info-banner', 'children'), Output('fig-map', 'figure'),