Fixes #6684 ### The Issue When using Vector Tile layers (e.g., Shortbread, MapTiler), reloading the page with an active route caused the route line to appear significantly offset from the map features.
### The Cause The issue is caused by a race condition between the Sidebar CSS animation (approx. 300ms) and the WebGL Vector Tile renderer. When the sidebar opens, it resizes the map container. While Leaflet detects this, the internal MapLibre/GL instance often fails to update its viewport coordinates in time, causing the SVG route layer and the WebGL background to desynchronize. ### The Fix This PR modifies `getRoute` to ensure strict synchronization: 1. **Immediate Sync (350ms):** Forces a map resize immediately after the sidebar animation finishes to snap start/end markers to the correct location. 2. **Pre-Draw Sync (500ms):** Clears the route and waits for the map to be fully stable. Then, it iterates through layers to manually trigger `_glMap.resize()` on any vector layers before drawing the new route. This approach ensures that the route line is always drawn on a stable, synchronized coordinate system, preventing the offset. ### Screen Recording Before : https://github.com/user-attachments/assets/7c051230-4bbc-488c-b339-e48734bdb56c After : https://github.com/user-attachments/assets/77667111-6ce5-4c16-961e-7c482ecae1e1 You can view, comment on, or merge this pull request online at: https://github.com/openstreetmap/openstreetmap-website/pull/6731 -- Commit Summary -- * Fix vector map route offset and marker sync race condition -- File Changes -- M app/assets/javascripts/index/directions.js (31) -- Patch Links -- https://github.com/openstreetmap/openstreetmap-website/pull/6731.patch https://github.com/openstreetmap/openstreetmap-website/pull/6731.diff -- Reply to this email directly or view it on GitHub: https://github.com/openstreetmap/openstreetmap-website/pull/6731 You are receiving this because you are subscribed to this thread. Message ID: <openstreetmap/openstreetmap-website/pull/[email protected]>
_______________________________________________ rails-dev mailing list [email protected] https://lists.openstreetmap.org/listinfo/rails-dev
