I am working on Leaflet map . My project is getting data json coordinates for flight path . The problem is i have duplicate polyline path on map while updating data .
Code :
export class MapTrackBeforPage implements OnInit {
map: Map;
poly:any
protected points: { lat: number, lng: number }[] = [];
constructor(
private http: HTTP,
public zone : NgZone) {
}
ionViewDidEnter() {
this.getmarker()
this.leafletMap()
}
leafletMap() {
// In setView add latLng and zoom
this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);
this.fg =L.featureGroup().addTo(this.map)
return tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
attribution: '',
}).addTo(this.map);
}
async getmarker() {
this.zone.runTask(()=>{
setInterval(()=>{
this.http.get('xxxxxxxxxxxxxxxxxx'', {}, {})
.then(data => {
for (let datas of JSON.parse(data.data)['coords']) {
this.points.push({ lat: datas.lat, lng: datas.lng });
console.log(this.points)
this.poly = new L.Polyline(this.points).addTo(this.map);
this.map.removeLayer(this.poly)
this.map.addLayer(this.poly)
}
})
},5000)
})
}
}
How update the polyline based on the new data without duplicate path ?