Search code examples
angularfirebaseangularfiregoogle-cloud-firestore

How to create GeoPoint from angularfire2?


I'm trying to create new GeoPoint using AngularFirestore but I keep getting an error stating that the method isn't available. How can I do this without importing the whole firebase npm module in addition to AngularFire?

    import { Component, OnInit } from "@angular/core";
    import {AngularFirestore, AngularFirestoreCollection} from "angularfire2/firestore";
    @Component({
      selector: "app-firebase-menu-bar",
      templateUrl: "./firebase-menu-bar.component.html",
      styleUrls: ["./firebase-menu-bar.component.css"]
    })
    export class FirebaseMenuBarComponent {
      private itemsCollection: AngularFirestoreCollection<any>;
      private AngularFirestoreCollection;
      private draftCollection;
      private productionCollection;
      constructor(private db: AngularFirestore) {
        // this.production = db.collection('/production').snapshotChanges();
        this.db.firestore.GeoPoint(40, 100);
      }
    }

Solution

  • You must use the native firebase/firestore module and not the angularfire module. You should not be afraid of importing firebase (via 'firebase/app' as it is recommended in the AngularFire repository), because angularfire is simply a wrapper around it.

    Here is the Firestore API reference to create a Geopoint : https://firebase.google.com/docs/reference/js/firebase.firestore.GeoPoint

    The imports :

    import {AngularFirestore} from 'angularfire2/firestore'
    import * as firebase from 'firebase/app'
    

    The Geopoint creation and save :

    const locationData = new firebase.firestore.GeoPoint(40, 100)
    this.db.collection('foo').doc('whateverId').udpate({location: locationData})