Popup detaches from marker during animation when map repeats horizontally

[sankichi92]

maplibre-gl-js version: 5.2.0

browser: Chrome, Safari

Steps to Trigger Behavior

1. Add a marker to the map and attach a popup to it.
2. Animate the marker continuously across the map.
3. Zoom out until the map horizontally repeats (world copy is visible).

Link to Demonstration

https://jsbin.com/totafit/1/edit?html,output

Expected Behavior

The popup moves synchronously with the marker.

Actual Behavior

The popup is displayed separated from the marker by 360 degrees of longitude.

Related Issues

• Marker's popup doesn't show over its parent marker. #2775

---

This behavior particularly impacts applications that animate markers for globally-moving objects (e.g., satellites, aircraft), such as react-sat-map, resulting in confusing and incorrect visual representation.

[sankichi92]

It appears that, unlike Marker, the Popup sets this._flatPos to null inside the setLngLat method:

maplibre-gl-js/src/ui/popup.ts

Line 317 in 348fd64

this._flatPos = null;

Due to this, the return value of the smartWrap function seems to differ between Popup and Marker:

maplibre-gl-js/src/ui/popup.ts

Line 624 in 348fd64

this._lngLat = smartWrap(this._lngLat, this._flatPos, this._map.transform);

this._flatPos = null; was added in #3712.

[HarelM]

A PR would be very welcomed! The linked issue is obviously something that needs to be taken into consideration when fixing this issue.

[sankichi92]

Thank you for your comment! I attempted to address this issue, but it turned out to be more complex than expected, and a straightforward solution wasn't immediately clear.