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'),