Markers are faster than map when using map.jumpTo

[trandzik]

Hello,

first of all I would like to say that MapLibre GL JS is really amazing - I have just started experimenting with it and I am absolutely blown away by its flexibility and performance. Thank you very much for all the effort that went into making it.

I have stumbled upon a situation where I need to continually update the view by using map.jumpTo() (navigating the map based on external data). It works nicely, but after adding some markers, I have noticed that they move a little differently when compared to the map (I feel like they are being drawn a little bit faster - moving ahead of the map).

Simple example:
https://jsbin.com/tozusimido/edit?html,output

Please is there something I could do in order to make the markers "stick" to the map? Thank you very much.

Best,
Peter

[HarelM]

These kind of updates that use requestaninationframe might be too much for the html element to update, I would guess it moves after the map and not before, but that's just a guess. The marker updates are using move event to update. Maybe you can use the render event to force a marker position update, but I would advise against it.

Is there a slower/less prioritized update of the map center that shows this behavior?

[trandzik]

Thanks for reply. I have tried making a better example - this one shows that the marker is moving before the map. (When looking at the map border, I feel like I can tell that marker is ahead of it.) Please feel free to check it out here:

https://jsbin.com/borisixoha/edit?html,output

Please what do you mean by slower/less prioritized update of the map? I have tried flyTo(), but it works nicely there. Also when moving the map by touch/mouse input it works as expected. So far I haven't noticed this behavior elsewhere, only when driving the view using jumpTo().

[HarelM]

requestAnimationFrame is a prioritized callback in the browser, more than for example setTimeout, so using jumpTo inside requestAnimationFrame seems like it might cause some race condition between the rendering and the html update.
So I was wondering if you can create something that will show this behavior without the use of requestAnimationFrame?

[trandzik]

Aha, now I get it, thanks for explanation. I have tried some other approaches just to see how it behaves.

This one uses map.on("render"), but there doesn't seem to be a difference in terms of markers.
https://jsbin.com/zaxitefequ/edit?html,output

This one uses mentioned setTimeout, and in this case the markers seem to properly sick to the map. However I am not sure if I could use this approach as my goal is to drive the map view smoothly (I feel like it would result in "frame drops" from time to time, no matter what timeout I would set).
https://jsbin.com/lotologaza/edit?html,output

[trandzik]

Maybe it would be better to draw my markers as symbol layers inside the WebGL render loop? (Since I am hitting a problem with synchronization between MapLibre’s WebGL loop and HTML (DOM-driven) markers, this could do the trick right?) I haven't tried geojson so far, but maybe it would be good for this use-case.

[HarelM]

Yes, I think a symbol layer would be better for what you need if I understand correctly...

[trandzik]

I have given symbol layer a try. It does work nicely when marker is fixed - it sticks to the map as it should. But this time I am hitting some other problem. In certain situations I need to update the marker position to always be in the center of the map. When I tried doing this, I can see it lags sometimes - moving away from the center.

I have created simple example that shows this problem:
https://jsbin.com/xobafofatu/edit?html,output

In Firefox it seems to be lagging a little more than in Chrome, but it happens there too.

I have also tried a scenario where the map isn't being controlled by external data and is rather interactive. However there it seems to disappear on movement.
https://jsbin.com/qosicuteqe/edit?html,output

Please do you think I am missing some important detail, or am I hitting the limitations of symbol layers? Thanks.

[HarelM]

When I tried doing this, I can see it lags sometimes - moving away from the center.

I think that it is related to symbol collision and animation, make sure you turn both off - I see that other labels are moving as well when the lags are showing, so I'm guessing it might be related to that...
(icon-ignore-placement, icon-allow-overlap)

[trandzik]

Thanks, I have just tried it, but it didn't seem to make a difference.