How to remove previous polyline automatically before adding new path

Question

I am working on Angular using Leaflet map . My project is getting data json coordinates for flight path . My code below is working fine , but the problem is l have repeat polyline path on map while data is updating . l did some steps to remove previous polyline path and shows new path , but still l have same issues .

export class MapTrackBeforPage implements OnInit {
    map: Map;
    poly:L.Polyline
    fg = L.featureGroup()

    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: 'Baghdad Int`l Airport © 2019',
        }).addTo(this.map);
    }

    async getmarker() {

        this.zone.runTask(()=>{
            setInterval(()=>{
                this.http.get('xxxxxxxxxxxxxxxxxx'', {}, {})
                .then(data => {
                    this.fg.clearLayers()
                    let getdata = JSON.parse(data.data)
                    console.log(getdata)
                    this.AddPath(JSON.parse(data.data))
                })
            },5000)
        })

    }

    AddPath(path) {
        // Flight path
        for (let datas of path) {

            this.points.push({ lat: datas.lat, lng: datas.lng })
            console.log(this.points)
            this.poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(this.fg);
            // zoom the map to the polyline
            this.map.fitBounds(this.fg.getBounds())

        }
        new L.Marker(this.points[0], {
        icon: new L.DivIcon({
        html: ` <img src="assets/icon/B733.png" style="width:25px"/>`,
        iconSize: [20, 20],
        })

        }).addTo(this.map)
    }


}

Answer 1

Add your polylines to a featuregroup, then you can clear the group.

let fg = L.featureGroup().addTo(map)
async getmarker() {

    let poly: L.Polyline
    poly.remove()

    interval(5000).subscribe(()=>{
        this.http.get('http://xxxxxxxxxxxxxxxx', {}, {})
        .then(data => {
            fg.clearLayers(); //<----
            let getdata = JSON.parse(data.data)
            console.log(getdata)

            // Flight path
            for (let datas of JSON.parse(data.data)['trail']) {

                this.points.push({ lat: datas.lat, lng: datas.lng })
                console.log(this.points)
                 poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(fg); //<---- Change to fg
                // zoom the map to the polyline

                this.map.fitBounds(fg.getBounds()) //<---- Change to fg

            }

    })

}

Maybe you have to change the init from the fg var, I don't know if this is right for angluar

Update: Error searching

Try:

map: Map;
    poly:L.Polyline
    fg : L.FeatureGroup() // ":" and "F"

or

leafletMap() {
        // In setView add latLng and zoom
        this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);


        var t = tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
            attribution: 'Baghdad Int`l Airport © 2019',
        }).addTo(this.map);
        this.fg =L.featureGroup().addTo(this.map) //<--------
        return t; //<--------
    }

or

leafletMap() {
        // In setView add latLng and zoom
        this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);


        var t = tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
            attribution: 'Baghdad Int`l Airport © 2019',
        }).addTo(this.map);
        this.fg = new L.FeatureGroup().addTo(this.map) //<--------
        return t;
    }

what do you get in the console?:

 for (let datas of path) {

            this.points.push({ lat: datas.lat, lng: datas.lng })
            console.log(this.points)
            this.poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(this.fg);
            // zoom the map to the polyline
            this.map.fitBounds(this.fg.getBounds())

        }
console.log(fg); //<----