Angular : leaflet update marker position using firebase DB

Question

l am try to build Angular project using Leaflet map and firebase database to retrieve coordinates. Everything is working fine. Except one thing. When i update marker position or delete from firebase database. The marker are not updating. l have to reload page to get new marker location.

Home Ts:

export class Tab1Page implements OnInit {
  map: Map;
  comingData: AngularFireList<any>;

  constructor(public af: AngularFireAuth,public db: AngularFireDatabase) { }


  ngOnInit(){
     this.leafletMap();

  }
  // retrieve data from DB and init map 

 async leafletMap() {
    this.comingData = this.db.list("/towuser");
    this.comingData.snapshotChanges()
    .pipe(
      map(changes =>
        changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
      )
    ).subscribe((a: any) => {

      console.log(a)
      
      if (a) {
       // init map 
        this.map = new Map('mapId').setView([33, 44], 7);
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        }).addTo(this.map);

       // marker icon
        var myIcon = icon({
          iconUrl: '../../assets/icon/truck.png',
          iconSize: [100, 35],
        });

        a.forEach(po => {
          if (po.pos) {


  //   init marker position from database
     const nantes = marker([po.pos.loc.lng,po.pos.loc.long], { icon: myIcon, }).addTo(this.map)
         
// marker Popup
         const customPopup = `
        <div style=" direction: rtl; text-align: right; ">
        <div style=" direction: rtl; text-align: right; ">
        <span style=" color: #42d77d; font-size: initial; ">
        <strong>نوع الكرين : </strong></span>
        <span style="font-size: initial; ">${po.profile.type}</span>
        </div>
        `
const customOptions = { 'className': 'custom-popup' }
  nantes.bindPopup(customPopup, customOptions).on('click', function (e) { this.openPopup() });

       nantes.setLatLng([po.pos.loc.lng,po.pos.loc.long]);

          }
        });

      }
    })

  }

}

How can i update marker position or delete from firebase database without reload page?

Answer 1

Are you deleting it from your map? because if you are deleting just one element from your map, you may need to put a method in the end of the function that make the deleting event the function leafletMap();

And in case you just need to update, make sure that you configure the event setLatLng( latlng) for that marker in question

Answer 2

Finally, i have solved. I have to listen to any snapshot changes into firebase database to update the marker position without reload page.

this.db.database.ref("/towuser/").on('child_changed', (t)=>{
  var markersRef =  this.db.database.ref("/towuser/"+t.key+"/").child("pos/")
  markersRef.on("child_added", (v)=>{
    let new_pos = v.val()
    marker.setLatLng([new_pos.lng,new_pos.long]).addTo(this.map)
    console.log(v.val())
  })
  markersRef.on("child_changed", (v)=>{
    console.log(v.val())
    
  })
  
})