elfalem / Leaflet.curve

A Leaflet plugin for drawing Bézier curves and other complex shapes.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Animations not working when zooming

benb545 opened this issue · comments

https://gyazo.com/5e24d35d712bc53c98bd9654bae3ca8a

I think this is because the length of the path does not change during zoom, so when I zoom in, its so long that you don't see the animation, and then its smaller, you see small chunks of paths moving.

My code:

`
const attackerIcon = LeafletMap.divIcon({
className: 'attacker',
html: '

'
});
LeafletMap.marker([41.224374, 0.145053], {icon: attackerIcon}).addTo(this.map);

      LeafletMap.curve(['M', [41.224374, 0.145053],
        'C', [47.387311, 21.503481],
        [45.406853, 38.448971],
        [32.638331, 36.582095]], { animate: {duration: 1600, iterations: Infinity, easting: 'ease-in-out'} }).addTo(this.map);

      const target1 = LeafletMap.divIcon({
        className: 'target',
        html: '<div></div>'
      });
      LeafletMap.marker([32.638331, 36.582095], {icon: target1}).addTo(this.map);

      LeafletMap.curve(['M', [41.224374, 0.145053],
        'C', [44.285435, -25.579085],
        [31.887952, -66.536115],
        [6.414813, -73.040021]], { animate: {duration: 1600, iterations: Infinity, easting: 'ease-in-out'} }).addTo(this.map);

      const target2 = LeafletMap.divIcon({
        className: 'target',
        html: '<div></div>'
      });
      LeafletMap.marker([6.414813, -73.040021], {icon: target2}).addTo(this.map);

`