markers appear in front of popup

[YoshiMannaert]

mapbox-gl-js version:

Steps to Trigger Behavior

1. Take a look at my example: http://codepen.io/Mosh/pen/amoQdL
2. Click on one of the markers to open a popup (The marker in France would be a good example for this issue)

Expected Behavior

I would expect the popups to appear over all markers

Actual Behavior

Certain markers appear in front of the popup. Others appear behind it (how it should be)
I tried to see if this was a z-index issue, but it appears that the order of the data decides which markers appear in front of the popup and which ones appear behind it.

Note: I didn't create this project, someone else did, it was given to me to do some styling on it. The other person had tried fixing the popups but did not succeed.
I have noticed that in the example of "popups on click" (https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/ )the popups do appear in front of the other icons.

It appears the other person had to do some custom coding, maybe that's where something was forgotten or not implemented correctly?

[yeldarby]

Looks like it's because the popup is actually rendered inside the marker and markers currently aren't z-indexed properly. PR #3062 should fix this.

[lucaswoj]

If you use the provided Popup class these will work as expected.

@yeldarby is correct that #3062 should fix your implementation, though it may cause other intended side effects.

I recommend that you switch to the provided Popup class. We cannot provide support on the GL JS issue tracker for other implementations.