Spaces:

WaysAheadGlobal
/

Map-admin

Sleeping

App Files Files Community

WaysAheadGlobal commited on May 4, 2025

Commit

17785c0

verified ·

1 Parent(s): 51d6e55

Update src/streamlit_app.py

Browse files

Files changed (1) hide show

src/streamlit_app.py +60 -66

src/streamlit_app.py CHANGED Viewed

@@ -2,88 +2,82 @@ import streamlit as st
 import streamlit.components.v1 as components
 st.set_page_config(layout="wide")
-st.title("🌍 Streamlit with CesiumJS – Draggable Marker")
-# HTML and JavaScript code for CesiumJS
-html_code = """
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>CesiumJS Draggable Marker</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(42, 42, 42, 0.8);
-            padding: 5px;
-            color: #fff;
-            font-family: sans-serif;
-            z-index: 1;
-        }
     </style>
-</head>
-<body>
-<div id="cesiumContainer"></div>
-<div class="coordinates" id="coords">Drag the marker to see coordinates here.</div>
-<script>
-    // Initialize the Cesium Viewer
-    const viewer = new Cesium.Viewer('cesiumContainer', {
         terrainProvider: Cesium.createWorldTerrain()
-    });
-    // Add a draggable marker (billboard)
-    const marker = viewer.entities.add({
         position: Cesium.Cartesian3.fromDegrees(55.2708, 25.2048),
-        billboard: {
-            image: 'https://cdn-icons-png.flaticon.com/512/684/684908.png',
-            width: 32,
-            height: 32
         }
-    });
-    // Variables to handle dragging
-    let isDragging = false;
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-    // Mouse down event
-    handler.setInputAction(function(click) {
-        const pickedObject = viewer.scene.pick(click.position);
-        if (Cesium.defined(pickedObject) && pickedObject.id === marker) {
-            isDragging = true;
-            viewer.scene.screenSpaceCameraController.enableRotate = false;
         }
-    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-    // Mouse move event
-    handler.setInputAction(function(movement) {
-        if (isDragging) {
-            const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
-            if (cartesian) {
-                marker.position = cartesian;
-                const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-                const longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
-                const latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
-                document.getElementById('coords').innerText = `Longitude: ${longitude}, Latitude: ${latitude}`;
-            }
         }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-    // Mouse up event
-    handler.setInputAction(function() {
-        isDragging = false;
         viewer.scene.screenSpaceCameraController.enableRotate = true;
-    }, Cesium.ScreenSpaceEventType.LEFT_UP);
-</script>
-</body>
 </html>
 """
-# Embed the HTML and JavaScript into Streamlit
-components.html(html_code, height=700)

 import streamlit.components.v1 as components
 st.set_page_config(layout="wide")
+st.title("🌍 Dubai 3D Cesium Map with Drag-and-Drop Marker (Ion Enabled)")
+cesium_html = """
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Cesium.js"></script>
+    <link href="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
     <style>
+      html, body, #cesiumContainer {
+        width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
+      }
+      #dragTip {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 100;
+        background: rgba(0,0,0,0.5);
+        color: white;
+        padding: 10px;
+        font-size: 14px;
+      }
     </style>
+  </head>
+  <body>
+    <div id="cesiumContainer"></div>
+    <div id="dragTip">🖱️ Drag the red marker to reposition</div>
+    <script>
+      // Set Ion access token
+      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0M2VmOTcyMi0wZDIyLTRjMjktOTNlNi0zNjg2MmQyNTFjYTQiLCJpZCI6Mjk3Njk1LCJpYXQiOjE3NDU3NzgyMzh9.0FuHB-PidaNCTRT1sdcp20ufMJ5Z8DEEArhr47BOo4A';
+      const viewer = new Cesium.Viewer("cesiumContainer", {
         terrainProvider: Cesium.createWorldTerrain()
+      });
+      viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(55.2708, 25.2048, 15000)
+      });
+      const redPin = viewer.entities.add({
+        name: "Draggable Marker",
         position: Cesium.Cartesian3.fromDegrees(55.2708, 25.2048),
+        point: {
+          pixelSize: 15,
+          color: Cesium.Color.RED,
         }
+      });
+      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      let pickedEntity;
+      handler.setInputAction(function (click) {
+        const picked = viewer.scene.pick(click.position);
+        if (Cesium.defined(picked) && picked.id === redPin) {
+          pickedEntity = picked.id;
+          viewer.scene.screenSpaceCameraController.enableRotate = false;
         }
+      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+      handler.setInputAction(function (movement) {
+        if (pickedEntity) {
+          const cartesian = viewer.camera.pickEllipsoid(movement.endPosition);
+          if (cartesian) {
+            pickedEntity.position = cartesian;
+          }
         }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      handler.setInputAction(function () {
+        pickedEntity = null;
         viewer.scene.screenSpaceCameraController.enableRotate = true;
+      }, Cesium.ScreenSpaceEventType.LEFT_UP);
+    </script>
+  </body>
 </html>
 """
+components.html(cesium_html, height=800)