Add folium/leaflet map visualization with grayscale smoke rendering

• Implement FoliumSmokeRenderer for professional smoke visualization
• Add grayscale styling (light/medium/heavy smoke in shades of gray)
• Support polygon-based and heat map visualization modes
• Include multiple base layers (OSM, Satellite, Clean)
• Add interactive popups with smoke density information
• Integrate map type selection in UI (Plotly vs Folium)
• Create comprehensive legend and layer controls
• Support graceful fallback when folium unavailable

🌍 Leaflet maps perfect for satellite-style smoke plume visualization
🎨 Professional grayscale rendering matches traditional weather imagery
📱 Mobile-friendly responsive design with touch controls

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -53,6 +53,221 @@ except ImportError as e:
     HMS_LIBS_AVAILABLE = False
     print(f"HMS POLYGON LIBRARIES NOT AVAILABLE: {e}")
 
+# Import folium for leaflet maps
+try:
+    import folium
+    from folium.plugins import HeatMap
+    FOLIUM_AVAILABLE = True
+    print("FOLIUM AVAILABLE")
+except ImportError as e:
+    FOLIUM_AVAILABLE = False
+    print(f"FOLIUM NOT AVAILABLE: {e}")
+
+class FoliumSmokeRenderer:
+    """Render smoke plumes on folium/leaflet maps with grayscale styling"""
+    
+    def __init__(self):
+        # Grayscale smoke styling based on density
+        self.grayscale_styles = {
+            'light': {
+                'fillColor': '#E8E8E8',  # Light gray
+                'color': '#CCCCCC',      # Border
+                'weight': 1,
+                'fillOpacity': 0.4,
+                'opacity': 0.6
+            },
+            'medium': {
+                'fillColor': '#AAAAAA',  # Medium gray
+                'color': '#888888',      # Border
+                'weight': 2,
+                'fillOpacity': 0.6,
+                'opacity': 0.8
+            },
+            'heavy': {
+                'fillColor': '#666666',  # Dark gray
+                'color': '#444444',      # Border
+                'weight': 2,
+                'fillOpacity': 0.8,
+                'opacity': 1.0
+            }
+        }
+    
+    def create_folium_map(self, polygons, center_lat=39.5, center_lon=-98.5, zoom_start=5):
+        """Create folium map with grayscale smoke polygons"""
+        if not FOLIUM_AVAILABLE:
+            print("Folium not available")
+            return None
+            
+        try:
+            # Create base map with satellite imagery
+            m = folium.Map(
+                location=[center_lat, center_lon],
+                zoom_start=zoom_start,
+                tiles='OpenStreetMap'  # Start with OSM, add satellite option
+            )
+            
+            # Add satellite imagery option
+            folium.TileLayer(
+                tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+                attr='Esri',
+                name='Satellite',
+                overlay=False,
+                control=True
+            ).add_to(m)
+            
+            # Add CartoDB Positron for clean background
+            folium.TileLayer(
+                tiles='CartoDB positron',
+                name='Clean',
+                overlay=False,
+                control=True
+            ).add_to(m)
+            
+            # Add smoke polygons with grayscale styling
+            if polygons:
+                for i, poly_data in enumerate(polygons):
+                    try:
+                        # Get polygon coordinates
+                        coords = list(poly_data['geometry'].exterior.coords)
+                        # Convert to lat/lon pairs for folium (note: folium expects [lat, lon])
+                        folium_coords = [[lat, lon] for lon, lat in coords]
+                        
+                        # Get styling for density category
+                        style = self.grayscale_styles.get(
+                            poly_data['density_category'], 
+                            self.grayscale_styles['medium']
+                        )
+                        
+                        # Create popup with smoke information
+                        popup_html = f"""
+                        <div style="font-family: Arial, sans-serif; width: 200px;">
+                            <h4 style="margin: 0; color: #333;">🌬️ Smoke Plume</h4>
+                            <hr style="margin: 5px 0;">
+                            <p style="margin: 3px 0;"><b>Density:</b> {poly_data['description']}</p>
+                            <p style="margin: 3px 0;"><b>Concentration:</b> {poly_data['density_value']:.1f} µg/m³</p>
+                            <p style="margin: 3px 0;"><b>Area:</b> {poly_data['area_deg2']:.4f} deg²</p>
+                        </div>
+                        """
+                        
+                        # Add polygon to map
+                        folium.Polygon(
+                            locations=folium_coords,
+                            popup=folium.Popup(popup_html, max_width=300),
+                            tooltip=f"{poly_data['description']}: {poly_data['density_value']:.1f} µg/m³",
+                            **style
+                        ).add_to(m)
+                        
+                    except Exception as e:
+                        print(f"Error adding polygon {i} to folium map: {e}")
+                        continue
+            
+            # Add layer control
+            folium.LayerControl().add_to(m)
+            
+            # Add legend
+            self._add_smoke_legend(m)
+            
+            return m
+            
+        except Exception as e:
+            print(f"Folium map creation error: {e}")
+            return None
+    
+    def _add_smoke_legend(self, folium_map):
+        """Add smoke density legend to the map"""
+        legend_html = '''
+        <div style="position: fixed; 
+                    top: 10px; right: 10px; width: 150px; height: 120px; 
+                    background-color: white; border:2px solid grey; z-index:9999; 
+                    font-size:14px; padding: 10px; box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
+                    ">
+        <h4 style="margin: 0 0 10px 0; color: #333;">🌬️ Smoke Density</h4>
+        <div style="margin: 5px 0;">
+            <span style="display: inline-block; width: 20px; height: 15px; 
+                         background-color: #E8E8E8; border: 1px solid #CCC; margin-right: 5px;"></span>
+            <span style="font-size: 12px;">Light (0.5-15 µg/m³)</span>
+        </div>
+        <div style="margin: 5px 0;">
+            <span style="display: inline-block; width: 20px; height: 15px; 
+                         background-color: #AAAAAA; border: 1px solid #888; margin-right: 5px;"></span>
+            <span style="font-size: 12px;">Medium (15-35 µg/m³)</span>
+        </div>
+        <div style="margin: 5px 0;">
+            <span style="display: inline-block; width: 20px; height: 15px; 
+                         background-color: #666666; border: 1px solid #444; margin-right: 5px;"></span>
+            <span style="font-size: 12px;">Heavy (35+ µg/m³)</span>
+        </div>
+        </div>
+        '''
+        
+        folium_map.get_root().html.add_child(folium.Element(legend_html))
+    
+    def create_gradient_smoke_map(self, lat2d, lon2d, smoke_values, center_lat=39.5, center_lon=-98.5, zoom_start=5):
+        """Create folium map with gradient-based smoke visualization"""
+        if not FOLIUM_AVAILABLE:
+            print("Folium not available")
+            return None
+            
+        try:
+            # Create base map
+            m = folium.Map(
+                location=[center_lat, center_lon],
+                zoom_start=zoom_start,
+                tiles='CartoDB positron'
+            )
+            
+            # Add satellite imagery option
+            folium.TileLayer(
+                tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+                attr='Esri',
+                name='Satellite',
+                overlay=False,
+                control=True
+            ).add_to(m)
+            
+            # Create heat map data from smoke values
+            heat_data = []
+            
+            # Sample the grid to create heat points
+            ny, nx = smoke_values.shape
+            step = max(1, min(ny, nx) // 50)  # Limit to ~50x50 points for performance
+            
+            for i in range(0, ny, step):
+                for j in range(0, nx, step):
+                    if not np.isnan(smoke_values[i, j]) and smoke_values[i, j] > 0.5:
+                        lat = lat2d[i, j] if lat2d.ndim == 2 else lat2d[i]
+                        lon = lon2d[i, j] if lon2d.ndim == 2 else lon2d[j]
+                        
+                        if not (np.isnan(lat) or np.isnan(lon)):
+                            # Normalize smoke value for heat intensity
+                            intensity = min(1.0, smoke_values[i, j] / 100.0)
+                            heat_data.append([lat, lon, intensity])
+            
+            # Add heat map if we have data
+            if heat_data and FOLIUM_AVAILABLE:
+                HeatMap(
+                    heat_data,
+                    min_opacity=0.2,
+                    max_zoom=18,
+                    radius=15,
+                    blur=10,
+                    gradient={
+                        0.0: 'rgba(0,0,0,0)',      # Transparent
+                        0.2: 'rgba(128,128,128,0.3)',  # Light gray
+                        0.5: 'rgba(96,96,96,0.6)',     # Medium gray
+                        1.0: 'rgba(64,64,64,0.9)'      # Dark gray
+                    }
+                ).add_to(m)
+            
+            # Add layer control
+            folium.LayerControl().add_to(m)
+            
+            return m
+            
+        except Exception as e:
+            print(f"Gradient smoke map creation error: {e}")
+            return None
+
 class HMSSmokePolygonGenerator:
     """Generate HMS-style smoke plume polygons from HRRR-Smoke data"""
     
@@ -902,6 +1117,18 @@ class HRRRSmokeApp:
                             height=600
                         )
                         
