app.py

import gradio as gr
import random

locations = {
    "Downtown": {"lat": -1.95, "lon": 30.05},
    "Highway": {"lat": -1.92, "lon": 30.06},
    "Industrial Area": {"lat": -1.94, "lon": 30.07},
    "School Zone": {"lat": -1.93, "lon": 30.03}
}

tile_layers = {
    "Light": {
        "url": "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
        "attribution": '&copy; <a href="https://carto.com/">CartoDB</a> contributors'
    },
    "Dark": {
        "url": "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
        "attribution": '&copy; <a href="https://carto.com/">CartoDB</a> contributors'
    },
    "Satellite": {
        "url": "https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        "attribution": "© Google",
        "subdomains": ["mt0", "mt1", "mt2", "mt3"]
    }
}

def simulate_map_style(style):
    markers = ""
    alerts = []

    for name, info in locations.items():
        speed = round(random.gauss(30, 15), 1)
        vehicles = int(random.gauss(40, 15))

        if speed < 20 and vehicles > 50:
            status = "🚦 Heavy Traffic"
            color = "red"
        elif speed < 40 or vehicles > 40:
            status = "⚠️ Moderate Traffic"
            color = "orange"
        else:
            status = "✅ Light Traffic"
            color = "green"

        alerts.append(f"📍 {name}: {status} — {speed} km/h, {vehicles} cars")

        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: {vehicles}<br>Status: {status}");"""

    layer = tile_layers[style]
    subdomains_str = f", subdomains: {layer['subdomains']}" if "subdomains" in layer else ""

    html = f"""
    <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([-1.935, 30.05], 13);
      L.tileLayer('{layer['url']}', {{
        attribution: '{layer['attribution']}',
        maxZoom: 19
        {subdomains_str}
      }}).addTo(map);
      L.control.zoom({{ position: 'topright' }}).addTo(map);
      {markers}
    </script>
    """

    return "\n".join(alerts), html

with gr.Blocks() as demo:
    gr.Markdown("## 🗺️ Traffic Map with Style Selector (Light, Dark, Satellite)")

    style_dropdown = gr.Dropdown(label="Hitamo Style ya Map", choices=list(tile_layers.keys()), value="Light")
    btn = gr.Button("🔁 Refresh Traffic Data")
    report = gr.Textbox(label="Traffic Report", lines=8)
    map_html = gr.HTML()

    btn.click(fn=simulate_map_style, inputs=style_dropdown, outputs=[report, map_html])

demo.launch()