Update app.py

app.py

@@ -5,9 +5,10 @@
 # (7) Add Leg + Reset buttons
 # (8) Stats panel
 # Leaflet-style interactive map like your screenshot (pan/zoom/tiles/popups)
+# FIX: Folium map is embedded via <iframe srcdoc=...> so it shows correctly in Gradio
 
 import re
-import math
+import html
 import xml.etree.ElementTree as ET
 
 import gradio as gr
@@ -178,10 +179,6 @@ def compute_stats(path_pts, seg_dists_m, total_time_min, legs):
 
 # ---------------- Leaflet map (Folium) ----------------
 def _all_bounds(points_list):
-    """
-    points_list: iterable of lists of (lat, lon)
-    returns [[min_lat, min_lon], [max_lat, max_lon]] or None
-    """
     lats, lons = [], []
     for pts in points_list:
         for (la, lo) in pts:
@@ -195,7 +192,6 @@ def _all_bounds(points_list):
 
 
 def build_leaflet_map(path_pts, legs, seg_dists_m, selected_rings):
-    # Center initial map near start; we'll fit_bounds after drawing
     start_lat, start_lon = path_pts[0]
     m = folium.Map(
         location=[start_lat, start_lon],
@@ -204,8 +200,7 @@ def build_leaflet_map(path_pts, legs, seg_dists_m, selected_rings):
         control_scale=True,
     )
 
-    # ---- ping rings (KML) ----
-    # draw selected rings first so path sits on top
+    # ---- ping rings (blue like your screenshot) ----
     for ring_name in selected_rings or []:
         ring_pts = PING_RINGS.get(ring_name)
         if not ring_pts:
@@ -213,15 +208,17 @@ def build_leaflet_map(path_pts, legs, seg_dists_m, selected_rings):
         folium.PolyLine(
             ring_pts,
             weight=3,
-            opacity=0.9,
+            opacity=0.95,
+            color="blue",
             tooltip=ring_name,
         ).add_to(m)
 
-    # ---- flight path polyline ----
+    # ---- flight path (red like your screenshot) ----
     folium.PolyLine(
         path_pts,
         weight=4,
         opacity=1.0,
+        color="red",
         tooltip="Flight path",
     ).add_to(m)
 
@@ -230,18 +227,27 @@ def build_leaflet_map(path_pts, legs, seg_dists_m, selected_rings):
         location=path_pts[0],
         radius=6,
         fill=True,
-        popup=folium.Popup(f"<b>Start</b><br>Lat: {path_pts[0][0]:.5f}<br>Lon: {path_pts[0][1]:.5f}", max_width=300),
+        color="green",
+        fill_opacity=1.0,
+        popup=folium.Popup(
+            f"<b>Start</b><br>Lat: {path_pts[0][0]:.5f}<br>Lon: {path_pts[0][1]:.5f}",
+            max_width=300,
+        ),
     ).add_to(m)
 
     folium.CircleMarker(
         location=path_pts[-1],
         radius=6,
         fill=True,
-        popup=folium.Popup(f"<b>End</b><br>Lat: {path_pts[-1][0]:.5f}<br>Lon: {path_pts[-1][1]:.5f}", max_width=300),
+        color="purple",
+        fill_opacity=1.0,
+        popup=folium.Popup(
+            f"<b>End</b><br>Lat: {path_pts[-1][0]:.5f}<br>Lon: {path_pts[-1][1]:.5f}",
+            max_width=300,
+        ),
     ).add_to(m)
 
-    # ---- waypoint markers with popups (like your screenshot) ----
-    # Waypoint i corresponds to end of leg i (i>=1). Waypoint 0 is start.
+    # ---- waypoint markers with popups ----
     total_dist_km = 0.0
     elapsed_min = 0.0
 
@@ -269,13 +275,14 @@ def build_leaflet_map(path_pts, legs, seg_dists_m, selected_rings):
                 f"Distance flown: {total_dist_km:.2f} km",
             ]
 
-        popup_html = "<br>".join(popup_lines)
-
         folium.CircleMarker(
             location=(lat, lon),
             radius=5,
             fill=True,
-            popup=folium.Popup(popup_html, max_width=320),
+            color="white",
+            fill_color="white",
+            fill_opacity=1.0,
+            popup=folium.Popup("<br>".join(popup_lines), max_width=340),
         ).add_to(m)
 
     # ---- fit map to all plotted data ----
@@ -286,8 +293,18 @@ def build_leaflet_map(path_pts, legs, seg_dists_m, selected_rings):
     if bounds:
         m.fit_bounds(bounds, padding=(20, 20))
 
-    # Return HTML string for Gradio
-    return m.get_root().render()
+    # ---- IMPORTANT FIX: embed as iframe with fixed height ----
+    map_html = m.get_root().render()
+    escaped = html.escape(map_html, quote=True)
+
+    return f"""
+    <iframe
+        srcdoc="{escaped}"
+        style="width: 100%; height: 650px; border: 0; border-radius: 12px;"
+        loading="lazy"
+        referrerpolicy="no-referrer"
+    ></iframe>
+    """
 
 
 def run_sim(start_lat, start_lon, legs_df, method, rings):
@@ -329,7 +346,7 @@ with gr.Blocks() as demo:
 
     btn = gr.Button("Simulate on Map")
 
-    out_map = gr.HTML(label="Map")
+    out_map = gr.HTML()
     stats = gr.Markdown()
 
     btn.click(
@@ -342,4 +359,3 @@ with gr.Blocks() as demo:
     reset_btn.click(reset_legs, outputs=[legs_df])
 
 demo.launch()
-