Fix zoom and pan behavior consistency - both now clear instantly

UNIFIED PAN/ZOOM BEHAVIOR:
- Created handleMovementEnd() function for identical pan and zoom handling
- Both pan and zoom now use the same instant clearing mechanism
- Eliminated different code paths that caused inconsistent behavior
- Zoom now clears particles instantly just like pan does

CONSISTENT PARTICLE CLEARING:
- Both moveend and zoomend trigger identical instant clearing
- Same clearAllParticles() function used for both operations
- Same reloadParticlesAfterMove() function for both operations
- No more behavioral differences between pan and zoom

RELIABLE STATE MANAGEMENT:
- Enhanced reloadParticlesAfterMove() with force clean creation
- Removes any existing layers before creating new ones
- Consistent behavior regardless of previous zoom/pan operations
- Pan clearing now works reliably after any zoom level

FIXES:
- ✅ Zoom now clears particles instantly (was inconsistent)
- ✅ Pan clearing works consistently after zoom operations
- ✅ No more need to toggle particles to restore proper behavior
- ✅ Identical instant clearing for both pan and zoom

Console shows unified behavior:
- ⚡ "PAN END: INSTANTLY clearing and reloading particles..."
- ⚡ "ZOOM END: INSTANTLY clearing and reloading particles..."
- ⚡ "10m particles RECREATED at correct position (zoom X)"

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

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

app.py

@@ -743,50 +743,42 @@ def create_wind_map(region="global"):
                 }}, 10);
             }}
             
-            // Function to reload particles after pan/zoom
+            // Function to reload particles after pan/zoom with consistent behavior
             function reloadParticlesAfterMove() {{
-                console.log("⚡ PAN/ZOOM END: Reloading particles...");
+                console.log("⚡ RELOADING particles with consistent behavior...");
                 
-                // Check zoom level to prevent jumping artifacts - stricter limits
+                // Get current zoom for logging
                 var currentZoom = map.getZoom();
-                if (currentZoom < 3) {{
-                    console.log("⚠️ Zoom level " + currentZoom + " too far out, clearing particles to prevent jumps");
-                    // Clear any existing particles at far zoom
-                    if (current10mLayer && map.hasLayer(current10mLayer)) {{
-                        map.removeLayer(current10mLayer);
-                        current10mLayer = null;
-                    }}
-                    if (current100mLayer && map.hasLayer(current100mLayer)) {{
-                        map.removeLayer(current100mLayer);
-                        current100mLayer = null;
+                
+                // Force map refresh to ensure proper positioning
+                map.invalidateSize();
+                
+                // Always respect current toggle states - recreate layers if toggles are ON
+                if (show10m) {{
+                    // Force clean creation of 10m layer
+                    if (current10mLayer) {{
+                        try {{ map.removeLayer(current10mLayer); }} catch(e) {{}}
                     }}
-                    return;
+                    current10mLayer = create10mLayer();
+                    current10mLayer.addTo(map);
+                    console.log("⚡ 10m particles RECREATED at correct position (zoom " + currentZoom + ")");
+                }} else {{
+                    console.log("⚠️ 10m particles NOT reloaded (toggle OFF)");
                 }}
                 
-                // Wait for map to fully settle before recreating particles
-                setTimeout(function() {{
-                    // Force map refresh to ensure proper positioning
-                    map.invalidateSize();
-                    
-                    // Only recreate and add back layers if their toggles are ON and zoom is appropriate
-                    if (show10m) {{
-                        current10mLayer = create10mLayer();
-                        current10mLayer.addTo(map);
-                        console.log("⚡ 10m particles reloaded at correct position (zoom " + currentZoom + ")");
-                    }} else {{
-                        console.log("⚠️ 10m particles NOT reloaded (toggle OFF)");
-                    }}
-                    
-                    if (show100m) {{
-                        current100mLayer = create100mLayer();
-                        current100mLayer.addTo(map);
-                        console.log("⚡ 100m particles reloaded at correct position (zoom " + currentZoom + ")");
-                    }} else {{
-                        console.log("⚠️ 100m particles NOT reloaded (toggle OFF)");
+                if (show100m) {{
+                    // Force clean creation of 100m layer
+                    if (current100mLayer) {{
+                        try {{ map.removeLayer(current100mLayer); }} catch(e) {{}}
                     }}
-                    
-                    console.log("✅ Particle reload complete at correct map position!");
-                }}, 200); // Longer delay to ensure map settles
+                    current100mLayer = create100mLayer();
+                    current100mLayer.addTo(map);
+                    console.log("⚡ 100m particles RECREATED at correct position (zoom " + currentZoom + ")");
+                }} else {{
+                    console.log("⚠️ 100m particles NOT reloaded (toggle OFF)");
+                }}
+                
+                console.log("✅ Consistent particle reload complete - pan/zoom behavior now identical!");
             }}
             
             // Add pan/zoom event handlers - particles stay in place during movement
@@ -800,27 +792,31 @@ def create_wind_map(region="global"):
                 // Do NOT clear particles - let them stay in place during zoom
             }});
             
-            map.on('moveend', function() {{
-                console.log("⚡ PAN END: Clearing and reloading particles at new position...");
-                // Clear particles when movement ends and reload at correct position
-                clearAllParticles();
-                setTimeout(reloadParticlesAfterMove, 200);
-            }});
-            
-            map.on('zoomend', function() {{
-                console.log("⚡ ZOOM END: Clearing and reloading particles at new zoom...");
+            // Unified instant clearing for both pan and zoom
+            function handleMovementEnd(eventType) {{
+                console.log("⚡ " + eventType + " END: INSTANTLY clearing and reloading particles...");
                 
-                // Clear particles when zoom ends
+                // INSTANT clearing - same for both pan and zoom
                 clearAllParticles();
                 
                 // Check zoom level to prevent particle artifacts at far zoom
                 var currentZoom = map.getZoom();
                 if (currentZoom < 3) {{
-                    console.log("⚠️ Zoom too far out (level " + currentZoom + "), NOT reloading particles to prevent jumps");
+                    console.log("⚠️ Zoom level " + currentZoom + " too far out, NOT reloading particles to prevent jumps");
                     // Don't reload particles at far zoom
-                }} else {{
-                    setTimeout(reloadParticlesAfterMove, 200);
+                    return;
                 }}
+                
+                // Reload particles at correct position - same for both pan and zoom
+                setTimeout(reloadParticlesAfterMove, 200);
+            }}
+            
+            map.on('moveend', function() {{
+                handleMovementEnd("PAN");
+            }});
+            
+            map.on('zoomend', function() {{
+                handleMovementEnd("ZOOM");
             }});