Mapbox-gl-js: Popup is displayed at wrong position when multiple world copies are visible, even when the Popup is attached to the Marker

[eivindml]

mapbox-gl-js version: 1.7.0

browser: Safari 13.1.1

Steps to Trigger Behavior

Add Markers with attached Popup.

 // Add markers to the map
features.forEach(function (marker: any, i: number) {

const popUpContent = '<div>Sample</div>'

// Create the popup
const popup = new mapboxgl.Popup({ offset: 25 })
  .setHTML(popUpContent)
  .on('open', function (event: any) {
    const activePoi = document.getElementsByClassName(poiId)[0]
    activePoi.classList.add('active')
  })
  .on('close', function () {
    const activePoi = document.getElementsByClassName(poiId)[0]
    if (activePoi) {
      activePoi.classList.remove('active')
    }
  })

let mark = new mapboxgl.Marker(markerElement)
  .setLngLat(marker.geometry.coordinates)
  .setPopup(popup)
  .addTo(map)
})

Zoom out so multiple world copies are visible, and then open popup:

Link to Demonstration

Example can be seen here: https://www.walleniuswilhelmsen.com/schedules

Expected Behavior

Popup appears 25px above clicked Marker.

Actual Behavior

Popup appears at wrong world copy.

[andrewharvey]

I can replicate on the standalone example at https://docs.mapbox.com/mapbox-gl-js/example/set-popup/ by zooming out and panning across to another world copy. Perhaps we need to build in the logic similar to https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/ for setPopup.

[eivindml]

Is there any thing new related to this bug? Or an issue or branch I can follow to get notified when something happens? :)

[andrewharvey]

Is there any thing new related to this bug? Or an issue or branch I can follow to get notified when something happens? :)

This is the issue where any updates will be posted and subscribing to it should give you that notification. If someone submits a PR to implement this, it will usually be linked to this ticket and show up that way until it's merged into master when this ticket will be closed.