Spaces:

WaysAheadGlobal
/

Map-admin

Sleeping

App Files Files Community

WaysAheadGlobal commited on May 4, 2025

Commit

2059ee0

verified ·

1 Parent(s): 17785c0

Update src/streamlit_app.py

Browse files

Files changed (1) hide show

src/streamlit_app.py +64 -57

src/streamlit_app.py CHANGED Viewed

@@ -2,82 +2,89 @@ import streamlit as st
 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)

 import streamlit.components.v1 as components
 st.set_page_config(layout="wide")
+st.title("🌍 Streamlit with CesiumJS – Draggable Marker + Coordinates")
+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.</div>
+<script>
+    // Set Cesium Ion Access Token
+    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0M2VmOTcyMi0wZDIyLTRjMjktOTNlNi0zNjg2MmQyNTFjYTQiLCJpZCI6Mjk3Njk1LCJpYXQiOjE3NDU3NzgyMzh9.0FuHB-PidaNCTRT1sdcp20ufMJ5Z8DEEArhr47BOo4A';
+    const viewer = new Cesium.Viewer('cesiumContainer', {
         terrainProvider: Cesium.createWorldTerrain()
+    });
+    // Center on Dubai
+    viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(55.2708, 25.2048, 15000)
+    });
+    // Add a draggable marker
+    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
         }
+    });
+    let isDragging = false;
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    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);
+    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);
+    handler.setInputAction(function() {
+        isDragging = false;
         viewer.scene.screenSpaceCameraController.enableRotate = true;
+    }, Cesium.ScreenSpaceEventType.LEFT_UP);
+</script>
+</body>
 </html>
 """
+components.html(html_code, height=700)