Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,36 +1,55 @@
 import streamlit as st
 import pandas as pd
 from keplergl import KeplerGl
-import streamlit.components.v1 as components
-import os
+from streamlit.components.v1 import html
 
 st.set_page_config(layout="wide")
-st.title("📍 Dubai Footfall – Kepler.gl Map Viewer")
+st.title("📍 Dubai Footfall Visualization – Kepler.gl Map")
 
-# --- Load Footfall Data ---
-st.info("📦 Loading footfall data...")
+# --- Load Excel File ---
+st.info("📤 Loading footfall data...")
 try:
-    df = pd.read_excel("data/jj_with_footfall.xlsx")
+    df = pd.read_excel("jj_with_footfall.xlsx")
     df = df.dropna(subset=["latitude", "longitude"])
-    df = df.astype({"latitude": float, "longitude": float})
-    st.success(f"✅ Loaded {len(df)} footfall records.")
+    st.success(f"✅ Loaded {len(df)} footfall points.")
 except Exception as e:
-    st.error(f"❌ Failed to load footfall data: {e}")
+    st.error(f"❌ Failed to load data: {e}")
     st.stop()
 
-# --- Save & Render Kepler Map ---
-st.info("🗺️ Rendering Kepler.gl map...")
+# --- Convert to Kepler data format ---
 try:
-    # Kepler expects a dictionary {name: DataFrame}
-    kepler_map = KeplerGl(height=600, data={"Footfall": df})
+    config = {
+        "version": "v1",
+        "config": {
+            "visState": {
+                "layers": [{
+                    "type": "point",
+                    "config": {
+                        "dataId": "Footfall",
+                        "label": "Footfall Points",
+                        "color": [255, 0, 0],
+                        "columns": {"lat": "latitude", "lng": "longitude", "altitude": None},
+                        "isVisible": True,
+                        "visConfig": {
+                            "radius": 10,
+                            "opacity": 0.8,
+                            "colorRange": {
+                                "colors": ["#FF5733", "#FFBD33", "#75FF33"]
+                            }
+                        }
+                    }
+                }]
+            }
+        }
+    }
 
-    # Save the map to HTML
-    html_path = "kepler_map.html"
-    kepler_map.save_to_html(html_path)
+    # Save config and data
+    map_ = KeplerGl(data={"Footfall": df}, config=config)
+    map_.save_to_html(file_name="kepler_map.html", read_only=False)
+    st.success("✅ Kepler map ready. Rendering...")
 
-    # Load and display the HTML in Streamlit
-    with open(html_path, "r", encoding="utf-8") as f:
-        components.html(f.read(), height=650)
-    st.success("✅ Map rendered successfully.")
+    # Render inside Streamlit
+    with open("kepler_map.html", "r", encoding="utf-8") as f:
+        html(f.read(), height=700, width=1200)
 except Exception as e:
     st.error(f"❌ Failed to render Kepler map: {e}")