Update app.py

app.py

@@ -8,7 +8,23 @@ locations = {
     "School Zone": {"lat": -1.93, "lon": 30.03}
 }
 
-def simulate_map_google_style():
+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 = []
 
@@ -34,15 +50,19 @@ def simulate_map_google_style():
             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('https://{{s}}.basemaps.cartocdn.com/light_all/{{z}}/{{x}}/{{y}}.png', {{
-        attribution: '&copy; <a href="https://carto.com/">CartoDB</a> contributors',
+      L.tileLayer('{layer['url']}', {{
+        attribution: '{layer['attribution']}',
         maxZoom: 19
+        {subdomains_str}
       }}).addTo(map);
       L.control.zoom({{ position: 'topright' }}).addTo(map);
       {markers}
@@ -52,12 +72,14 @@ def simulate_map_google_style():
     return "\n".join(alerts), html
 
 with gr.Blocks() as demo:
-    gr.Markdown("## 🗺️ Google-Like Traffic Map with Leaflet")
+    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_google_style, inputs=[], outputs=[report, map_html])
+    btn.click(fn=simulate_map_style, inputs=style_dropdown, outputs=[report, map_html])
 
 demo.launch()
+