Marker offset changes from 0.38 to 0.39 cause marker to jump on map drag

[keyofj]

mapbox-gl-js version: 0.39.1

Steps to Trigger Behavior

1. Place custom marker on screen

var marker = new mapboxgl.Marker()

2. Move the marker to an intersection as a reference point
   

3. Click on the map away from the marker, and SLIGHTLY drag the map.
   

Expected Behavior

The marker remains at the position moved to.

Actual Behavior

The marker jumps and ignores the applied offsets.

Referencing the updates for 0.39 I saw that the marker was updated to position at its center. Taking that change into account I adjusted the marker offset with no effect. I can even take an offset off completely and it has the same behavior.

We also attached a mapbox popup to the marker and found that when the marker is originally placed on the map the popup opens centered on the marker (no offsets have been applied to the popup).

If I move the marker to another position and click to open the popup the popup is aligned to the top left of the marker.

When I again click on the map and slightly drag, the marker jumps to the popup.

If I revert back to version 0.38.0 none of the above happens and all is fine. The placement of these markers is critical to our application as the center point is used in reports to calculate distances. If the markers jump like this then those reports can be incorrect.

Any suggestions?

[peterqliu]

Move the marker to an intersection as a reference point

If I move the marker to another position and click to open the popup the popup is aligned to the top left of the marker.

@keyofj how are you performing these moves?

[keyofj]

@peterqliu We use Kendo UI draggable for our custom markers.

We spent some time digging into this more today and it looks like it might be when the map is dragging and the custom 2d markers are having the transition property updated, it acts like it does not take into account the offset of the marker. Not conclusive yet.

[peterqliu]

@keyofj I'm unsure how Kendo works, but if it's pure DOM manipulation, note that mapbox-gl does not track marker state (or any state, really) in the DOM. You will need to update marker position by calling .setLngLat()

[keyofj]

Yes sir we do that as mapbox does not have built in draggable features as Google. The issue is not Kendo. There is a change made in mapbox from version 38 to 39 that is causing the issue. From the change list for 39 there was a change to the marker and how it centers. I surmise that it was done in relation to symbols and not the marker object? Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Peter Liu <notifications@github.com> Sent: Thursday, August 10, 2017 5:37:37 PM To: mapbox/mapbox-gl-js Cc: Michael Clark; Mention Subject: Re: [mapbox/mapbox-gl-js] Marker offset changes from 0.38 to 0.39 cause marker to jump on map drag (#5131) @keyofj<https://github.com/keyofj> I'm unsure how Kendo works, but if it's pure DOM manipulation, note that mapbox-gl does not track marker state (or any state, really) in the DOM. You will need to update marker position by calling .setLngLat()<https://www.mapbox.com/mapbox-gl-js/api/#popup#setlnglat> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#5131 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AHoyQNjHJn2_JjdWZgMEdJFp0zYxscBrks5sW3ghgaJpZM4Oz0Qa>.

[mollymerp]

@keyofj can you please provide a minimal example on jsfiddle or jsbin that reproduces the behavior you're seeing?

[keyofj]

@mollymerp
I have created two jsFiddles for you. One for version 0.38.0 which works as expected and one using 0.39.1 where the marker jumps as described above.

v0.38.0 - works
v0.39.1 - marker jumps

Please note the marker placement in each example. v0.39.1 places the marker higher covering the street name where v0.38.0 is placed correctly on the LngLat.

[jfirebaugh]

Thanks @keyofj, that JSFiddle helped -- I can see why it's behaving that way. When setLngLat is called at the end of the drag, the marker element is still hidden, so the 50% offset is calculated based on a size of zero. In other words, this is the same issue as described in #5133. I'm going to close in favor of that issue. The fix looks straightforward and we should be able to address it for the next release.

[keyofj]

@jfirebaugh Thanks! I thought that with the Kendo draggable that the callbackSuccess was fired after the dragend but that was just an assumption on my part.

I moved the show() method into the callback success and updated the offsets based on centering of marker and this appears to fix the problem for us. I will modify once the other update is completed.

Thanks again!