0

I'm retrieving data json api content on coordinates GPS then using into leaflet map markers . I'm having trouble to clearing the markers when i have new updates from data json api ! , all markers are duplicate when i have new update .

Code 

  datas(){

    interval(3000).subscribe(()=>{

      this.http.get("xxxxxxxxxxxxx",{},{}).then((data) => {

        this.Data = JSON.parse(data.data);

        this.points = Object.keys(this.Data)

        .map(key => this.Data[key])
        .map((position) => ({
          lat: position[1],
          lng: position[2],
        })).filter(position => position.lat && position.lng ).forEach(i=>{

          console.log(i.lat,i.lng)

          new L.Marker([i.lat,i.lng], {
            icon: new L.DivIcon({
              html: `<div style="width: 65px;";>
              <img src="assets/aeroplane.png"/style="width: 20px;height: 25px;">
              </div>`

            })

        }).addTo(this.map)
      })

      this.map.removeLayer()

      });

    })



  }

How i can remove the markers then add new markers on map after updating data and avoid duplicate markers

Ali Ghassan
  • 1,280
  • 1
  • 22
  • 59
  • we have used feature group to add markers: https://leafletjs.com/reference-1.5.0.html#featuregroup then it is easy to call `.clearLayers()` to remove all markers. – AT82 Nov 15 '19 at 14:55
  • @AJT82 should i use `.clearLayers()` inside `interval(3000).subscribe` for updating ? – Ali Ghassan Nov 15 '19 at 15:00
  • Just do it some time before you want to add new markers, inside interval is just fine :) You can also use layergroup instead of featuregroup, they have the same function available. Your choice :) – AT82 Nov 15 '19 at 18:03
  • Does this answer your question? [Leaflet - How to find existing markers, and delete markers?](https://stackoverflow.com/questions/9912145/leaflet-how-to-find-existing-markers-and-delete-markers) – IvanSanchez Jan 06 '20 at 11:53
  • No , is different – Ali Ghassan Jan 06 '20 at 11:57

0 Answers0