Geofire(Firebase) + Ionic


#1

Hi guys just wondering if anyone has implemented GeoFire (Firebase) https://github.com/firebase/geofire/ into an Ionic project…

I found GeoFire now supports iOS and Android https://www.firebase.com/blog/2014-08-26-geofire-goes-mobile.html but not sure if anyone has included on Ionic.

Thanks!


#2

Since it’s web tech, you could just use geofires javascript sdk. Even more, you could use an angular wrapper for geofire.


#3

Great! thanks for the quick reply, I will set it up with AngularFire!


#4

were you able to implement geofire with ionic… Looking for something like this for my project as well…


#5

Yes, I got it working. It’s relatively simple once you understand how they want the geocoding data stored. I’m using it for a few different parts or my current application for filtering data based off the user’s location.


#6

Can you please share a codepen or point me to some blog or tutorial for it.


#7

Here’s the best resource. https://github.com/firebase/geofire-js

The main thing that was kinda a pain was having to store the location and the data in two different locations. I ended up using the Firebase key for each new item for the Geofire key so it’s easy to lookup later. You can use the toString() to grab the path and then use the key() to grab the key at the newly created path when you push new data to that node.

then use this to set the data at your geofire reference:

geoFire.set("some_key", [37.79, -122.41]).then(function() {
  console.log("Provided key has been added to GeoFire");
}, function(error) {
  console.log("Error: " + error);
});

Then to get the data back out you perform the Geoquery, get the keys of items that are in the radius of the location and then retrieve the items from Firebase based off the keys.

It may be possible to store other values in the geofire data, but their examples and this SO question seemed to point to the direction that you’d need to save the data elsewhere. http://stackoverflow.com/questions/26184918/adding-additional-children-when-setting-in-geofire-firebase

I hope that makes enough sense.


#8

Thanks a lot for this… Things were a bit confusing earlier … I am going to try it again now :smiley:


#9

Cool, what are you using Geofire for?


#11

@mhartington @ceckman Any codepens or plunker examples for reference.


#12

I get this error: EXCEPTION: Uncaught (in promise): TypeError: a.GeoFire is not a constructor

My code goes as follows:

 getGeolocation(): void {
    this.platform.ready().then(
      () => Geolocation.getCurrentPosition().then(
        location => this.saveGeolocation(location)
      )
    )
  }

        saveGeolocation(location): void{
	 	console.log(location); //works
	 	var usersRef =  firebase.database().ref('users/geofire');
	 	console.log(usersRef.toString());
		var geoFire = new GeoFire(usersRef); //Doesn't work. Error shows here.

		//geoFire.set('geolocation', [location.coords.latitude,location.coords.longitude])
	 }

what am I doing wrong?

My dependencies are:

    "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/app-scripts": "0.0.37-5",
    "@ionic/storage": "1.1.6",
    "angularfire2": "^2.0.0-beta.6",
    "es6-promise": "^4.0.5",
    "es6-shim": "^0.35.1",
    "es7-reflect-metadata": "^1.6.0",
    "firebase": "^3.6.1",
    "geofire": "^4.1.2",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  }

Can you help me, please? :sweat: