xavidram
commented
2 years ago Figured out the issue. this was due to the use of mapbox-gl-leaft
The use of L.mapbox() to create the tile layer was causing zone.js to constantly try and update the dependency tree as it was doing everything within zone.js rather than outsize like the ngx-leaflet does.
Solution is just to create to tile layer manually instead of using the library mentioned above.
Gif of issue was too large so here it is on imgur. https://imgur.com/a/dwzLgvX
[ x] I've looked at the documentation to make sure the behavior is documented and expected I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…) [ x] I've searched through the issues to make sure it's not yet reported
Expected behavior When dragging across the leaflet map, the map moves.
Current behavior Dragging the map causes the map to return to the initial position.
Environment
Leaflet version: 1.7.1 Browser (with version): Chrome OS/Platform (with version): Windows 10 1109 Additional context This same issue has occurred before. If I remember correctly, back in leaflet pre v1.0.0 there used to be an animate boolean we could disable when creating the map. Only the Zoom Control and Pan Control have the animate option. This issue is caused by zone.js in angular as specified in the issue below. https://github.com/Leaflet/Leaflet/issues/4588#issuecomment-221424763
In this library, it is mentioned that zone.js causes these issues due to the cancelation callback. And that this library runs outside of zone.js so my question is, looking at the gif above. Does this seem to be an issue caused by zone.js's callback cancelation?
https://github.com/xavidram/LeafletRubberband
You can clone that sample to reproduce the issue.