MichaelSolati / geofirestore-js

Location-based querying and filtering using Firebase Firestore.
https://geofirestore.com
MIT License
505 stars 58 forks source link

Example request GeoFirestoreQuery #12

Closed Morzilla closed 6 years ago

Morzilla commented 6 years ago

Hello! I'm trying to use this library in my Angular project, but I can't find any explicit example in the documentation, so I'm asking here if you have some time for me: I have a "users" collection with their own documents, like name, age, date of birth and other, and I want to retrieve the users near my position. At this moment, I have a "georef" collection for every user added with:

let collectionRef = this.afs.collection('georef').ref; let geoFirestore = new GeoFirestore(collectionRef);

geoFirestore.add({ coordinates: new firebase.firestore.GeoPoint(this.coordinates.lat, this.coordinates.lng), uid: this.globals.mySelf.uid } ).then((docRef) => { ... });

but then I don't know how to query the users near my position, I tried with geoFirestore.query(), but I don't know how to use the result GeoFirestoreQuery Object...can you please help me?

tsuginodan commented 6 years ago

Hi @Morzilla, I implement geofirestore in my project as well and I believe I can help.

You already add/set users to firestore, here is the relevant part.

Here I showing markers in a map inside a circle representing a radius

 const collectionRef = this.affirestore.collection('publications').ref;
      const geofirestore = new GeoFirestore(collectionRef);

      const queryCriteria: QueryCriteria = {
        center: [this.circle.latitude, this.circle.longitude],
        radius: this.radius
      };

      this.geoQuery = geofirestore.query(queryCriteria);
      this.showPublicationsMarkers();
    ...
showPublicationsMarkers() {
...
    this.geoQuery.on('ready', () => {
      console.log('GeoFirestoreQuery has loaded and fired all other events for initial data');
    });

    const onKeyEnteredRegistration = this.geoQuery.on('key_entered', (key, location, distance) => {
      console.log('key_entered');
      console.log(key, location, distance);
      this.publications.push({ key: key, coords: { lat: location[0], lng: location[1] }, distance: distance });
    });

    const onKeyExitedRegistration = this.geoQuery.on('key_exited', (key, location, distance) => {
      console.log('key_exited');
      console.log(key, location, distance);
    });

    const onKeyMovedRegistration = this.geoQuery.on('key_moved', function (key, location, distance) {
      console.log('key_moved');
      console.log(key, location, distance);
    });

  }

On every callback you have access to

Sorry I am not at pc right now, so believe things like formatting might be wrong

MichaelSolati commented 6 years ago

@akaisuicchi , you pretty much got it on point.

@Morzilla You're the second person to bring up how it's difficult to follow without an example application. So I'm actually working on one for version 2.0.0. I will be closing this issue (because of the answer above, and this isn't really an issue, more of a question).

Considering it is just an implementation question I'm curious if anyone has thoughts as to wether a gitter or stack overflow tag would be appropriate for things like this moving forward?

tsuginodan commented 6 years ago

@MichaelSolati a SO tag might be better but gitter could be too.

Questions and doubts for SO and real issues or improvements for GH is what other people/projects try to do.

Morzilla commented 6 years ago

@akaisuicchi Thank you, i did it with the "key_entered" event (I have the user's uid in the GeoFirestore reference document). @MichaelSolati Maybe you could add just a couple of examples, like the one I asked, just to give a "starting point" for a new user like me, and yes, it could be the right way to use SO for questions/problems and GH for issues only...

Again, thanks both for your kindness!