feat: enhance visualization by adjusting margins, hover info, and marker sizes in intensity maps

app.py

@@ -693,7 +693,7 @@ def plot_waveform(st, selected_stations, first_pick, duration):
         hovermode='closest',
         height=200,
         plot_bgcolor='white',
-        margin=dict(l=0, r=10, t=30, b=0),  # 緊凑的邊距設置
+        margin=dict(l=0, r=10, t=50, b=0),  # 緊凑的邊距設置
         showlegend=True,
         legend=dict(
             yanchor="top",
@@ -821,7 +821,7 @@ def create_intensity_map(
                         color="rgba(128, 128, 128, 0.9)",  # 較不透明
                     ),
                     text=stations_in_window["text"],
-                    hovertemplate="%{text}<extra></extra>",
+                    hoverinfo="text",
                     name="輸入測站 (P波在窗內)",
                     showlegend=True,
                 )
@@ -839,7 +839,7 @@ def create_intensity_map(
                         color="rgba(128, 128, 128, 0.3)",  # 較透明
                     ),
                     text=stations_out_window["text"],
-                    hovertemplate="%{text}<extra></extra>",
+                    hoverinfo="text",
                     name="輸入測站 (P波在窗外)",
                     showlegend=True,
                 )
@@ -850,14 +850,19 @@ def create_intensity_map(
     for intensity_level in range(10):
         group = intensity_groups[intensity_level]
         if group["lat"]:  # 有資料的震度等級
+            # 先添加圓圈標記
             fig.add_trace(
                 go.Scattermap(
                     lat=group["lat"],
                     lon=group["lon"],
-                    mode="markers",
-                    marker=dict(size=14, color=group["color"], opacity=0.9),
-                    text=group["text"],
-                    hovertemplate="%{text}<extra></extra>",
+                    mode="markers+text",
+                    marker=dict(size=20, color=group["color"], opacity=0.9),
+                    text=intensity_labels[intensity_level],
+                    textposition="middle center",
+                    textfont=dict(size=14,
+                                  color=("black" if intensity_level <= 4 else "white"),
+                                  family="Open Sans Bold"),
+                    hoverinfo="text",
                     name=f"震度 {intensity_labels[intensity_level]}",
                     showlegend=True,
                 )
@@ -869,7 +874,7 @@ def create_intensity_map(
                     lat=[None],
                     lon=[None],
                     mode="markers",
-                    marker=dict(size=14, color=group["color"], opacity=0.9),
+                    marker=dict(size=24, color=group["color"], opacity=0.9),
                     name=f"震度 {intensity_labels[intensity_level]}",
                     showlegend=True,
                     hoverinfo="skip",
@@ -885,7 +890,7 @@ def create_intensity_map(
                 mode="markers",
                 marker=dict(size=25, color="red"),
                 text=[f"震央<br>({epicenter_lat:.3f}, {epicenter_lon:.3f})"],
-                hovertemplate="%{text}<extra></extra>",
+                hoverinfo="text",
                 name="震央",
                 showlegend=True,
             )
@@ -911,6 +916,7 @@ def create_intensity_map(
         ),
         height=550,  # 設置固定高度以適應 Gradio 容器
         margin=dict(l=0, r=0, t=0, b=0),
+        hovermode="closest",  # 啟用 hover 功能
         showlegend=True,
         legend=dict(
             yanchor="top",
@@ -1186,7 +1192,7 @@ with gr.Blocks(title="TTSAM 震度預測系統", fill_height=True) as demo:
 
     # ========== 下層：合併地圖 vs 實際觀測 ==========
     with gr.Row():
-        predicted_intensity_map = gr.Plot(label="合併地圖")
+        predicted_intensity_map = gr.Plot(label="預測震度")
 
         observed_intensity_image = gr.Image(
             label="實際觀測震度",