docs: update map visualization for earthquake data with improved marker sizes and layout adjustments

app.py

@@ -751,11 +751,11 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
     fig = go.Figure()
 
     # 添加所有測站（灰色小點）
-    fig.add_trace(go.Scattermapbox(
+    fig.add_trace(go.Scattermap(
         lat=all_stations_lat,
         lon=all_stations_lon,
         mode='markers',
-        marker=dict(size=4, color='lightgray', opacity=0.4),
+        marker=dict(size=6, color='gray', opacity=0.6),
         text=all_stations_text,
         hovertemplate='%{text}<extra></extra>',
         name=f'所有測站 ({len(all_stations_lat)} 個)',
@@ -764,7 +764,7 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
 
     # 添加選中測站 - 前 5 近（綠色）
     if selected_group1_lat:
-        fig.add_trace(go.Scattermapbox(
+        fig.add_trace(go.Scattermap(
             lat=selected_group1_lat,
             lon=selected_group1_lon,
             mode='markers',
@@ -777,7 +777,7 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
 
     # 添加選中測站 - 6-15 近（藍色）
     if selected_group2_lat:
-        fig.add_trace(go.Scattermapbox(
+        fig.add_trace(go.Scattermap(
             lat=selected_group2_lat,
             lon=selected_group2_lon,
             mode='markers',
@@ -790,7 +790,7 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
 
     # 添加選中測站 - 16-25 近（橘色）
     if selected_group3_lat:
-        fig.add_trace(go.Scattermapbox(
+        fig.add_trace(go.Scattermap(
             lat=selected_group3_lat,
             lon=selected_group3_lon,
             mode='markers',
@@ -801,31 +801,39 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
             showlegend=True
         ))
 
-    # 添加震央（紅色星星）
-    fig.add_trace(go.Scattermapbox(
+    # 添加震央（紅色大點）
+    fig.add_trace(go.Scattermap(
         lat=[epicenter_lat],
         lon=[epicenter_lon],
         mode='markers',
-        marker=dict(size=20, color='red', symbol='star'),
+        marker=dict(size=25, color='red'),
         text=[f'震央<br>({epicenter_lat:.3f}, {epicenter_lon:.3f})'],
         hovertemplate='%{text}<extra></extra>',
         name='震央',
         showlegend=True
     ))
 
+    fig.add_trace(go.Scattermap(
+        lat=[epicenter_lat],
+        lon=[epicenter_lon],
+        mode='markers',
+        marker=dict(size=10, color='white'),
+        showlegend=False
+    ))
+
     # 設置地圖佈局
     fig.update_layout(
-        mapbox=dict(
+        map=dict(
             style="open-street-map",
             center=dict(lat=epicenter_lat, lon=epicenter_lon),
-            zoom=7
+            zoom=8
         ),
-        height=600,  # 設置固定高度以適應 Gradio 容器
+        height=500,  # 設置固定高度以適應 Gradio 容器
         margin=dict(l=0, r=0, t=0, b=0),
         showlegend=True,
         legend=dict(
             yanchor="top",
-            y=0.99,
+            y=0.95,
             xanchor="left",
             x=0.01,
             bgcolor="rgba(255, 255, 255, 0.8)"
@@ -964,8 +972,8 @@ def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_l
     intensity_labels = ["0", "1", "2", "3", "4", "5-", "5+", "6-", "6+", "7"]
     for intensity_level in range(10):
         group = intensity_groups[intensity_level]
-        if group['lat']:  # 只添加有資料的震度等級
-            fig.add_trace(go.Scattermapbox(
+        if group['lat']:  # 有資料的震度等級
+            fig.add_trace(go.Scattermap(
                 lat=group['lat'],
                 lon=group['lon'],
                 mode='markers',
@@ -979,23 +987,46 @@ def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_l
                 name=f'震度 {intensity_labels[intensity_level]}',
                 showlegend=True
             ))
+        else:
+            # 沒有資料的震度等級：添加隱形標記只為了顯示圖例
+            fig.add_trace(go.Scattermap(
+                lat=[None],
+                lon=[None],
+                mode='markers',
+                marker=dict(
+                    size=14,
+                    color=group['color'],
+                    opacity=0.8
+                ),
+                name=f'震度 {intensity_labels[intensity_level]}',
+                showlegend=True,
+                hoverinfo='skip'
+            ))
 
-    # 如果有震央位置，標記震央
+    # 如果有震央位置，標記震央（紅色大點）
     if epicenter_lat and epicenter_lon:
-        fig.add_trace(go.Scattermapbox(
+        fig.add_trace(go.Scattermap(
             lat=[epicenter_lat],
             lon=[epicenter_lon],
             mode='markers',
-            marker=dict(size=20, color='red', symbol='star'),
+            marker=dict(size=25, color='red'),
             text=[f'震央<br>({epicenter_lat:.3f}, {epicenter_lon:.3f})'],
             hovertemplate='%{text}<extra></extra>',
             name='震央',
             showlegend=True
         ))
 
+        fig.add_trace(go.Scattermap(
+            lat=[epicenter_lat],
+            lon=[epicenter_lon],
+            mode='markers',
+            marker=dict(size=10, color='white'),
+            showlegend=False
+        ))
+
     # 設置地圖佈局
     fig.update_layout(
-        mapbox=dict(
+        map=dict(
             style="open-street-map",
             center=dict(lat=23.5,
                        lon=121),
@@ -1006,7 +1037,7 @@ def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_l
         showlegend=True,
         legend=dict(
             yanchor="top",
-            y=0.9,
+            y=0.95,
             xanchor="left",
             x=0.01,
             bgcolor="rgba(255, 255, 255, 0.8)"