Ionic 2 and GeoFire and Typescript


#1

Hello Ionics,
i tryed now for days to implement Geofire in my learning app. But as beginner in Ionic and Typescript i failed.
There are no typings for it aviable and i am not able to convert the examples from GeoFire Javascript examples to run in my Typescript project.

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

This is the last code that not provide any error. But when i try to set values the troubles beginn.

Does anybody have a simple example (or code snippet) or knows a link to a Typescript Geofire example? My scenario is to set the long/lat keys and make a search in a radius(distance).

Sorry for my bad english and thank you in advance

iamDoerr


#2

Here is an interesting read http://blog.ionic.io/ionic-and-typings/


#3

We just had this same issue… for now to get it going, just include the geofire file in your index html

<script src="https://cdn.firebase.com/libs/geofire/4.1.1/geofire.min.js"></script>

and in the component file declare it

 declare var GeoFire: any

 var firebaseRef = firebase.database().ref().push();

 // Create a new GeoFire instance at the random Firebase location
 var geoFire = new GeoFire(firebaseRef);

#4

Hi Aaron,
thank you so much. The script in the index.html was the solution :slight_smile:, the other parts i already had.
Thank you that you are such an active forum member.

Best Regards from Austria
iamDoerr


#5

no problem, I know there is a better solution, when we figure it out i will post it here.


#7

Is it already possible to use the library with a npm install?


#8

Check out my answer I just posted at http://stackoverflow.com/a/41072056/370532


#9

@awynham Thank you so much! Your solution works.
(Ionic 2 RC4)


#10

Glad to help. Please upvote answer on SO to make it easier for others to find.


#11

Hi,
I’m using ionic2 Rc4 and I declare the variable with this line
declare var GeoFire: any;
(right before the @Component declaration)

And right after the constructor I define this function:
getPlaces(){
this.latUser = 46.310774;
this.lngUser = 2.423515;
this.radius = 2000;
var geoFire = new GeoFire(this.geoPlacesUrl);
var geoQuery = geoFire.query({
center: [this.latUser, this.lngUser],
radius: this.radius//kilometers
});
var keysEntered = false;
geoQuery.on(“key_entered”, (key, location, distance) => {
keysEntered = true;
});
}

But it does not find thevariable and I get this :
Can’t find variable GeoFire

I call the geofire script in the index.html from the cdn.

What is wrong ?