Recreate wave visualization using exact wind app toggle structure

- Use FeatureGroup layers for Wave Heights and Wave Particles (like wind layers)
- Add proper checkbox controls exactly like wind app interface
- Create wave height markers with color coding and popups
- Add directional arrows as wave particle indicators
- Include LayerControl for built-in Folium layer management
- Implement proper layer toggle functions with checkbox states
- Add Dark/Light mode toggle matching wind app style
- Use proper Folium map initialization and layer detection

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

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

app.py

@@ -590,10 +590,9 @@ def fetch_wave_particles():
         return f"❌ Error: {str(e)}", None, "Failed to fetch particle data"
 
 def create_particle_wave_map(data):
-    """Create Folium map with wave particle visualization exactly like the wind app"""
+    """Create Folium map with wave layer toggles exactly like the wind app"""
     try:
         import folium
-        from folium.plugins import HeatMap
         import numpy as np
         
         particles = data.get('particles', [])
@@ -611,237 +610,223 @@ def create_particle_wave_map(data):
         center_lat = (min(lats) + max(lats)) / 2
         center_lon = (min(lons) + max(lons)) / 2
         
-        # Create Folium map like wind app
+        # Create Folium map exactly like wind app
         m = folium.Map(
             location=[center_lat, center_lon],
             zoom_start=4,
-            tiles='OpenStreetMap'
+            tiles=None  # We'll add tiles manually
         )
         
+        # Add base tile layers (like wind app)
+        light_tiles = folium.TileLayer(
+            'https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png',
+            name='OpenStreetMap',
+            attr='© OpenStreetMap contributors'
+        )
+        light_tiles.add_to(m)
+        
+        dark_tiles = folium.TileLayer(
+            'https://{{s}}.basemaps.cartocdn.com/dark_all/{{z}}/{{x}}/{{y}}{{r}}.png',
+            name='Dark',
+            attr='© CARTO © OpenStreetMap contributors'
+        )
+        dark_tiles.add_to(m)
+        
         # Sample particles for performance
         import random
-        if len(particles) > 800:
-            particles = random.sample(particles, 800)
-        
-        # Create velocity data for leaflet-velocity (JSON format like wind app)
-        velocity_json = {
-            "data": [],
-            "bounds": {
-                "south": min(lats),
-                "north": max(lats), 
-                "west": min(lons),
-                "east": max(lons)
-            }
-        }
+        if len(particles) > 500:
+            particles = random.sample(particles, 500)
         