+                        # Return appropriate map type
+                        if map_type == 'folium' and polygons:
+                            # Create folium map with grayscale smoke polygons
+                            folium_map = self.folium_renderer.create_folium_map(polygons)
+                            if folium_map:
+                                return folium_map
+                            else:
+                                # Fallback to plotly if folium fails
+                                return fig
+                        else:
+                            return fig
+                        
                     except Exception as e:
                         print(f"Contour plot failed, trying scatter: {e}")
                         
@@ -957,7 +1184,12 @@ class HRRRSmokeApp:
                     font=dict(size=16)
                 )
             
-            return fig
+            # Return appropriate map type
+            if map_type == 'folium':
+                # Return empty folium map for errors in folium mode
+                return folium.Map(location=[39.5, -98.5], zoom_start=5)
+            else:
+                return fig
             
         except Exception as e:
             print(f"Smoke map creation error: {e}")
@@ -1201,6 +1433,16 @@ with gr.Blocks(title="HRRR Smoke Forecast", theme=gr.themes.Soft()) as app:
                 info="Generate NOAA HMS-style smoke plume polygons"
             )
             
+            map_type = gr.Radio(
+                choices=[
+                    ("Interactive (Plotly)", "plotly"),
+                    ("Leaflet/Grayscale (Folium)", "folium")
+                ],
+                value="plotly",
+                label="Map Type",
+                info="Choose visualization style"
+            )
+            
             update_btn = gr.Button("🔄 Get Smoke Forecast", variant="primary", size="lg")
             
             gr.HTML("""
@@ -1215,6 +1457,8 @@ with gr.Blocks(title="HRRR Smoke Forecast", theme=gr.themes.Soft()) as app:
                     <li>🗺️ <strong>High resolution:</strong> 3km grid spacing</li>
                     <li>📐 <strong>HMS-style polygons:</strong> NOAA-compatible plume boundaries</li>
                     <li>📦 <strong>KMZ export:</strong> Google Earth compatible files</li>
+                    <li>🌍 <strong>Leaflet maps:</strong> Grayscale smoke visualization</li>
+                    <li>🎨 <strong>Multiple views:</strong> Interactive and satellite-ready styles</li>
                 </ul>
                 <p style="font-size: 0.8em; margin-top: 1rem; opacity: 0.9;">
                     <strong>Model:</strong> NOAA HRRR-Smoke provides operational smoke forecasts 
@@ -1242,7 +1486,7 @@ with gr.Blocks(title="HRRR Smoke Forecast", theme=gr.themes.Soft()) as app:
             )
     
     def update_display_wrapper(*args):
-        """Wrapper to handle KMZ file display"""
+        """Wrapper to handle KMZ file display and map type"""
         result = smoke_app.update_smoke_display(*args)
         
         if len(result) == 4 and result[3] is not None:
@@ -1255,21 +1499,28 @@ with gr.Blocks(title="HRRR Smoke Forecast", theme=gr.themes.Soft()) as app:
     # Event handlers
     update_btn.click(
         fn=update_display_wrapper,
-        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons],
+        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons, map_type],
         outputs=[status_text, smoke_map, narrative_forecast, kmz_download]
     )
     
     # Auto-update when parameter changes
     parameter.change(
         fn=update_display_wrapper,
-        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons],
+        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons, map_type],
         outputs=[status_text, smoke_map, narrative_forecast, kmz_download]
     )
     
     # Update when polygon option changes
     show_polygons.change(
         fn=update_display_wrapper,
-        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons],
+        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons, map_type],
+        outputs=[status_text, smoke_map, narrative_forecast, kmz_download]
+    )
+    
+    # Update when map type changes
+    map_type.change(
+        fn=update_display_wrapper,
+        inputs=[location, forecast_hour, parameter, detail_level, min_threshold, show_polygons, map_type],
         outputs=[status_text, smoke_map, narrative_forecast, kmz_download]
     )
 

requirements.txt

@@ -15,7 +15,7 @@ dask>=2023.1.0
 netcdf4>=1.6.0
 cfgrib>=0.9.10
 eccodes>=1.5.0
-folium>=0.12.0
+folium>=0.14.0
 shapely>=2.0.0
 geopandas>=0.13.0
 scikit-image>=0.20.0

test_folium.py

@@ -0,0 +1,153 @@
+#!/usr/bin/env python3
+"""
+Test folium/leaflet map functionality
+"""
+
+def test_folium_availability():
+    """Test if folium is available and basic functionality works"""
+    
+    try:
+        import folium
+        from folium.plugins import HeatMap
+        print("✅ Folium and HeatMap available")
+        FOLIUM_AVAILABLE = True
+    except ImportError as e:
+        print(f"❌ Folium not available: {e}")
+        FOLIUM_AVAILABLE = False
+        return False
+    
+    # Test basic map creation
+    try:
+        m = folium.Map(location=[39.5, -98.5], zoom_start=5)
+        print("✅ Basic folium map creation works")
+    except Exception as e:
+        print(f"❌ Basic map creation failed: {e}")
+        return False
+    
+    # Test polygon creation
+    try:
+        # Sample polygon coordinates (roughly Colorado)
+        coords = [
+            [40.0, -109.0],
+            [40.0, -102.0], 
+            [37.0, -102.0],
+            [37.0, -109.0],
+            [40.0, -109.0]  # Close polygon
+        ]
+        
+        folium.Polygon(
+            locations=coords,
+            popup="Test Smoke Plume",
+            tooltip="Test polygon",
+            fillColor='#AAAAAA',
+            color='#888888',
+            weight=2,
+            fillOpacity=0.6,
+            opacity=0.8
+        ).add_to(m)
+        
+        print("✅ Polygon creation works")
+    except Exception as e:
+        print(f"❌ Polygon creation failed: {e}")
+        return False
+    
+    # Test heat map
+    try:
+        heat_data = [
+            [40.0, -105.0, 0.8],  # Denver area with intensity
+            [39.7, -104.9, 0.9],  # Higher intensity nearby
+            [39.5, -105.2, 0.6]   # Lower intensity
+        ]
+        
+        HeatMap(
+            heat_data,
+            min_opacity=0.2,
+            radius=15,
+            gradient={
+                0.0: 'rgba(0,0,0,0)',
+                0.5: 'rgba(128,128,128,0.6)',
+                1.0: 'rgba(64,64,64,0.9)'
+            }
+        ).add_to(m)
+        
+        print("✅ Heat map creation works")
+    except Exception as e:
+        print(f"❌ Heat map creation failed: {e}")
+        return False
+    
+    # Test layer control
+    try:
+        folium.LayerControl().add_to(m)
+        print("✅ Layer control works")
+    except Exception as e:
+        print(f"❌ Layer control failed: {e}")
+        return False
+    
+    # Test tile layers
+    try:
+        folium.TileLayer(
+            tiles='CartoDB positron',
+            name='Clean',
+            overlay=False,
+            control=True
+        ).add_to(m)
+        print("✅ Tile layer creation works")
+    except Exception as e:
+        print(f"❌ Tile layer creation failed: {e}")
+        return False
+    
+    print("🌬️ Folium smoke visualization test completed successfully!")
+    print("All core folium features are working properly:")
+    print("  ✓ Map creation")
+    print("  ✓ Polygon rendering with grayscale styling")
+    print("  ✓ Heat map visualization") 
+    print("  ✓ Layer controls")
+    print("  ✓ Multiple tile layer support")
+    
+    return True
+
+def test_grayscale_styling():
+    """Test grayscale color scheme for smoke"""
+    
+    grayscale_styles = {
+        'light': {
+            'fillColor': '#E8E8E8',  # Light gray
+            'color': '#CCCCCC',      # Border
+            'weight': 1,
+            'fillOpacity': 0.4,
+            'opacity': 0.6
+        },
+        'medium': {
+            'fillColor': '#AAAAAA',  # Medium gray
+            'color': '#888888',      # Border
+            'weight': 2,
+            'fillOpacity': 0.6,
+            'opacity': 0.8
+        },
+        'heavy': {
+            'fillColor': '#666666',  # Dark gray
+            'color': '#444444',      # Border
+            'weight': 2,
+            'fillOpacity': 0.8,
+            'opacity': 1.0
+        }
+    }
+    
+    print("🎨 Grayscale Smoke Styling Test:")
+    for category, style in grayscale_styles.items():
+        print(f"  {category.capitalize():6s}: Fill={style['fillColor']}, Border={style['color']}, Opacity={style['fillOpacity']}")
+    
+    print("✅ Grayscale styling configuration validated")
+    return True
+
+if __name__ == "__main__":
+    print("🌬️ Testing Folium/Leaflet Smoke Visualization")
+    print("=" * 50)
+    
+    folium_works = test_folium_availability()
+    grayscale_works = test_grayscale_styling()
+    
+    if folium_works and grayscale_works:
+        print("\n🎉 All tests passed! Folium smoke visualization is ready.")
+    else:
+        print("\n⚠️  Some tests failed. Check dependencies or implementation.")