React-leaflet: Markers temporarily drawn on wrong location, if marker is added during zoom animation

[kojoa]

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using a supported version of React and ReactDOM (v15.0.0+).
• [x] Using the supported version of Leaflet (v1.0.0) and its corresponding CSS file is loaded.
• [x] Using the latest version of React-Leaflet.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

• Markers should be drawn into correct place during zoom animation when new marker is added during zoom animation.

Actual behavior

• Markers jump around during zoom animation when new marker is added during zoom animation.

Steps to reproduce

• Run following jsfiddle: https://jsfiddle.net/kojoa/myrbpL89/
• Zoom back & forth while markers are added every 500ms
• There is related issue open for native Leaflet: https://github.com/Leaflet/Leaflet/issues/5505
  
  
  
  • However, the behavior with native Leaflet is different. Only last marker added seems to initially appear into wrong place. With react-leaflet all the markers jump around when new marker is added.
  
  

[PaulLeCam]

I don't think there is anything specific in this library that would cause this behavior, as your described it's likely related to the issue you referenced to in Leaflet itself.

[PaulLeCam]

Your jsfiddle is using an outdated version of the library, please open another ticket respecting the issue template if the problem exists in the latest version.

[TroySchmidt]

I think this probably revolves around an issue I am seeing. If I add a bunch of geoJSON objects to the map then if the timing is off on when it is bring up and setting the zoom and animation to the tiled baselayer, it will be in the wrong location. Then once I zoom out and back in it is shown in the right location.