How to store lat and long from database Firestore

Question

I am try to store Latitude and Longitude from Database FireStore , so it can be retrieved and use for leaflets to display markers on map .

Firebase Service Class

export interface PostionsAddress {
  id?: string,
  name: string,
  notes: string,
  lat:any,
  lng:any
}


@Injectable({
  providedIn: 'root'
})
export class PostionServiceService {

  private ideas: Observable<PostionsAddress[]>;
  private ideaCollection: AngularFirestoreCollection<PostionsAddress>;


  constructor(private afs: AngularFirestore) {
    this.ideaCollection = this.afs.collection<PostionsAddress>('Locations');
    this.ideas = this.ideaCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  getIdeas(): Observable<PostionsAddress[]> {
    return this.ideas;
  }



}

Here is code for Home page class

export class HomePage {

  private $location: Observable<PostionsAddress[]>;

  map: Map;

  constructor(public auth: AngularFireAuth,private locationservice:PostionServiceService) {  }


  ionViewDidEnter() { this.loadmap(); }

  loadmap() {
    setTimeout(() => {
      this.map = new Map('map').setView([33.3152, 44.3661], 10);

      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

      }).addTo(this.map);

       ---- HERE GETTING COORDS FROM DATABASE ------
      this.locationservice.getIdeas().pipe(map(a=>{
        return a.map(a=>{
          let Icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
          });
          L.marker([a.lat,a.lng], {
            icon: Icon
          }).addTo(this.map);
          console.log(a.lat,a.lng)
        })
      })) 

    }, 100);
  }

}

The problem is , According my code above in home page class , the markers are not showing on map and there is not error shows in console log . Any idea please why markers are not showing on map according to my code above ?

Answer 1

Finally i have fixed my problem for why markers are not showing on map ! .

After save data into firestore database , l created getAllMarkers method in Firebase Service Class to retrieving the data markers collection from database , whereas the getAllMarkers() would return all the markers (as an observable).

  getAllMarkers() {
    return this.afs.collection("Locations").valueChanges();
  }

home.ts file

 loadmap() {
    setTimeout(() => {
      this.map = new Map('map').setView([33.3152, 44.3661], 10);

      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

      }).addTo(this.map);

     ---------- HERE-----------

      this.locationservice.getAllMarkers().subscribe((markers: any) => {
        markers.forEach(singlemarker => {

          let Icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
          });
          L.marker([singlemarker.lat, singlemarker.lng], {
            icon: Icon
          }).addTo(this.map);
          console.log(singlemarker.lat, singlemarker.lng)
        });
      });


    }, 100);
  }

Now l have all markers on map