updated the hover-infobox content for the map-plot .

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]}<br>" +
+            "Distance (km): %{customdata[1]:.2f}<br>" +
+            "Elapsed Time: %{customdata[2]}<extra></extra>"
+        ),
+        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'),