Update app.py

app.py

@@ -164,119 +164,138 @@ class DataCollector:
 
         
 def create_3d_visualization(earthquake_data=None, weather_data=None):
-    """Create an interactive 3D visualization using Three.js"""
+    """Create an interactive 3D visualization of Pakistan"""
     threejs_html = """
-    <div id="visualizationContainer" style="width: 100%; height: 600px;"></div>
+    <div id="visualizationContainer" style="width: 100%; height: 600px;">
+        <div style="position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 5px;">
+            <h3 style="margin: 0;">Pakistan Terrain Map</h3>
+            <p style="margin: 5px 0;">🔴 Cities | 🟡 Earthquake Events</p>
+        </div>
+    </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
     <script>
-        // Set up scene
         const container = document.getElementById('visualizationContainer');
         const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0xc6e6ff);  // Light blue sky
         const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
-        const renderer = new THREE.WebGLRenderer();
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(container.clientWidth, container.clientHeight);
         container.appendChild(renderer.domElement);
 
-        // Add terrain
-        const terrainGeometry = new THREE.PlaneGeometry(100, 100, 50, 50);
-        const terrainMaterial = new THREE.MeshPhongMaterial({
-            color: 0x3d9970,
-            wireframe: false,
-            flatShading: true
+        // Pakistan outline coordinates (simplified)
+        const pakistanOutline = [
+            [75.3, 35.5], [72.8, 36.5], [71.2, 34.7], [69.5, 34.0],
+            [66.8, 31.2], [63.2, 26.8], [61.5, 25.0], [63.5, 23.5],
+            [66.7, 24.5], [67.8, 24.8], [68.9, 27.0], [70.5, 28.5],
+            [72.0, 30.0], [74.0, 32.5], [75.3, 35.5]
+        ];
+
+        // Create Pakistan terrain
+        const shape = new THREE.Shape();
+        pakistanOutline.forEach((point, index) => {
+            if (index === 0) shape.moveTo(point[0] - 67, point[1] - 30);
+            else shape.lineTo(point[0] - 67, point[1] - 30);
         });
-        const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
-        
-        // Add random terrain elevation
-        const vertices = terrainGeometry.attributes.position.array;
-        for (let i = 0; i < vertices.length; i += 3) {
-            vertices[i + 2] = Math.random() * 10;
-        }
-        terrainGeometry.computeVertexNormals();
-        scene.add(terrain);
 
-        // Add lighting
-        const ambientLight = new THREE.AmbientLight(0x404040);
-        scene.add(ambientLight);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-        directionalLight.position.set(1, 1, 1);
-        scene.add(directionalLight);
+        const geometry = new THREE.ExtrudeGeometry(shape, {
+            depth: 2,
+            bevelEnabled: true,
+            bevelSegments: 2,
+            steps: 2,
+            bevelSize: 0.3,
+            bevelThickness: 0.3
+        });
 
-        // Add cities as markers
+        const material = new THREE.MeshPhongMaterial({
+            color: 0x4CAF50,
+            flatShading: true,
+            side: THREE.DoubleSide
+        });
+
+        const pakistan = new THREE.Mesh(geometry, material);
+        scene.add(pakistan);
+
+        // Add major cities
         const cities = {
-            'Islamabad': {lat: 33.7294, lon: 73.0931},
-            'Karachi': {lat: 24.8607, lon: 67.0011},
-            'Lahore': {lat: 31.5204, lon: 74.3587}
+            'Islamabad': [73.0931, 33.7294],
+            'Karachi': [67.0011, 24.8607],
+            'Lahore': [74.3587, 31.5204],
+            'Peshawar': [71.5249, 34.0151],
+            'Quetta': [66.9750, 30.1798]
         };
 
         Object.entries(cities).forEach(([name, coords]) => {
-            const markerGeometry = new THREE.SphereGeometry(1, 32, 32);
-            const markerMaterial = new THREE.MeshPhongMaterial({color: 0xff0000});
-            const marker = new THREE.Mesh(markerGeometry, markerMaterial);
-            
-            // Convert lat/lon to scene coordinates (simplified)
-            const x = (coords.lon - 67) * 2;
-            const y = (coords.lat - 30) * 2;
-            marker.position.set(x, y, 5);
-            scene.add(marker);
-        });
+            const cityMarker = new THREE.Mesh(
+                new THREE.SphereGeometry(0.3, 32, 32),
+                new THREE.MeshPhongMaterial({ color: 0xff0000 })
+            );
+            cityMarker.position.set(coords[0] - 67, coords[1] - 30, 2.5);
+            scene.add(cityMarker);
 
-        // Add earthquake data if available
+            // Add city label
+            const div = document.createElement('div');
+            div.className = 'label';
+            div.textContent = name;
+            div.style.color = 'black';
+            div.style.position = 'absolute';
+            div.style.padding = '2px';
+            div.style.backgroundColor = 'rgba(255,255,255,0.7)';
+            div.style.borderRadius = '3px';
+            container.appendChild(div);
+        });
         """
