Mapbox-gl-js: Custom markers move to their correct position while zooming in...

[ngeens]

mapbox-gl-js version:

Steps to Trigger Behavior

1. Check this example: http://codepen.io/nikogeens/pen/jAjgWp
2. Zoom in and out
   

   Expected Behavior

One would expect all the markers to retain at their actual position.

Actual Behavior

See how 2 of the 3 (Amsterdam & Berlin) markers move their position on the map while zooming in...
and moving away when zooming out.
Only the first marker of the geojson-array (Brussels in this case) retains it's position at the map.
Changing the order of the items in the array point's out that it's only the first item that behaves as expected, the remaining items move to their correct position while zooming in. .

After some hours trying to resolve, I'm quite puzzled about this one..
Also, the official documentation about adding custom markers ("https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/") seems to suffer from the same issue... I based my example on this documentation, but couldn't find a solution so far.

Perhaps, as a mapbox newbie, I'm doing something wrong?

[jfirebaugh]

Your CSS is setting position: relative on the marker element, which overrides the necessary Mapbox GL JS default of position: absolute.

[compitDanielos]

Have same issue with v0.26.0

[tanykim]

Is this fixed? I have the same error, and position:relative does not solve the problem.

[compitDanielos]

Fixed.

[tanykim]

I still see the error in v.0.31.0. When I zoom out, the markers would look like this. Am I missing something?

[jfirebaugh]

@tanykim Would you mind opening a separate issue? It might not be the same issue and it'll be easier for us to answer if you fill out the complete issue template that's provided when you open a new issue.

[tanykim]

Thank you, I just did: https://github.com/mapbox/mapbox-gl-js/issues/4048