Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,264 +1,32 @@
 import streamlit as st
 import pandas as pd
-import numpy as np
-import osmnx as ox
-import folium
-from streamlit_folium import st_folium
-import os
-import streamlit as st
-import pandas as pd
-import osmnx as ox
-from streamlit_folium import st_folium
-import folium
-ox.settings.use_cache = False
-st.set_page_config(layout="wide")
-st.title("🧠 Dubai Digital Twin – Interactive 2D Map with Folium")
-
-# --- Sidebar Layer Controls ---
-st.sidebar.title("🗺️ Layer Toggles")
-show_malls = st.sidebar.checkbox("Show Malls", True)
-show_stores = st.sidebar.checkbox("Show Stores in Malls", True)
-show_footfall = st.sidebar.checkbox("Show Footfall", True)
-show_parks = st.sidebar.checkbox("Show Parks", True)
-show_metro_lines = st.sidebar.checkbox("Show Metro Lines", True)
-show_metro_stations = st.sidebar.checkbox("Show Metro Stations", True)
-
-# --- Legend ---
-st.sidebar.markdown("---")
-st.sidebar.markdown("### 📌 Legend")
-st.sidebar.markdown("- 🛍️ Malls: Blue")
-st.sidebar.markdown("- 🏬 Stores: Purple")
-st.sidebar.markdown("- 🌳 Parks: Green")
-st.sidebar.markdown("- 📊 Footfall: Red")
-st.sidebar.markdown("- 🚇 Metro Lines: Blue Line")
-st.sidebar.markdown("- 🚉 Metro Stations: Yellow Dot")
-
-# --- Load Dubai Boundary ---
-st.subheader("🌍 Getting Dubai boundary...")
-try:
-    dubai = ox.geocode_to_gdf("Dubai, United Arab Emirates")
-    dubai_polygon = dubai.geometry.values[0]
-    bounds = dubai_polygon.bounds
-    bbox = (bounds[0], bounds[1], bounds[2], bounds[3])
-    st.success("✅ Dubai boundary fetched.")
-except Exception as e:
-    st.error(f"❌ Boundary fetch failed: {e}")
-    st.stop()
-
-# --- Data Fetch with Status ---
-try:
-    with st.spinner("🛍️ Loading malls..."):
-        malls = ox.features_from_bbox(bbox, tags={"shop": "mall"})
-
-    with st.spinner("🏬 Loading stores..."):
-        stores = ox.features_from_bbox(bbox, tags={"shop": True})
-
-    with st.spinner("🌳 Loading parks..."):
-        parks = ox.features_from_bbox(bbox, tags={"leisure": "park"})
-
-    with st.spinner("🚉 Loading metro stations..."):
-        metro_stations = ox.features_from_bbox(bbox, tags={"railway": "station"})
-
-    with st.spinner("🚇 Loading metro lines..."):
-        metro_lines = ox.features_from_bbox(bbox, tags={"railway": ["subway", "light_rail"]})
-
-    with st.spinner("📊 Loading footfall data..."):
-        footfall = pd.read_excel("data/jj_with_footfall.xlsx")
-        footfall.dropna(subset=["latitude", "longitude"], inplace=True)
-
-    st.success("✅ All features loaded.")
-except Exception as e:
-    st.warning(f"⚠️ Data load failed: {e}")
-
-# --- Create Map ---
-st.subheader("🗺️ Dubai Map (2D - Folium)")
-fmap = folium.Map(location=[25.2048, 55.2708], zoom_start=12)
-
-# --- Malls ---
-if show_malls:
-    for _, row in malls.iterrows():
-        if row.geometry.geom_type == "Point":
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                popup=f"Mall: {row.get('name', 'Unnamed')}",
-                tooltip=row.get('name', 'Mall'),
-                icon=folium.Icon(color="blue", icon="shopping-cart", prefix="fa")
-            ).add_to(fmap)
-
-# --- Stores ---
-if show_stores:
-    for _, row in stores.iterrows():
-        if row.geometry.geom_type == "Point":
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                popup=f"Store: {row.get('name', 'Unnamed Store')}",
-                tooltip=row.get('name', 'Store'),
-                icon=folium.Icon(color="purple", icon="shopping-bag", prefix="fa")
-            ).add_to(fmap)
-
-# --- Parks ---
-if show_parks:
-    for _, row in parks.iterrows():
-        if hasattr(row.geometry, 'y') and hasattr(row.geometry, 'x'):
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                popup=f"Park: {row.get('name', 'Unnamed')}",
-                tooltip=row.get('name', 'Park'),
-                icon=folium.Icon(color="green", icon="tree", prefix="fa")
-            ).add_to(fmap)
-
-# --- Metro Stations ---
-if show_metro_stations:
-    for _, row in metro_stations.iterrows():
-        if hasattr(row.geometry, 'y') and hasattr(row.geometry, 'x'):
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                popup=f"Metro Station: {row.get('name', 'Unnamed')}",
-                tooltip=row.get('name', 'Metro'),
-                icon=folium.Icon(color="orange", icon="train", prefix="fa")
-            ).add_to(fmap)
-
-# --- Metro Lines ---
-if show_metro_lines:
-    for _, row in metro_lines.iterrows():
-        if row.geometry.geom_type == "LineString":
-            folium.PolyLine(
-                locations=[(y, x) for x, y in row.geometry.coords],
-                color="blue",
-                weight=4,
-                opacity=0.7
-            ).add_to(fmap)
-
-# --- Footfall ---
-if show_footfall:
-    for idx, row in footfall.iterrows():
-        folium.Marker(
-            location=[row["latitude"], row["longitude"]],
-            popup=f"Footfall Point {idx}",
-            tooltip=f"Footfall {idx}",
-            icon=folium.Icon(color="red", icon="circle", prefix="fa")
-        ).add_to(fmap)
-
-# --- Show map ---
-st_folium(fmap, width=1200, height=700)
+from keplergl import KeplerGl
+import streamlit.components.v1 as components
 
 st.set_page_config(layout="wide")
