Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import random
 
-# Ahantu na coordinates
+# Ahantu na info
 locations = {
     "Downtown": {"lat": -1.95, "lon": 30.05, "avg_speed": 30, "avg_vehicles": 60},
     "Highway": {"lat": -1.92, "lon": 30.06, "avg_speed": 100, "avg_vehicles": 40},
@@ -9,53 +9,60 @@ locations = {
     "School Zone": {"lat": -1.93, "lon": 30.03, "avg_speed": 20, "avg_vehicles": 20}
 }
 
-def simulate_traffic_map(area):
-    info = locations[area]
-    speed = round(random.gauss(info["avg_speed"], 10), 1)
-    vehicle_count = int(random.gauss(info["avg_vehicles"], 10))
-    if speed < 20 and vehicle_count > 50:
-        traffic_level = "🚦 High Traffic Jam"
-        status = "Blocked"
-    elif speed < 40 or vehicle_count > 40:
-        traffic_level = "⚠️ Moderate Traffic"
-        status = "Restricted"
-    else:
-        traffic_level = "✅ Light Traffic"
-        status = "Clear"
-    
-    report = (f"📍 **{area}**\n"
-              f"🚗 Speed: {speed} km/h\n"
-              f"🚙 Vehicles: {vehicle_count}\n"
-              f"📊 Status: {status}\n"
-              f"📣 Traffic: {traffic_level}")
-    
-    lat, lon = info["lat"], info["lon"]
+def simulate_all_traffic():
+    report_lines = []
+    markers = ""
+
+    for name, info in locations.items():
+        # Random traffic values
+        speed = round(random.gauss(info["avg_speed"], 10), 1)
+        vehicle_count = int(random.gauss(info["avg_vehicles"], 10))
+
+        # Traffic level + color
+        if speed < 20 and vehicle_count > 50:
+            level = "🚦 High Traffic"
+            color = "red"
+        elif speed < 40 or vehicle_count > 40:
+            level = "⚠️ Moderate"
+            color = "orange"
+        else:
+            level = "✅ Light"
+            color = "green"
+
+        report_lines.append(f"📍 {name}: {level} — {speed} km/h, {vehicle_count} vehicles")
+
+        # Add marker for this location
+        markers += f"""
+        L.circleMarker([{info["lat"]}, {info["lon"]}], {{
+            color: '{color}',
+            radius: 10
+        }}).addTo(map).bindPopup("<b>{name}</b><br>Speed: {speed} km/h<br>Cars: {vehicle_count}<br>Status: {level}");"""
+
+    # Map HTML with all markers
     html = f"""
-    <div id="map" style="width:100%;height:400px;"></div>
+    <div id="map" style="width:100%;height:500px;"></div>
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script>
-      var map = L.map('map').setView([{lat}, {lon}], 14);
+      var map = L.map('map').setView([-1.935, 30.05], 13);
       L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
         maxZoom: 19
       }}).addTo(map);
-      L.marker([{lat}, {lon}])
-        .addTo(map)
-        .bindPopup("{area}: {traffic_level}")
-        .openPopup();
+      L.control.zoom({{ position: 'topright' }}).addTo(map);
+      {markers}
     </script>
     """
-    return report, html
+
+    return "\n".join(report_lines), html
 
 with gr.Blocks() as demo:
-    gr.Markdown("## 🗺️ Traffic Monitoring with Real Map View")
-    
-    location = gr.Dropdown(list(locations.keys()), label="Choose Location", value="Downtown")
-    simulate_btn = gr.Button("Simulate Traffic")
-    output = gr.Markdown()
-    map_view = gr.HTML()
-    
-    simulate_btn.click(fn=simulate_traffic_map, inputs=location, outputs=[output, map_view])
+    gr.Markdown("## 🗺️ Advanced Traffic Map Simulation with Real-Time Markers")
+
+    simulate = gr.Button("Simulate Traffic Across All Locations")
+    report = gr.Textbox(label="Traffic Report", lines=8)
+    map_html = gr.HTML()
+
+    simulate.click(fn=simulate_all_traffic, inputs=[], outputs=[report, map_html])
 
 demo.launch()