-        # Convert wave data to velocity grid format
-        for particle in particles:
-            if all(key in particle for key in ['lat', 'lon', 'u_velocity', 'v_velocity']):
-                velocity_json["data"].append([
+        # Create wave height layer (like 10m wind in wind app)
+        wave_points = []
+        for particle in particles[::2]:  # Every 2nd particle for performance
+            if particle.get('lat') and particle.get('lon') and particle.get('wave_height'):
+                wave_points.append([
                     particle['lat'],
                     particle['lon'],
-                    particle['u_velocity'] * 100,  # Scale for visibility
-                    particle['v_velocity'] * 100,
-                    particle.get('wave_height', 1)
+                    particle['wave_height']
                 ])
         
-        # Add Leaflet-Velocity script and initialization
-        velocity_script = f"""
-        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/leaflet-velocity@1.8.4/dist/leaflet-velocity.js"></script>
+        # Add wave markers as a feature group (like wind layers)
+        wave_layer = folium.FeatureGroup(name="Wave Heights", show=True)
         
-        <script>
-        // Store velocity data globally
-        window.velocityData = {json.dumps(velocity_json)};
-        window.velocityLayerGlobal = null;
-        
-        // Initialize velocity layer when map is ready
-        function initializeVelocityOnStartup() {{
-            // Find the map instance (Folium creates it with a specific pattern)
-            var mapKeys = Object.keys(window).filter(key => key.startsWith('map_'));
-            if (mapKeys.length > 0) {{
-                var mapInstance = window[mapKeys[0]];
-                console.log('Found map instance:', mapKeys[0]);
-                
-                // Create velocity layer
-                window.velocityLayerGlobal = L.velocityLayer({{
-                    displayValues: true,
-                    displayOptions: {{
-                        velocityType: 'Ocean Waves',
-                        position: 'bottomleft',
-                        emptyString: 'No wave data'
-                    }},
-                    data: window.velocityData.data,
-                    maxVelocity: 15,
-                    colorScale: ['#3288bd', '#66c2a5', '#abdda4', '#e6f598', '#fee08b', '#fdae61', '#f46d43', '#d53e4f'],
-                    particleAge: 120,
-                    particleMultiplier: 0.005,
-                    lineWidth: 2
-                }});
-                
-                // Add to map
-                window.velocityLayerGlobal.addTo(mapInstance);
-                window.currentMapInstance = mapInstance;
-                console.log('Wave particles initialized and added to map');
-                
-                return true;
-            }}
-            return false;
-        }}
-        
-        // Try to initialize multiple times with different delays
-        setTimeout(initializeVelocityOnStartup, 1000);
-        setTimeout(initializeVelocityOnStartup, 2000);
-        setTimeout(initializeVelocityOnStartup, 3000);
-        setTimeout(initializeVelocityOnStartup, 5000);
-        
-        // Also try when DOM is ready
-        document.addEventListener('DOMContentLoaded', function() {{
-            setTimeout(initializeVelocityOnStartup, 1000);
-            setTimeout(initializeVelocityOnStartup, 2000);
-        }});
-        </script>
-        """
-        
-        # Add the velocity script to the map
-        m.get_root().html.add_child(folium.Element(velocity_script))
-        
-        # Add wave height markers with popup info
-        for i, particle in enumerate(particles[::10]):  # Every 10th particle for markers
+        for i, particle in enumerate(particles[::5]):  # Every 5th particle
             if particle.get('lat') and particle.get('lon') and particle.get('wave_height'):
                 # Color based on wave height
                 if particle['wave_height'] < 2:
-                    color = 'blue'
+                    color = '#0066ff'
                 elif particle['wave_height'] < 4:
-                    color = 'lightblue'
+                    color = '#00aaff'
                 elif particle['wave_height'] < 6:
-                    color = 'orange'
+                    color = '#ffaa00'
                 else:
-                    color = 'red'
+                    color = '#ff0000'
                 
                 popup_text = f"""
+                <div style="font-family: Arial; font-size: 12px;">
                 <b>🌊 Wave Data</b><br>
-                Height: {particle['wave_height']:.2f}m<br>
-                Direction: {particle.get('wave_direction', 0):.1f}°<br>
-                Period: {particle.get('wave_period', 0):.1f}s<br>
-                Region: {particle.get('region', 'Unknown')}
+                <b>Height:</b> {particle['wave_height']:.2f}m<br>
+                <b>Direction:</b> {particle.get('wave_direction', 0):.1f}°<br>
+                <b>Period:</b> {particle.get('wave_period', 0):.1f}s<br>
+                <b>Region:</b> {particle.get('region', 'Unknown')}
+                </div>
                 """
                 
                 folium.CircleMarker(
                     location=[particle['lat'], particle['lon']],
-                    radius=max(3, min(8, particle['wave_height'] * 2)),
+                    radius=max(2, min(6, particle['wave_height'] * 1.5)),
                     popup=folium.Popup(popup_text, max_width=200),
                     color=color,
                     fillColor=color,
-                    fillOpacity=0.6,
-                    weight=1
-                ).add_to(m)
-        
-        # Add legend
-        legend_html = f'''
-        <div style="position: fixed; 
-                    bottom: 50px; right: 50px; width: 180px; height: 140px; 
-                    background-color: white; border:2px solid grey; z-index:9999; 
-                    font-size:12px; padding: 10px; font-family: Arial;">
-        <p><b>🌊 Wave Particle Data</b></p>
-        <p><small>Particles: {len(particles)}</small></p>
-        <p><small>Regions: {', '.join(data.get('regions_processed', ['Global']))}</small></p>
-        <p><b>Wave Height:</b></p>
-        <p><i style="color:blue">●</i> 0-2m (Low)</p>
-        <p><i style="color:lightblue">●</i> 2-4m (Moderate)</p>
-        <p><i style="color:orange">●</i> 4-6m (High)</p>
-        <p><i style="color:red">●</i> 6+m (Extreme)</p>
-        </div>
-        '''
-        m.get_root().html.add_child(folium.Element(legend_html))
+                    fillOpacity=0.7,
+                    weight=1,
+                    opacity=0.8
+                ).add_to(wave_layer)
+        
+        wave_layer.add_to(m)
+        
+        # Add particle flow layer (simulated particle effect)
+        particle_layer = folium.FeatureGroup(name="Wave Particles", show=True)
+        
+        # Add direction arrows as particles
+        for i, particle in enumerate(particles[::8]):  # Every 8th particle
+            if all(key in particle for key in ['lat', 'lon', 'wave_direction', 'wave_height']):
+                # Create arrow marker pointing in wave direction
+                if particle['wave_height'] > 1:  # Only show for significant waves
+                    direction = particle['wave_direction']
+                    
+                    # Create custom arrow icon
+                    arrow_html = f'''
+                    <div style="transform: rotate({direction}deg); color: rgba(100, 200, 255, 0.8); font-size: 16px;">
+                        ↑
+                    </div>
+                    '''
+                    
+                    folium.Marker(
+                        location=[particle['lat'], particle['lon']],
+                        icon=folium.DivIcon(
+                            html=arrow_html,
+                            icon_size=(20, 20),
+                            icon_anchor=(10, 10)
+                        )
+                    ).add_to(particle_layer)
+        
+        particle_layer.add_to(m)
         
-        # Add working controls with proper functionality
+        # Add layer control (like wind app)
+        folium.LayerControl(collapsed=False).add_to(m)
+        
+        # Add custom controls HTML (exactly like wind app structure)
         controls_html = f'''
-        <div id="waveControls" style="position: fixed; 
-                    top: 10px; left: 50px; z-index:9999; 
-                    background-color: rgba(255,255,255,0.9); 
-                    padding: 10px; border-radius: 5px; 
-                    font-size:12px; font-family: Arial; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
-        <b>🌊 Wave Controls</b><br>
-        <button id="toggleParticles" onclick="toggleWaveLayer()" style="margin:2px; padding:4px 8px; background:#007cba; color:white; border:none; border-radius:3px; cursor:pointer;">⏸ Hide Particles</button>
-        <button id="toggleTheme" onclick="changeTheme()" style="margin:2px; padding:4px 8px; background:#007cba; color:white; border:none; border-radius:3px; cursor:pointer;">🌙 Dark Mode</button>
+        <div style="position: fixed; top: 10px; left: 10px; z-index: 9999; 
+                    background: rgba(255,255,255,0.95); padding: 15px; border-radius: 8px; 
+                    box-shadow: 0 4px 8px rgba(0,0,0,0.2); font-family: Arial, sans-serif; font-size: 13px;">
+            
+            <div style="margin-bottom: 10px;">
+                <strong>🌊 Wave Visualization</strong>
+            </div>
+            
+            <div style="margin: 8px 0;">
+                <label style="display: flex; align-items: center; margin-bottom: 5px;">
+                    <input type="checkbox" id="waveHeightToggle" checked onchange="toggleWaveHeight()" 
+                           style="margin-right: 8px;">
+                    Wave Heights
+                </label>
+                
+                <label style="display: flex; align-items: center;">
+                    <input type="checkbox" id="waveParticleToggle" checked onchange="toggleWaveParticles()" 
+                           style="margin-right: 8px;">
+                    Wave Particles
+                </label>
+            </div>
+            
+            <div style="margin-top: 12px; padding-top: 10px; border-top: 1px solid #ddd;">
+                <label style="display: flex; align-items: center;">
+                    <input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()" 
+                           style="margin-right: 8px;">
+                    Dark Mode
+                </label>
+            </div>
+            
+            <div style="margin-top: 8px; font-size: 11px; color: #666;">
+                Particles: {len(particles)} | Regions: {len(data.get('regions_processed', []))}
+            </div>
         </div>
         
         <script>
-        // Global variables for control state
-        var particlesVisible = true;
-        var isDarkTheme = false;
+        // Wait for map to be fully loaded
+        setTimeout(function() {{
+            // Get the map instance
+            var mapElement = document.querySelector('.folium-map');
+            if (mapElement && mapElement._leaflet_id) {{
+                var map = window[mapElement._leaflet_id];
+                window.waveMap = map;
+                
+                // Get layer references
+                window.waveLayers = {{}};
+                map.eachLayer(function(layer) {{
+                    if (layer.options && layer.options.name) {{
+                        window.waveLayers[layer.options.name] = layer;
+                    }}
+                }});
+                
+                console.log('Wave map initialized with layers:', Object.keys(window.waveLayers));
+            }}
+        }}, 1000);
         
-        function toggleWaveLayer() {{
-            const btn = document.getElementById('toggleParticles');
+        function toggleWaveHeight() {{
+            var checkbox = document.getElementById('waveHeightToggle');
+            var map = window.waveMap;
             
-            if (particlesVisible) {{
-                // Hide particles
-                if (window.velocityLayerGlobal && window.currentMapInstance) {{
-                    window.currentMapInstance.removeLayer(window.velocityLayerGlobal);
-                }}
-                btn.textContent = '▶ Show Particles';
-                particlesVisible = false;
-            }} else {{
-                // Show particles
-                if (window.velocityLayerGlobal && window.currentMapInstance) {{
-                    window.velocityLayerGlobal.addTo(window.currentMapInstance);
+            if (map && window.waveLayers['Wave Heights']) {{
+                if (checkbox.checked) {{
+                    map.addLayer(window.waveLayers['Wave Heights']);
                 }} else {{
-                    // Try to reinitialize if needed
-                    initializeVelocityOnStartup();
+                    map.removeLayer(window.waveLayers['Wave Heights']);
                 }}
-                btn.textContent = '⏸ Hide Particles';
-                particlesVisible = true;
             }}
         }}
         
-        function changeTheme() {{
-            const btn = document.getElementById('toggleTheme');
-            var mapInstance = window.currentMapInstance;
+        function toggleWaveParticles() {{
+            var checkbox = document.getElementById('waveParticleToggle');
+            var map = window.waveMap;
             
-            if (!mapInstance) {{
-                // Try to find map instance
-                var mapKeys = Object.keys(window).filter(key => key.startsWith('map_'));
-                if (mapKeys.length > 0) {{
-                    mapInstance = window[mapKeys[0]];
-                    window.currentMapInstance = mapInstance;
+            if (map && window.waveLayers['Wave Particles']) {{
+                if (checkbox.checked) {{
+                    map.addLayer(window.waveLayers['Wave Particles']);
+                }} else {{
+                    map.removeLayer(window.waveLayers['Wave Particles']);
                 }}
             }}
+        }}
+        
+        function toggleDarkMode() {{
+            var checkbox = document.getElementById('darkModeToggle');
+            var map = window.waveMap;
             
-            if (!mapInstance) return;
-            
-            if (isDarkTheme) {{
-                // Switch to light theme
-                mapInstance.eachLayer(function(layer) {{
-                    if (layer._url && layer._url.includes('dark')) {{
-                        mapInstance.removeLayer(layer);
+            if (map && window.waveLayers) {{
+                if (checkbox.checked) {{
+                    // Switch to dark
+                    if (window.waveLayers['OpenStreetMap']) {{
+                        map.removeLayer(window.waveLayers['OpenStreetMap']);
                     }}
-                }});
-                
-                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
-                    attribution: '© OpenStreetMap contributors'
-                }}).addTo(mapInstance);
-                
-                btn.textContent = '🌙 Dark Mode';
-                isDarkTheme = false;
-            }} else {{
-                // Switch to dark theme
-                mapInstance.eachLayer(function(layer) {{
-                    if (layer._url && layer._url.includes('openstreetmap')) {{
-                        mapInstance.removeLayer(layer);
+                    if (window.waveLayers['Dark']) {{
+                        map.addLayer(window.waveLayers['Dark']);
                     }}
-                }});
-                
-                L.tileLayer('https://{{s}}.basemaps.cartocdn.com/dark_all/{{z}}/{{x}}/{{y}}{{r}}.png', {{
-                    attribution: '© CARTO © OpenStreetMap contributors'
-                }}).addTo(mapInstance);
-                
-                btn.textContent = '☀ Light Mode';
-                isDarkTheme = true;
+                }} else {{
+                    // Switch to light  
+                    if (window.waveLayers['Dark']) {{
+                        map.removeLayer(window.waveLayers['Dark']);
+                    }}
+                    if (window.waveLayers['OpenStreetMap']) {{
+                        map.addLayer(window.waveLayers['OpenStreetMap']);
+                    }}
+                }}
             }}
         }}
         </script>
         '''
+        
         m.get_root().html.add_child(folium.Element(controls_html))
         
         # Return HTML representation