Spaces:

WaysAheadGlobal
/

Map-admin

Sleeping

App Files Files Community

WaysAheadGlobal commited on May 4, 2025

Commit

08c6b8e

verified ·

1 Parent(s): a45ca4a

Update src/streamlit_app.py

Browse files

Files changed (1) hide show

src/streamlit_app.py +39 -68

src/streamlit_app.py CHANGED Viewed

@@ -1,107 +1,78 @@
 import streamlit as st
 import streamlit.components.v1 as components
 import pandas as pd
-# Load Excel data
-df = pd.read_excel("data/jj_with_footfall.xlsx")  # Update path if needed
 st.set_page_config(layout="wide")
-st.title("🌍 CesiumJS Map – Drag Footfall Points (Dubai)")
-# Generate Cesium entities for footfall
-marker_js = ""
 for i, row in df.iterrows():
-    lat = row["latitude"]
-    lon = row["longitude"]
-    name = str(row["name"]).replace("'", "")
-    marker_js += f"""
-    const marker{i} = viewer.entities.add({{
-        name: "{name}",
-        position: Cesium.Cartesian3.fromDegrees({lon}, {lat}),
-        billboard: {{
-            image: 'https://cdn-icons-png.flaticon.com/512/854/854878.png',
-            width: 30,
-            height: 30
-        }}
-    }});
-    draggableEntities.push(marker{i});
-    """
-# Full HTML with JS logic
 html_code = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>CesiumJS Footfall Drag Demo</title>
     <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
     <link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
     <style>
         html, body, #cesiumContainer {{
             width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
         }}
-        .coordinates {{
-            position: absolute;
-            bottom: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.75);
-            color: #fff;
-            padding: 6px 12px;
-            font-family: sans-serif;
-            z-index: 1;
-        }}
     </style>
 </head>
 <body>
 <div id="cesiumContainer"></div>
-<div class="coordinates" id="coords">🧭 Drag any marker to get coordinates.</div>
 <script>
-    Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_TOKEN_HERE';
     const viewer = new Cesium.Viewer('cesiumContainer', {{
         terrainProvider: Cesium.createWorldTerrain()
     }});
-    viewer.camera.flyTo({{
-        destination: Cesium.Cartesian3.fromDegrees(55.2708, 25.2048, 15000)
-    }});
-    const draggableEntities = [];
-    {marker_js}
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-    let draggingEntity = null;
-    handler.setInputAction(function(click) {{
-        const picked = viewer.scene.pick(click.position);
-        if (Cesium.defined(picked) && draggableEntities.includes(picked.id)) {{
-            draggingEntity = picked.id;
-            viewer.scene.screenSpaceCameraController.enableRotate = false;
-        }}
-    }}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-    handler.setInputAction(function(movement) {{
-        if (draggingEntity) {{
-            const cartesian = viewer.camera.pickEllipsoid(movement.endPosition);
-            if (cartesian) {{
-                draggingEntity.position = cartesian;
-                const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-                const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
-                const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
-                document.getElementById("coords").innerText = `📍 Moved: Lon: ${{lon}}, Lat: ${{lat}}`;
             }}
-        }}
-    }}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-    handler.setInputAction(function() {{
-        draggingEntity = null;
-        viewer.scene.screenSpaceCameraController.enableRotate = true;
-    }}, Cesium.ScreenSpaceEventType.LEFT_UP);
 </script>
 </body>
 </html>
 """
-# Render the Cesium map
 components.html(html_code, height=700)

 import streamlit as st
 import streamlit.components.v1 as components
 import pandas as pd
+import json
+# Set up Streamlit page
 st.set_page_config(layout="wide")
+st.title("🌍 Dubai Footfall Visualizer – CesiumJS Draggable Map")
+# Load data
+st.info("📦 Loading footfall data...")
+df = pd.read_excel("data/jj_with_footfall.xlsx")
+df = df.dropna(subset=["longitude", "latitude"])
+# Convert to GeoJSON
+features = []
 for i, row in df.iterrows():
+    features.append({
+        "type": "Feature",
+        "geometry": {
+            "type": "Point",
+            "coordinates": [row["longitude"], row["latitude"]]
+        }
+    })
+geojson = {
+    "type": "FeatureCollection",
+    "features": features
+}
+geojson_str = json.dumps(geojson)
+# Cesium HTML
 html_code = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <title>CesiumJS Dynamic Points</title>
     <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
     <link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
     <style>
         html, body, #cesiumContainer {{
             width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
         }}
     </style>
 </head>
 <body>
 <div id="cesiumContainer"></div>
 <script>
+    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0M2VmOTcyMi0wZDIyLTRjMjktOTNlNi0zNjg2MmQyNTFjYTQiLCJpZCI6Mjk3Njk1LCJpYXQiOjE3NDU3NzgyMzh9.0FuHB-PidaNCTRT1sdcp20ufMJ5Z8DEEArhr47BOo4A';
     const viewer = new Cesium.Viewer('cesiumContainer', {{
         terrainProvider: Cesium.createWorldTerrain()
     }});
+    const data = {geojson_str};
+    data.features.forEach((feature, index) => {{
+        const coords = feature.geometry.coordinates;
+        viewer.entities.add({{
+            id: 'point_' + index,
+            position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1]),
+            billboard: {{
+                image: 'https://cdn-icons-png.flaticon.com/512/684/684908.png',
+                width: 32,
+                height: 32
             }}
+        }});
+    }});
+    viewer.zoomTo(viewer.entities);
 </script>
 </body>
 </html>
 """
 components.html(html_code, height=700)