Cloud

api/weather.php

@@ -0,0 +1,54 @@
+<?php
+require_once __DIR__ . '/../config.php';
+
+// Get parameters from the request
+$layer = $_GET['layer'] ?? 'clouds_new';
+$z = $_GET['z'] ?? 0;
+$x = $_GET['x'] ?? 0;
+$y = $_GET['y'] ?? 0;
+
+// Validate parameters (basic validation)
+if (!is_numeric($z) || !is_numeric($x) || !is_numeric($y)) {
+    header("HTTP/1.1 400 Bad Request");
+    echo "Invalid tile coordinates.";
+    exit;
+}
+
+// Construct the OpenWeatherMap API URL
+$apiKey = defined('OWM_API_KEY') ? OWM_API_KEY : '';
+if (empty($apiKey)) {
+    header("HTTP/1.1 500 Internal Server Error");
+    echo "API key is not configured.";
+    exit;
+}
+
+$url = "https://tile.openweathermap.org/map/{$layer}/{$z}/{$x}/{$y}.png?appid={$apiKey}";
+
+// Fetch the tile using cURL
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
+// Follow redirects, as OWM might use them
+curl_setopt($ch, CURLOPT_TIMEOUT, 20);
+// Set a reasonable timeout
+
+$tile_data = curl_exec($ch);
+$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+curl_close($ch);
+
+// Check for errors and serve the tile
+if ($http_code == 200 && !empty($tile_data)) {
+    header('Content-Type: image/png');
+    header('Content-Length: ' . strlen($tile_data));
+    echo $tile_data;
+} else {
+    // Return a transparent pixel or a specific error image if the tile is not found or an error occurs
+    header("HTTP/1.1 " . ($http_code !== 200 ? $http_code : 404));
+    // Create a 1x1 transparent PNG
+    $transparent_pixel = base64_decode('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
+    header('Content-Type: image/png');
+    echo $transparent_pixel;
+}
+exit;
+?>

assets/css/custom.css

@@ -109,3 +109,30 @@ html, body {
     bottom: 0;
     border: none; /* Remove the debug border */
 }
+
+#controls {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: rgba(42, 42, 42, 0.8);
+    color: #fff;
+    padding: 15px;
+    border-radius: 8px;
+    font-family: sans-serif;
+    z-index: 10;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+}
+
+.control-group h3 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid #555;
+    padding-bottom: 5px;
+}
+
+.control-group label {
+    display: block;
+    margin-bottom: 5px;
+    cursor: pointer;
+}

assets/js/main.js

@@ -5,7 +5,6 @@ function initializeGlobe() {
 
     try {
         console.log('Initializing Cesium Viewer');
-        // Initialize a Cesium Viewer with a map
         const viewer = new Cesium.Viewer('cesiumContainer', {
             imageryProvider: new Cesium.OpenStreetMapImageryProvider({
                 url : 'https://a.tile.openstreetmap.org/'
@@ -25,7 +24,19 @@ function initializeGlobe() {
         viewer.scene.globe.depthTestAgainstTerrain = false;
         console.log('Cesium Viewer initialized successfully');
 
+        // Add Weather Layer
+        const weatherImageryProvider = new Cesium.UrlTemplateImageryProvider({
+            url: `api/weather.php?layer=clouds_new&z={z}&x={x}&y={y}`,
+            credit: 'Weather data © OpenWeatherMap'
+        });
+        const weatherLayer = viewer.imageryLayers.addImageryProvider(weatherImageryProvider);
+        weatherLayer.alpha = 0.6;
 
+        // UI Controls
+        const weatherCheckbox = document.getElementById('weatherLayerCheckbox');
+        weatherCheckbox.addEventListener('change', function() {
+            weatherLayer.show = this.checked;
+        });
 
         // Function to load wildfire data
         const loadWildfireData = async () => {
@@ -50,66 +61,11 @@ function initializeGlobe() {
 
             } catch (error) {
                 console.error('Error loading wildfire data:', error);
-                // This catch block prevents the globe from crashing if the API fails.
-            }
-        };
-
-        // Function to load hurricane data
-        const loadHurricaneData = async () => {
-            try {
-                console.log('Fetching hurricane data...');
-                // Use KmlDataSource for the KML data from the hurricanes API
-                const hurricaneDataSource = await Cesium.KmlDataSource.load('api/hurricanes.php', {
-                    camera: viewer.camera,
-                    canvas: viewer.canvas
-                });
-                await viewer.dataSources.add(hurricaneDataSource);
-                console.log('Hurricane data source added to viewer.');
-            } catch (error) {
-                console.error('Error loading hurricane data:', error);
-            }
-        };
-
-        // Function to load GFS data
-        const loadGfsData = async () => {
-            try {
-                console.log('Fetching GFS data...');
-                const response = await fetch('api/gfs.php');
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const geojsonData = await response.json();
-                console.log('GFS data fetched successfully.');
-
-                const gfsDataSource = new Cesium.GeoJsonDataSource();
-                await gfsDataSource.load(geojsonData, {
-                    stroke: Cesium.Color.BLUE.withAlpha(0.3),
-                    fill: Cesium.Color.BLUE.withAlpha(0.3),
-                    strokeWidth: 1
-                });
-
-                // Simple heatmap-like styling for GFS points
-                gfsDataSource.entities.values.forEach(entity => {
-                    const value = entity.properties.value.getValue();
-                    const color = Cesium.Color.fromHsl(0.6 - (value - 100000) / 2000 * 0.5, 1.0, 0.5).withAlpha(0.5);
-                    entity.point = new Cesium.PointGraphics({
-                        color: color,
-                        pixelSize: 5
-                    });
-                });
-
-                viewer.dataSources.add(gfsDataSource);
-                console.log('GFS data source added to viewer.');
-
-            } catch (error) {
-                console.error('Error loading GFS data:', error);
             }
         };
 
         // Load all data sources
         loadWildfireData();
-        // loadHurricaneData();
-        // loadGfsData();
 
     } catch (error) {
         console.error('A critical error occurred while initializing the Cesium viewer:', error);

config.php

@@ -0,0 +1,6 @@
+<?php
+// Main configuration file
+
+// OpenWeatherMap API Key
+define('OWM_API_KEY', '1dfc5acd07d74b93a2ebdcccf3181cab');
+?>

index.php

@@ -1,3 +1,4 @@
+<?php require_once 'config.php'; ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,6 +10,14 @@
 </head>
 <body>
     <div id="cesiumContainer"></div>
+    <div id="controls">
+        <div class="control-group">
+            <h3>Layers</h3>
+            <label>
+                <input type="checkbox" id="weatherLayerCheckbox" checked> Weather
+            </label>
+        </div>
+    </div>
     <script src="assets/cesium/Build/Cesium/Cesium.js"></script>
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>