Spaces:
Sleeping
Sleeping
Implement immediate particle reload on pan/zoom release
Browse files⚡ INSTANT PARTICLE RELOAD SYSTEM:
- Particles hold in place during pan/zoom/drag operations
- Immediate removal of old particles on mouse release
- Instant creation of new particles at full density
- No delays or gradual transitions - maximum responsiveness
🖱️ EVENT HANDLING:
- moveend: Immediate reload when panning stops
- zoomend: Immediate reload when zooming stops
- dragend: Immediate reload when dragging stops
🔍 DEBUG LOGGING:
- Clear console feedback for each reload step
- Shows removal and creation of particles in real-time
This provides the snappy, responsive particle behavior requested -
particles freeze during interaction and reload instantly on release!
app.py
CHANGED
@@ -638,6 +638,35 @@ def create_wind_map(region="global"):
|
|
638 |
console.log("⚡ Particle colors updated for theme!");
|
639 |
}}
|
640 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
641 |
// Event handler for theme changes
|
642 |
map.on('baselayerchange', function() {{
|
643 |
setTimeout(reloadParticlesWithTheme, 100); // Small delay to ensure theme change is complete
|
|
|
638 |
console.log("⚡ Particle colors updated for theme!");
|
639 |
}}
|
640 |
|
641 |
+
// Immediate particle reload function for pan/zoom events
|
642 |
+
function immediateParticleReload() {{
|
643 |
+
console.log("⚡ PAN/ZOOM END: Immediate particle reload...");
|
644 |
+
|
645 |
+
// Remove old particles immediately
|
646 |
+
if (show10m && current10mLayer) {{
|
647 |
+
console.log("⚡ Removing old 10m particles immediately...");
|
648 |
+
map.removeLayer(current10mLayer);
|
649 |
+
console.log("⚡ Creating new 10m particles at full density...");
|
650 |
+
current10mLayer = create10mLayer();
|
651 |
+
current10mLayer.addTo(map);
|
652 |
+
}}
|
653 |
+
|
654 |
+
if (show100m && current100mLayer) {{
|
655 |
+
console.log("⚡ Removing old 100m particles immediately...");
|
656 |
+
map.removeLayer(current100mLayer);
|
657 |
+
console.log("⚡ Creating new 100m particles at full density...");
|
658 |
+
current100mLayer = create100mLayer();
|
659 |
+
current100mLayer.addTo(map);
|
660 |
+
}}
|
661 |
+
|
662 |
+
console.log("⚡ New particles loaded immediately - complete!");
|
663 |
+
}}
|
664 |
+
|
665 |
+
// Event handlers for map interaction - immediate reload on mouse release
|
666 |
+
map.on('moveend', immediateParticleReload); // Pan end
|
667 |
+
map.on('zoomend', immediateParticleReload); // Zoom end
|
668 |
+
map.on('dragend', immediateParticleReload); // Drag end
|
669 |
+
|
670 |
// Event handler for theme changes
|
671 |
map.on('baselayerchange', function() {{
|
672 |
setTimeout(reloadParticlesWithTheme, 100); // Small delay to ensure theme change is complete
|