-    
+
     if earthquake_data:
         threejs_html += """
+        // Add earthquake markers
         const earthquakes = """ + json.dumps(earthquake_data['features']) + """;
         earthquakes.forEach(quake => {
             const coords = quake.geometry.coordinates;
             const magnitude = quake.properties.mag;
             
-            const quakeGeometry = new THREE.SphereGeometry(magnitude * 0.5, 32, 32);
-            const quakeMaterial = new THREE.MeshPhongMaterial({
-                color: 0xff0000,
-                opacity: 0.7,
-                transparent: true
-            });
-            const quakeMesh = new THREE.Mesh(quakeGeometry, quakeMaterial);
-            
-            // Convert coordinates to scene position
-            const x = (coords[0] - 67) * 2;
-            const y = (coords[1] - 30) * 2;
-            const z = 5 + magnitude;
-            quakeMesh.position.set(x, y, z);
-            
-            scene.add(quakeMesh);
+            const quakeMarker = new THREE.Mesh(
+                new THREE.SphereGeometry(magnitude * 0.2, 32, 32),
+                new THREE.MeshPhongMaterial({
+                    color: 0xFFD700,
+                    opacity: 0.8,
+                    transparent: true
+                })
+            );
+            quakeMarker.position.set(coords[0] - 67, coords[1] - 30, 2.5);
+            scene.add(quakeMarker);
         });
         """
 
     threejs_html += """
-        // Camera position
-        camera.position.z = 50;
-        camera.position.y = 30;
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0x404040, 1);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(5, 5, 5);
+        scene.add(directionalLight);
+
+        // Camera
+        camera.position.set(0, 0, 20);
         camera.lookAt(scene.position);
 
-        // Add controls
+        // Controls
         const controls = {
-            rotateSpeed: 0.01,
-            elevationScale: 1.0
+            rotation: true,
+            elevation: 1.0
         };
 
-        const gui = new dat.GUI();
-        gui.add(controls, 'rotateSpeed', 0, 0.05).name('Rotation Speed');
-        gui.add(controls, 'elevationScale', 0, 2).name('Elevation Scale');
+        const gui = new dat.GUI({ autoPlace: false });
+        container.appendChild(gui.domElement);
+        gui.add(controls, 'rotation').name('Auto Rotate');
+        gui.add(controls, 'elevation', 0.5, 2).name('Terrain Height');
 
-        // Animation
         function animate() {
             requestAnimationFrame(animate);
-            terrain.rotation.y += controls.rotateSpeed;
-            
-            // Update terrain elevation
-            const vertices = terrainGeometry.attributes.position.array;
-            for (let i = 0; i < vertices.length; i += 3) {
-                vertices[i + 2] *= controls.elevationScale;
+            if (controls.rotation) {
+                pakistan.rotation.y += 0.005;
             }
-            terrainGeometry.attributes.position.needsUpdate = true;
-            
+            pakistan.scale.z = controls.elevation;
             renderer.render(scene, camera);
         }
         animate();