-st.title("🧠 Dubai Digital Twin – Interactive 2D Map with Folium")
-
-# --- Sidebar Layer Controls ---
-st.sidebar.title("🗺️ Layer Toggles")
-show_malls = st.sidebar.checkbox("Show Malls", True)
-show_stores = st.sidebar.checkbox("Show Stores in Malls", True)
-show_footfall = st.sidebar.checkbox("Show Footfall", True)
-show_parks = st.sidebar.checkbox("Show Parks", True)
-show_metro_lines = st.sidebar.checkbox("Show Metro Lines", True)
-show_metro_stations = st.sidebar.checkbox("Show Metro Stations", True)
-
-# --- Legend ---
-st.sidebar.markdown("---")
-st.sidebar.markdown("### 📌 Legend")
-st.sidebar.markdown("- 🏬 Malls: Blue")
-st.sidebar.markdown("- 🛍️ Stores: Purple")
-st.sidebar.markdown("- 🌳 Parks: Green")
-st.sidebar.markdown("- 📊 Footfall: Red (Draggable)")
-st.sidebar.markdown("- 🚇 Metro Lines: Blue Line")
-st.sidebar.markdown("- 🚉 Metro Stations: Yellow Dot")
+st.title("📍 Dubai Footfall – Kepler.gl Interactive Map")
 
-# --- Get Dubai Boundary ---
-st.subheader("🌍 Getting Dubai boundary...")
+# --- Load Data ---
+st.info("📦 Loading footfall data...")
 try:
-    dubai = ox.geocode_to_gdf("Dubai, United Arab Emirates")
-    dubai_polygon = dubai.geometry.values[0]
-    bounds = dubai_polygon.bounds
-    west, south, east, north = bounds[0], bounds[1], bounds[2], bounds[3]
-    bbox = (west, south, east, north)
-    st.success("✅ Dubai boundary fetched.")
+    df = pd.read_excel("data/jj_with_footfall.xlsx")
+    df = df.dropna(subset=["latitude", "longitude"])
+    df = df.astype({"latitude": float, "longitude": float})
+    df = df[["latitude", "longitude"]]
+    st.success(f"✅ Loaded {len(df)} footfall records.")
 except Exception as e:
