[openstreetmap/openstreetmap-website] Fix vector map route offset and marker sync race condition #6684 (PR #6731)

Swayam notifications at github.com
Wed Jan 21 19:45:08 UTC 2026


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/6731 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260121/120f38b0/attachment.htm>


More information about the rails-dev mailing list