Curves not animating
sebastienpattyn93 opened this issue · comments
Hi I created an angular application where I'm using leaflet with leaflet.curve.
I used the same points as in the example and I'm seeing my map and the curves but the curves are not animating. Did I maybe miss some packages or modules?
import { Component, OnInit } from '@angular/core';
import "leaflet";
import "leaflet-curve";
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
constructor() { }
ngOnInit() {
const map = L.map('leafletmap').setView([46.05, 11.05], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const pathOne = L.curve(
[
'M',
[50.14874640066278, 14.106445312500002],
'Q',
[51.67255514839676, 16.303710937500004],
[50.14874640066278, 18.676757812500004],
'T',
[49.866316729538674, 25.0927734375]
],
{ animate: 3000 }
).addTo(map);
const pathTwo = L.curve(
[
'M',
[50.54136296522163, 28.520507812500004],
'C',
[52.214338608258224, 28.564453125000004],
[48.45835188280866, 33.57421875000001],
[50.680797145321655, 33.83789062500001],
'V',
[48.40003249610685],
'L',
[47.45839225859763, 31.201171875],
[48.40003249610685, 28.564453125000004],
'Z',
'M',
[49.55372551347579, 29.465332031250004],
'V',
[48.7822260446217],
'H',
[33.00292968750001],
'V',
[49.55372551347579],
'Z'
],
{ color: 'red', fill: true }
).addTo(map);
const pathThree = L.curve(
[
'M',
[49.35375571830993, 6.240234375],
'Q',
[49.38237278700955, 9.843750000000002],
[47.754097979680026, 9.360351562500002],
[46.95026224218562, 6.635742187500001],
[45.67548217560647, 8.437500000000002],
[44.5278427984555, 5.5810546875],
[45.85941212790755, 3.0761718750000004],
[47.517200697839414, 4.218750000000001],
[49.009050809382074, 3.7353515625000004],
[48.45835188280866, 5.800781250000001],
[48.8936153614802, 5.493164062500001],
'Z'
],
{ fill: true, color: 'orange' }
).addTo(map);
const pathFour = L.curve(
[
'M',
[46.86019101567027, -29.047851562500004],
'Q',
[50.48547354578499, -23.818359375000004],
[46.70973594407157, -19.907226562500004],
'T',
[46.6795944656402, -11.0302734375]
],
{ dashArray: 5, animate: { duration: 3000, iterations: Infinity } }
).addTo(map);
function onMapClick(e) {
console.log(e.latlng);
}
map.on('click', onMapClick);
}
ngOnDestroy(): void {}
}
Hi, the https://www.npmjs.com/package/leaflet-curve npm package is outdated (3 years old). It was not created by me.
I'll look into creating a node package.
@sebastienpattyn93 I have created an updated npm package - https://www.npmjs.com/package/@elfalem/leaflet-curve