Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Interactive Globe with Sea Level</title> | |
| <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css"> | |
| <script src="https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| background: #1a1a1a; | |
| } | |
| #cesiumContainer { | |
| width: 100%; | |
| height: 80vh; | |
| position: relative; | |
| border: 2px solid #444; | |
| } | |
| #sliderContainer { | |
| position: absolute; | |
| top: 10px; | |
| right: 150px; | |
| z-index: 1000; | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 15px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| #seaLevelSlider { | |
| width: 200px; | |
| cursor: pointer; | |
| } | |
| #seaLevelLabel { | |
| font-size: 14px; | |
| margin-top: 10px; | |
| color: #333; | |
| } | |
| .cesium-viewer-toolbar { | |
| display: block ; | |
| right: 10px; | |
| top: 10px; | |
| } | |
| .cesium-viewer-navigationContainer { | |
| display: block ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cesiumContainer"></div> | |
| <div id="sliderContainer"> | |
| <input type="range" id="seaLevelSlider" min="0" max="100" value="0" step="1"> | |
| <div id="seaLevelLabel">Sea Level: 0m</div> | |
| </div> | |
| <script> | |
| // Set Cesium token from Flask template variable | |
| Cesium.Ion.defaultAccessToken = "{{ cesium_token | safe }}"; | |
| // Async function to initialize Cesium Viewer | |
| async function initializeViewer() { | |
| try { | |
| // Load Cesium World Terrain | |
| const terrainProvider = await Cesium.createWorldTerrainAsync({ | |
| requestWaterMask: true, | |
| requestVertexNormals: true | |
| }); | |
| // Initialize Cesium Viewer | |
| const viewer = new Cesium.Viewer('cesiumContainer', { | |
| terrainProvider: terrainProvider, | |
| baseLayerPicker: false, | |
| geocoder: false, | |
| animation: false, | |
| timeline: false, | |
| sceneModePicker: true, | |
| navigationHelpButton: true, | |
| fullscreenButton: true | |
| }); | |
| // Add a semi-transparent water plane | |
| const waterPlane = viewer.entities.add({ | |
| polygon: { | |
| hierarchy: Cesium.Cartesian3.fromDegreesArray([ | |
| -180, -90, | |
| 180, -90, | |
| 180, 90, | |
| -180, 90 | |
| ]), | |
| height: 0, // Start at current sea level (0m) | |
| material: Cesium.Color.BLUE, //.withAlpha(0.7), // Increased opacity for visibility | |
| outline: true, | |
| outlineColor: Cesium.Color.WHITE, | |
| outlineWidth: 2 | |
| } | |
| }); | |
| // Ensure terrain depth testing is enabled | |
| viewer.scene.globe.depthTestAgainstTerrain = true; | |
| // Slider interaction | |
| const slider = document.getElementById('seaLevelSlider'); | |
| const label = document.getElementById('seaLevelLabel'); | |
| slider.addEventListener('input', function() { | |
| const seaLevel = parseFloat(slider.value); | |
| // Update water plane height using a Property | |
| waterPlane.polygon.height = new Cesium.ConstantProperty(seaLevel); | |
| // Update label | |
| label.textContent = `Sea Level: ${seaLevel}m`; | |
| // Debug: Log the sea level to confirm updates | |
| console.log(`Sea Level updated to: ${seaLevel}m`); | |
| console.log(waterPlane.polygon.height.getValue()) | |
| }); | |
| // Set initial view (global view) | |
| viewer.camera.setView({ | |
| destination: Cesium.Cartesian3.fromDegrees(0, 0, 10000000), | |
| orientation: { | |
| heading: Cesium.Math.toRadians(0), | |
| pitch: Cesium.Math.toRadians(-90) | |
| } | |
| }); | |
| // Zoom to a specific area to make sea level rise more noticeable (e.g., low-lying coastal area) | |
| viewer.camera.flyTo({ | |
| destination: Cesium.Cartesian3.fromDegrees(-80, 25, 50000), // Near Florida, a low-lying area | |
| orientation: { | |
| heading: Cesium.Math.toRadians(0), | |
| pitch: Cesium.Math.toRadians(-45) | |
| }, | |
| duration: 3 | |
| }); | |
| } catch (error) { | |
| console.error('Failed to initialize viewer:', error); | |
| document.getElementById('cesiumContainer').innerHTML = | |
| '<div style="color: red; text-align: center; padding: 20px;">Error loading terrain. Please check CESIUM_TOKEN and try again.</div>'; | |
| } | |
| } | |
| // Call the async initialization function | |
| initializeViewer(); | |
| </script> | |
| </body> | |
| </html> |