diff --git a/assets/js/main.js b/assets/js/main.js
index afa6f63..7acf020 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,2 +1,119 @@
-// Initialize the Cesium Viewer in the 'cesiumContainer' DOM element.
-const viewer = new Cesium.Viewer('cesiumContainer');
\ No newline at end of file
+document.addEventListener('DOMContentLoaded', function () {
+    console.log('DOM fully loaded and parsed');
+    // Set your Cesium Ion default access token
+    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTY0ZTQ1Yi0zYmYxLTQ5MjItODdkOS05ZDY0ZGRjYjQwM2QiLCJpZCI6MjA5ODgwLCJpYXQiOjE3MTM4MTY3OTB9.A-3Jt_G0K81s-A-XLpT2bn5aY2H3s-n2p-2jYf-i-g';
+
+    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/'
+            }),
+            animation: false,
+            baseLayerPicker: false,
+            fullscreenButton: false,
+            geocoder: false,
+            homeButton: false,
+            infoBox: true,
+            sceneModePicker: false,
+            selectionIndicator: false,
+            timeline: false,
+            navigationHelpButton: false,
+            scene3DOnly: true
+        });
+        viewer.scene.globe.depthTestAgainstTerrain = false;
+        console.log('Cesium Viewer initialized successfully');
+
+        
+
+        // Function to load wildfire data
+        const loadWildfireData = async () => {
+            try {
+                console.log('Fetching wildfire data...');
+                const response = await fetch('api/wildfires.php');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const geojsonData = await response.json();
+                console.log('Wildfire data fetched successfully.');
+
+                const wildfireDataSource = new Cesium.GeoJsonDataSource();
+                await wildfireDataSource.load(geojsonData, {
+                    stroke: Cesium.Color.RED,
+                    fill: Cesium.Color.RED.withAlpha(0.5),
+                    strokeWidth: 2
+                });
+                
+                viewer.dataSources.add(wildfireDataSource);
+                console.log('Wildfire data source added to viewer.');
+
+            } 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);
+        const cesiumContainer = document.getElementById('cesiumContainer');
+        cesiumContainer.innerHTML = '<div class="alert alert-danger">Error: Could not load the 3D scene. Please check the console for details.</div>';
+    }
+});
\ No newline at end of file