Redraw on mouse move not working

[handmade-it]

Hi, your plugin looks great and seems to provide really good performance. But I detected a problem (Chrome v91.* Linux, same with current Firefox version):

When moving the map by clicking, holding and moving the mouse (e.g. here https://manubb.github.io/Leaflet.PixiOverlay/french-cities.html) the new markers are only drawn after releasing the mouse. The map tiles itself get updated directly during mouse movement, its only the markers that are only redrawn after the movement ended (releasing the mouse button). This creates a strong visual effect. I have played around with leaflet and markers on canvas and detected this problem everytime, not only with your plugin. Do you have any explanation for this, or even better, a solution?

With best regards Thomas

[ShadowZone]

Hi, maybe I can help you a little bit.

Most of the Leaflet plugins only trigger re-rendering on the "moveEnd"-event, as this is the most performance-efficient way to render any content. The downside of this is that it only shows new elements when the mouse button gets released and so some strange effects can occur while still dragging with the mouse button pressed.

But pixiOverlay has an option called "shouldRedrawOnMove". In the code it says:

https://github.com/manubb/Leaflet.PixiOverlay/blob/07425f66207f93072d39b04ab0b34507941d9e1d/L.PixiOverlay.js#L77-L79

So by default, it just ignores "move"-events. If you want to trigger a redraw on every move event fired (which, in the worst case could be on every pixel the map moves) you just pass this to the option:

shouldRedrawOnMove = function() { return true };

As this is a callback function, you can always access the event itself via the first parameter and filter for a specific condition to prevent rerendering on every pixel change:

function(event) { if (event.target == /*your desired target here */) { return true } return false; };

Hope this gives you a little insight and some ideas to solve your problem :-) And it would be nice to share your solution, so others can benefit from your great work.