Sunday 12 January 2020

How to remove previous polyline automatically before adding new path

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)
    }


}


from How to remove previous polyline automatically before adding new path

No comments:

Post a Comment