-    st.error(f"❌ Boundary fetch failed: {e}")
+    st.error(f"❌ Failed to load footfall data: {e}")
     st.stop()
 
-# --- Load Data ---
+# --- Create Kepler Map ---
+st.info("🗺️ Rendering map...")
 try:
-    malls = ox.features_from_bbox(bbox, tags={"shop": "mall"})
-    parks = ox.features_from_bbox(bbox, tags={"leisure": "park"})
-    metro_stations = ox.features_from_bbox(bbox, tags={"railway": "station"})
-    metro_lines = ox.features_from_bbox(bbox, tags={"railway": ["subway", "light_rail"]})
-    stores = ox.features_from_bbox(bbox, tags={"shop": True})
-
-    footfall = pd.read_excel("data/jj_with_footfall.xlsx")
-    footfall.dropna(subset=["latitude", "longitude"], inplace=True)
+    map_ = KeplerGl(height=600)
+    map_.add_data(data=df, name="Dubai Footfall")
+    map_.save_to_html("kepler_output.html")
+    with open("kepler_output.html", "r", encoding="utf-8") as f:
+        html = f.read()
+    components.html(html, height=650)
+    st.success("✅ Map rendered successfully.")
 except Exception as e:
-    st.warning(f"⚠️ Data load failed: {e}")
-    footfall = pd.DataFrame(columns=["latitude", "longitude"])
-
-# --- Render Folium Map ---
-st.subheader("🗺️ Dubai Map (2D - Folium)")
-fmap = folium.Map(location=[25.2048, 55.2708], zoom_start=12)
-
-# Malls
-if show_malls:
-    for _, row in malls.iterrows():
-        if row.geometry.geom_type == "Point":
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                tooltip=row.get('name', 'Mall'),
-                icon=folium.Icon(color="blue", icon="shopping-cart", prefix="fa")
-            ).add_to(fmap)
-
-# Stores
-if show_stores:
-    for _, row in stores.iterrows():
-        if row.geometry.geom_type == "Point":
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                tooltip=row.get('name', 'Store'),
-                icon=folium.Icon(color="purple", icon="shopping-bag", prefix="fa")
-            ).add_to(fmap)
-
-# Parks
-if show_parks:
-    for _, row in parks.iterrows():
-        if hasattr(row.geometry, 'y') and hasattr(row.geometry, 'x'):
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                tooltip=row.get('name', 'Park'),
-                icon=folium.Icon(color="green", icon="tree", prefix="fa")
-            ).add_to(fmap)
-
-# Metro Stations
-if show_metro_stations:
-    for _, row in metro_stations.iterrows():
-        if hasattr(row.geometry, 'y') and hasattr(row.geometry, 'x'):
-            folium.Marker(
-                location=[row.geometry.y, row.geometry.x],
-                tooltip=row.get('name', 'Metro'),
-                icon=folium.Icon(color="orange", icon="train", prefix="fa")
-            ).add_to(fmap)
-
-# Metro Lines
-if show_metro_lines:
-    for _, row in metro_lines.iterrows():
-        if row.geometry.geom_type == "LineString":
-            folium.PolyLine(
-                locations=[(y, x) for x, y in row.geometry.coords],
-                color="blue",
-                weight=4,
-                opacity=0.7
-            ).add_to(fmap)
-
-# Footfall - Draggable
-if show_footfall:
-    for idx, row in footfall.iterrows():
-        folium.Marker(
-            location=[row["latitude"], row["longitude"]],
-            tooltip=f"Footfall {idx}",
-            draggable=True,
-            icon=folium.Icon(color="red", icon="circle", prefix="fa")
-        ).add_to(fmap)
-
-# Render the map
-result = st_folium(fmap, width=1200, height=700)
-
-# Option to refresh
-if st.sidebar.button("🔄 Refresh Map"):
-    st.rerun()
+    st.error(f"❌ Failed to render Kepler map: {e}")