Angularfire 2 + Geofire 4

[eusthace811]

Hi!

I would like to use Geofire with angularfire2, is it possible? How?

Thank you in advance!

[davideast]

Hi @jlsuarezs,

AngularFire2 supports the passing in of references to FirebaseListObservable and FirebaseObjectObservable. This means you can create a GeoFire object and grab the reference.

var firebaseRef = firebase.database().ref();
var geoFire = new GeoFire(firebaseRef);

var ref = geoFire.ref();  // ref === firebaseRef

af.database.list(ref); 

Read the GeoFire docs for more info.

[maxmumford]

As of 2.0.0-beta.5 (and perhaps earlier) we initialise the GeoFire object like so:

new GeoFire(this.angularFire.database.list('/locations').$ref)

533

[georgechapman]

Just wondering if you can help with a problem I've been encountering on this topic.

As above i'm using AngularFire2 to connect to GeoFire and then calling a query:

var afRef = this.af.database; // AngularFire connection
var gfRef = new GeoFire(afRef.list('locations/')); // GeoFire reference 
var geoQuery = gfRef.query({
  center: [51.294, -0.245],
  radius: 1
});

However i just get this error:

Uncaught (in promise): TypeError: _firebaseRef.orderByChild is not a function

Any ideas what i'm doing wrong?

Thanks

PS: i'm using the follwing dependencies: "angularfire2": "^2.0.0-beta.5", "firebase": "^3.5.2", "geofire": "^4.1.2",

[maxmumford]

I think the problem is you're passing in the FirebaseListObservable instead of an object reference. Try the following:

new GeoFire(afRef.list('locations/').$ref)

$ref might have changed to _ref on the master branch.

[georgechapman]

Thanks @maxmumford - if I use $ref I get:

Property '$ref' does not exist on type 'FirebaseObjectObservable<any>'.

but if I use _ref i get:

Property '_ref' is private and only accessible within class 'FirebaseObjectObservable<T>'.

Which seems like it's a step closer! Any thoughts?

[maxmumford]

In later af2 versions $ref is public. Until then, you can get around typescript access restrictions by casting it to any like this:

let afRefAny: any = afRef.list('locations/');
new GeoFire(afRefAny._ref);

This works because the variable afRefAny is of type "any" (meaning no object type restriction), so typescript doesn't enfore the access modifiers from afRef.list. Access modifiers are purely a typescript concept and don't exist in javascript, so this will work in runtime.

Hope that helps!

[georgechapman]

Brilliant! Works a treat.

Thanks so much.

[ravivit9]

Hi, I am getting the below error for the following code: ... import {GeoFire} from 'geofire'; ... @Component{ :::: } export class AppComponent{

constructor() {

  var afRef = this.af.database; // AngularFire connection
 let afRefAny: any = afRef.list('locations/');
  GeoFire(afRefAny._ref);

  var geoQuery = afRefAny.query({
    center: [51.294, -0.245],
    radius: 1
  });

} }

After solving the above, I wanted to use geoQuery to build a mapping solution.

Appreciate any help in resolving this.

[katowulf]

@ravivit9 that error has nothing to do with this thread or AngularFire. Please submit via Stack Overflow, Groups, our on the geofire OSS repo's issue tracker. Note also that you've replied to a closed issue and haven't utilized the issue template, so we wouldn't be able to help here anyway.

[ravivit9]

Will do so. Thanks.

Created a StackOverfloor question. https://stackoverflow.com/questions/43615175/geofire-4-1-2-angular-2-4-0-2-firebxase-3-8-0

[gmanojisaac]

Dear David East.. GeoFire will it work with CloudFire now?? Thanks..

[WisaniShilumani]

Hi, since AngularFire's 5.0 update, moving from FirebaseListObservable to AngularfireList, the ._ref or .$ref don't seem to work.

Property '$ref' does not exist on type 'FirebaseObjectObservable', same for ._ref

When I declare it as "any", it still doesn't work in runtime

[Golosay]

@WisaniShilumani For AngularFire 5+ you can find ref in angularFire_list.query.ref

this.dbRef = this.db.list('/locations');
this.geoFire = new GeoFire(this.dbRef.query.ref);

[hsuanweifu]

How do you use GeoFire on Angular 6? I am getting GeoFire is not a constructor error.

"@angular": "6.0.2",
"firebase": "5.0.3",
"geofire": "4.1.2",
"angularfire2": "5.0.0-rc.9"
"typescript": "2.7.2"

import * as GeoFire from 'geofire';
import * as firebase from 'firebase/app';
[![enter image description here][1]][1]
@Component({
    selector: 'app-near-by-page',
    templateUrl: './near-by-page.component.html',
    styleUrls: ['./near-by-page.component.scss']
})
export class NearByPageComponent extends PageComponent {
    constructor() {
        super();

        // Generate a random Firebase location
        const firebaseRef = firebase.database().ref().child('locations');

        // Create a new GeoFire instance at the random Firebase location
        const geoFire = new GeoFire(firebaseRef);
        const geoQuery = geoFire.query({
            center: [51.294, -0.245],
            radius: 1
        });
    }
}

[nfoote]

I'm having the same issue @hsuanweifu I've also posted the error here https://github.com/firebase/geofire-js/issues/173 Hopefully we will hear back with a solution soon.

[emannuell]

@nfoote and @hsuanweifu Im having the same issue. How have you solved?