I’m building an Angular app that will visualize a list of flights a user has taken. I’m drawing a line on the globe projection between two coordinates and whenever the line is clicked I’d like to display a popup with flight’s details.

However, the further I zoom out, the further popup appears from the line, which is especially visible upon zooming in. The more I zoom in before the initial click, the more correct a popup appears (screenshots below).

To make clicking the line easier for the user, I have two layers, one has higher line-width and line-opacity: 0. I don’t believe this is the reason because I tried setting both layers with same line-width, to no avail.

this.map.addLayer({
  'id': 'routesInvisible',
  'type': 'line',
  'source': 'route',
  'layout': {
    'line-join': 'round',
    'line-cap': 'round'
  },
  'paint': {
    'line-opacity': 0,
    'line-width': 10,
  }
});
this.map.addLayer({
  'id': 'routes',
  'type': 'line',
  'source': 'route',
  'layout': {
    'line-join': 'round',
    'line-cap': 'round'
  },
  'paint': {
    'line-color': ['get', 'color'],
    'line-width': 4,
  }
});

This is the code responsible for calculating the middle point. Can the Earth’s curvature be the reason why it appears off? If so, how do I correct it? I’d like the popup to always stick to the line’s center.

this.map.on('click', 'routesInvisible', (event: any) => {
  const sourceProperties = event.features[0].properties;
  const coordinates = event.features[0].geometry.coordinates.slice();

  let midCoordinate: [number, number] = [
    (coordinates[0][0] + coordinates[1][0]) / 2,
    (coordinates[0][1] + coordinates[1][1]) / 2
  ];
  
  new mapboxgl.Popup()
    .setLngLat(midCoordinate)
    .setHTML(sourceProperties.destination)
    .addTo(this.map);
});

I also looked up this Display a popup on click tutorial and I noticed that if I zoom out far, click a marker, then zoom in, the popup will appear near but not exactly at the marker.

Popup when zooming out:

Popup when zooming in:

]3