FEATURE: Implement fully interactive pollution maps with zoom, pan and coordinate display

- Replace static JPG output with interactive HTML plots using Plotly
- Add comprehensive zoom, pan, and hover functionality with exact coordinates
- Implement PNG download capability via toolbar camera icon
- Create new interactive_plot.html template with user instructions
- Add drawing tools, annotations, and responsive behavior
- Support both HTML and PNG file serving
- Maintain shapefile boundary integration with interactive features
- Add detailed plot information display and statistics

app.py

@@ -431,8 +431,8 @@ def visualize_interactive():
             pressure_level=pressure_level_val
         )
         
-        # Generate interactive plot (saved as JPG)
-        plot_path = interactive_plotter.create_india_map(
+        # Generate interactive plot
+        result = interactive_plotter.create_india_map(
             data_values, 
             metadata, 
             color_theme=color_theme,
@@ -441,9 +441,7 @@ def visualize_interactive():
         
         processor.close()
         
-        if plot_path:
-            plot_filename = Path(plot_path).name
-            
+        if result and result.get('html_content'):
             # Prepare metadata for display
             plot_info = {
                 'variable': metadata.get('display_name', 'Unknown Variable'),
@@ -457,11 +455,13 @@ def visualize_interactive():
                     'max': float(f"{data_values.max():.3f}") if hasattr(data_values, 'max') and not data_values.max() is None else 0,
                     'mean': float(f"{data_values.mean():.3f}") if hasattr(data_values, 'mean') and not data_values.mean() is None else 0
                 },
-                'is_interactive': True
+                'is_interactive': True,
+                'html_path': result.get('html_path'),
+                'png_path': result.get('png_path')
             }
             
-            return render_template('plot.html',
-                                    plot_filename=plot_filename,
+            return render_template('interactive_plot.html',
+                                    plot_html=result['html_content'],
                                     plot_info=plot_info)
         else:
             flash('Error generating interactive plot', 'error')
@@ -479,11 +479,16 @@ def serve_plot(filename):
         plot_path = Path('plots') / filename
         if plot_path.exists():
             # Determine mimetype based on file extension
-            if filename.lower().endswith('.jpg') or filename.lower().endswith('.jpeg'):
+            if filename.lower().endswith('.html'):
+                return send_file(str(plot_path), mimetype='text/html', as_attachment=True)
+            elif filename.lower().endswith('.jpg') or filename.lower().endswith('.jpeg'):
                 mimetype = 'image/jpeg'
-            else:
+                return send_file(str(plot_path), mimetype=mimetype)
+            elif filename.lower().endswith('.png'):
                 mimetype = 'image/png'
-            return send_file(str(plot_path), mimetype=mimetype)
+                return send_file(str(plot_path), mimetype=mimetype)
+            else:
+                return send_file(str(plot_path), as_attachment=True)
         else:
             flash('Plot not found', 'error')
             return redirect(url_for('index'))

interactive_plot_generator.py

@@ -8,6 +8,7 @@ import geopandas as gpd
 from pathlib import Path
 from datetime import datetime
 from constants import INDIA_BOUNDS, COLOR_THEMES
+import plotly.io as pio
 import warnings
 warnings.filterwarnings('ignore')
 
@@ -43,11 +44,14 @@ class InteractiveIndiaMapPlotter:
         data_values (np.ndarray): 2D array of pollution data
         metadata (dict): Metadata containing lats, lons, variable info, etc.
         color_theme (str): Color theme name from COLOR_THEMES
-        save_plot (bool): Whether to save the plot as JPG
+        save_plot (bool): Whether to save the plot as HTML and PNG
         custom_title (str): Custom title for the plot
         
         Returns:
-        str: Path to saved plot file
+        dict: Dictionary containing paths to saved files and HTML content
+            - 'html_path': Path to interactive HTML file
+            - 'png_path': Path to static PNG file  
+            - 'html_content': HTML content for embedding
         """
         try:
             # Extract metadata
@@ -155,7 +159,7 @@ class InteractiveIndiaMapPlotter:
                 lon_range = [INDIA_BOUNDS['lon_min'], INDIA_BOUNDS['lon_max']]
                 lat_range = [INDIA_BOUNDS['lat_min'], INDIA_BOUNDS['lat_max']]
             
-            # Update layout
+            # Update layout for better interactivity
             fig.update_layout(
                 title=dict(
                     text=title,
@@ -167,17 +171,29 @@ class InteractiveIndiaMapPlotter:
                     title='Longitude',
                     range=lon_range,
                     showgrid=True,
-                    gridcolor='rgba(128, 128, 128, 0.3)'
+                    gridcolor='rgba(128, 128, 128, 0.3)',
+                    zeroline=False
                 ),
                 yaxis=dict(
                     title='Latitude',
                     range=lat_range,
                     showgrid=True,
-                    gridcolor='rgba(128, 128, 128, 0.3)'
+                    gridcolor='rgba(128, 128, 128, 0.3)',
+                    zeroline=False
                 ),
-                width=1400,
-                height=1000,
+                width=1200,
+                height=800,
                 plot_bgcolor='white',
+                # Enable zoom, pan and other interactive features
+                dragmode='zoom',
+                showlegend=False,
+                hovermode='closest',
+                # Add modebar with download options
+                modebar=dict(
+                    bgcolor='rgba(255, 255, 255, 0.8)',
+                    activecolor='rgb(0, 123, 255)',
+                    orientation='h'
+                ),
                 annotations=[
                     # Statistics box
                     dict(
@@ -204,15 +220,67 @@ class InteractiveIndiaMapPlotter:
                         borderwidth=1,
                         borderpad=8,
                         font=dict(size=10)
+                    ),
+                    # Instructions
+                    dict(
+                        text='🔍 Zoom: Mouse wheel or zoom tool | 📍 Hover: Show coordinates & values | 📥 Download: Camera icon',
+                        xref='paper', yref='paper',
+                        x=0.5, y=0.02,
+                        xanchor='center', yanchor='bottom',
+                        showarrow=False,
+                        bgcolor='rgba(173, 216, 230, 0.8)',
+                        bordercolor='steelblue',
+                        borderwidth=1,
+                        borderpad=8,
+                        font=dict(size=10, color='darkblue')
                     )
                 ]
             )
             
-            plot_path = None
+            # Configure the figure for better interactivity and downloads
+            config = {
+                'displayModeBar': True,
+                'displaylogo': False,
+                'modeBarButtonsToAdd': [
+                    'drawline',
+                    'drawopenpath',
+                    'drawclosedpath',
+                    'drawcircle',
+                    'drawrect',
+                    'eraseshape'
+                ],
+                'modeBarButtonsToRemove': ['lasso2d', 'select2d'],
+                'toImageButtonOptions': {
+                    'format': 'png',
+                    'filename': f'india_pollution_map_{datetime.now().strftime("%Y%m%d_%H%M%S")}',
+                    'height': 800,
+                    'width': 1200,
+                    'scale': 2
+                },
+                'responsive': True
+            }
+            
+            # Save files if requested
+            result = {'html_content': None, 'html_path': None, 'png_path': None}
+            
             if save_plot:
-                plot_path = self._save_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp)
+                # Generate HTML content for embedding
+                html_content = pio.to_html(fig, config=config, include_plotlyjs='cdn', div_id='interactive-plot')
+                result['html_content'] = html_content
+                
+                # Save as HTML file
+                html_path = self._save_html_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp, config)
+                result['html_path'] = html_path
+                
+                # Save as PNG for fallback
+                png_path = self._save_png_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp)
+                result['png_path'] = png_path
+            else:
+                # Just return HTML content for display
+                html_content = pio.to_html(fig, config=config, include_plotlyjs='cdn')
+                result['html_content'] = html_content
             
-            return plot_path
+            return result
             
         except Exception as e:
             raise Exception(f"Error creating interactive map: {str(e)}")
@@ -279,8 +347,8 @@ class InteractiveIndiaMapPlotter:
         stats_lines = [f"{name}: {format_number(val)}{units_str}" for name, val in stats.items()]
         return "\n".join(stats_lines)
     
-    def _save_plot(self, fig, var_name, display_name, pressure_level, color_theme, time_stamp):
-        """Save the plot as JPG"""
+    def _save_html_plot(self, fig, var_name, display_name, pressure_level, color_theme, time_stamp, config):
+        """Save the interactive plot as HTML"""
         safe_display_name = display_name.replace('/', '_').replace(' ', '_').replace('₂', '2').replace('₃', '3').replace('.', '_')
         safe_time_stamp = time_stamp.replace('-', '').replace(':', '').replace(' ', '_')
         
@@ -288,16 +356,38 @@ class InteractiveIndiaMapPlotter:
         if pressure_level:
             filename_parts.append(f"{int(pressure_level)}hPa")
         filename_parts.extend([color_theme, safe_time_stamp])
-        filename = "_".join(filename_parts) + ".jpg"
+        filename = "_".join(filename_parts) + ".html"
         
         plot_path = self.plots_dir / filename
         
-        # Save as static JPG with high quality
-        fig.write_image(str(plot_path), format='jpg', width=1400, height=1000, scale=2)
-        print(f"Interactive plot saved as JPG: {plot_path}")
+        # Save as interactive HTML
+        fig.write_html(str(plot_path), config=config, include_plotlyjs='cdn')
+        print(f"Interactive HTML plot saved: {plot_path}")
         
         return str(plot_path)
     
+    def _save_png_plot(self, fig, var_name, display_name, pressure_level, color_theme, time_stamp):
+        """Save the plot as PNG for download/fallback"""
+        safe_display_name = display_name.replace('/', '_').replace(' ', '_').replace('₂', '2').replace('₃', '3').replace('.', '_')
+        safe_time_stamp = time_stamp.replace('-', '').replace(':', '').replace(' ', '_')
+        
+        filename_parts = [f"{safe_display_name}_India_static"]
+        if pressure_level:
+            filename_parts.append(f"{int(pressure_level)}hPa")
+        filename_parts.extend([color_theme, safe_time_stamp])
+        filename = "_".join(filename_parts) + ".png"
+        
+        plot_path = self.plots_dir / filename
+        
+        try:
+            # Save as static PNG with high quality
+            fig.write_image(str(plot_path), format='png', width=1200, height=800, scale=2)
+            print(f"Static PNG plot saved: {plot_path}")
+            return str(plot_path)
+        except Exception as e:
+            print(f"Warning: Could not save PNG: {e}")
+            return None
+    
     def list_available_themes(self):
         """List available color themes"""
         return COLOR_THEMES
@@ -333,8 +423,11 @@ def test_interactive_plot_generator():
     plotter = InteractiveIndiaMapPlotter(shapefile_path=shapefile_path)
     
     try:
-        plot_path = plotter.create_india_map(data, metadata, color_theme='YlOrRd')
-        print(f"✅ Test interactive plot created successfully: {plot_path}")
+        result = plotter.create_india_map(data, metadata, color_theme='YlOrRd')
+        if result.get('html_path'):
+            print(f"✅ Test interactive HTML plot created successfully: {result['html_path']}")
+        if result.get('png_path'):
+            print(f"✅ Test static PNG plot created successfully: {result['png_path']}")
         return True
     except Exception as e:
         print(f"❌ Test failed: {str(e)}")

templates/interactive_plot.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Air Pollution Map - India CAMS Dashboard</title>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .header h1 {
+            color: #2c3e50;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+
+        .plot-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .plot-info {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .info-item {
+            background: rgba(52, 73, 94, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            border-left: 4px solid #3498db;
+        }
+
+        .info-item h3 {
+            color: #2c3e50;
+            margin-bottom: 5px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .info-item p {
+            color: #34495e;
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
+        }
+
+        .btn {
+            background: linear-gradient(45deg, #3498db, #2980b9);
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 25px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
+        }
+
+        .btn-download {
+            background: linear-gradient(45deg, #27ae60, #219a52);
+        }
+
+        .btn-download:hover {
+            box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
+        }
+
+        .btn-back {
+            background: linear-gradient(45deg, #95a5a6, #7f8c8d);
+        }
+
+        .btn-back:hover {
+            box-shadow: 0 8px 25px rgba(149, 165, 166, 0.4);
+        }
+
+        .instructions {
+            background: rgba(241, 196, 15, 0.1);
+            border: 2px solid rgba(241, 196, 15, 0.3);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+
+        .instructions h3 {
+            color: #f39c12;
+            margin-bottom: 10px;
+        }
+
+        .instructions ul {
+            color: #34495e;
+            padding-left: 20px;
+        }
+
+        .instructions li {
+            margin-bottom: 5px;
+        }
+
+        .interactive-plot {
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            
+            .controls {
+                justify-content: center;
+            }
+            
+            .btn {
+                padding: 10px 20px;
+                font-size: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🌍 Interactive Air Pollution Map</h1>
+            <p style="text-align: center; color: #7f8c8d; margin-top: 10px;">
+                Hover over the map to see exact coordinates and pollution values. Use the toolbar to zoom, pan, and download.
+            </p>
+        </div>
+
+        <div class="instructions">
+            <h3>�� How to Use This Interactive Map:</h3>
+            <ul>
+                <li><strong>🖱️ Hover:</strong> Move your mouse over any point to see exact coordinates, pollution values, and location data</li>
+                <li><strong>🔍 Zoom:</strong> Use mouse wheel, zoom buttons in toolbar, or draw a rectangle to zoom to specific area</li>
+                <li><strong>📍 Pan:</strong> Click and drag to move around the map</li>
+                <li><strong>📥 Download:</strong> Click the camera icon in the toolbar to download as PNG image</li>
+                <li><strong>🔄 Reset:</strong> Double-click anywhere to reset zoom to original view</li>
+                <li><strong>✏️ Annotate:</strong> Use drawing tools in the toolbar to add lines, shapes, and annotations</li>
+            </ul>
+        </div>
+
+        <div class="controls">
+            <a href="{{ url_for('index') }}" class="btn btn-back">← Back to Dashboard</a>
+            {% if plot_info.png_path %}
+            <a href="{{ url_for('serve_plot', filename=plot_info.png_path.split('/')[-1]) }}" 
+               class="btn btn-download" download>📥 Download PNG</a>
+            {% endif %}
+            {% if plot_info.html_path %}
+            <a href="{{ url_for('serve_plot', filename=plot_info.html_path.split('/')[-1]) }}" 
+               class="btn btn-download" download>📄 Download HTML</a>
+            {% endif %}
+        </div>
+
+        <div class="plot-container">
+            <div class="interactive-plot">
+                {{ plot_html|safe }}
+            </div>
+        </div>
+
+        <div class="plot-info">
+            <h2 style="color: #2c3e50; margin-bottom: 20px;">📊 Plot Information</h2>
+            
+            <div class="info-grid">
+                <div class="info-item">
+                    <h3>🧪 Variable</h3>
+                    <p>{{ plot_info.variable }}</p>
+                </div>
+                
+                {% if plot_info.units %}
+                <div class="info-item">
+                    <h3>📏 Units</h3>
+                    <p>{{ plot_info.units }}</p>
+                </div>
+                {% endif %}
+                
+                {% if plot_info.pressure_level %}
+                <div class="info-item">
+                    <h3>🌡️ Pressure Level</h3>
+                    <p>{{ plot_info.pressure_level }} hPa</p>
+                </div>
+                {% endif %}
+                
+                <div class="info-item">
+                    <h3>🎨 Color Theme</h3>
+                    <p>{{ plot_info.color_theme }}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>📏 Data Shape</h3>
+                    <p>{{ plot_info.shape }}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>⏰ Generated</h3>
+                    <p>{{ plot_info.generated_time }}</p>
+                </div>
+            </div>
+
+            <div class="info-grid">
+                <div class="info-item">
+                    <h3>📊 Minimum Value</h3>
+                    <p>{{ "%.3f"|format(plot_info.data_range.min) }}{% if plot_info.units %} {{ plot_info.units }}{% endif %}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>📊 Maximum Value</h3>
+                    <p>{{ "%.3f"|format(plot_info.data_range.max) }}{% if plot_info.units %} {{ plot_info.units }}{% endif %}</p>
+                </div>
+                
+                <div class="info-item">
+                    <h3>📊 Average Value</h3>
+                    <p>{{ "%.3f"|format(plot_info.data_range.mean) }}{% if plot_info.units %} {{ plot_info.units }}{% endif %}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Additional interactivity enhancements
+        document.addEventListener('DOMContentLoaded', function() {
+            // Add responsive behavior
+            const plotDiv = document.getElementById('interactive-plot');
+            if (plotDiv) {
+                window.addEventListener('resize', function() {
+                    Plotly.Plots.resize(plotDiv);
+                });
+            }
+            
+            // Add loading indicator for downloads
+            const downloadButtons = document.querySelectorAll('.btn-download');
+            downloadButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const originalText = this.textContent;
+                    this.textContent = '⏳ Preparing download...';
+                    this.style.pointerEvents = 'none';
+                    
+                    setTimeout(() => {
+                        this.textContent = originalText;
+                        this.style.pointerEvents = 'auto';
+                    }, 2000);
+                });
+            });
+        });
+    </script>
+</body>
+</html>