Appending Geofire distance to corresponding html with Angular?

[Justin]

Hello, I am faced with an issue in trying to find the best way to get the number of miles from the user to an array of locations (multiple distances) into the html where they belong. One distance may appear in many different places on my website at once, but those html snippets are dynamically generated; one for each key that exists in the firebase location responsible for content inside of those snippets. 

An example would be a restaurant that has many deals going on and they are all hosted as coupons on my website in random places. The html of the coupon is a template and is the same as every other coupon from every other restaurant. Each restaurant has a place on my firebase under 'restaurants' where it contains details such as name, address, etc. My firebase also has a place for Deals, which contains the restaurant name, address, and deal details for every restaurant that has a deal. Whether it is a deal on the website, or a restaurant, I need the distance away from the restaurant that deal belongs to, and the distance away from the restaurant itself to appear everywhere it is necessary. I imagine this is completed most effectively with Angular, but because the distance isn't a static number, I do not know how to attach it to the html since I cannot store that number on firebase (as it will be different for every user). 

Thank you in advance, 

Justin

 

[Jacob Wenger]

Hey Justin,

I unfortunately don't know if I fully understand what your question is or how it exactly refers to GeoFire (since you only seemed to mentioned GeoFire in the title). If I understand the gist of what you're saying, I think the solution here is to use GeoFire and set a GeoQuery around the current user's location. Then, as keys enter the query, you will get the key name and distance from the current user. See the example in this section of the GeoFire docs.

Jacob

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/a03f5710-b47f-456d-b5ff-2027a0c540f6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Justin]

Thank you for that link, it helped me better formulate my question: What I would like to do is grab the coordinates key pair from each of the places stored in my firebase, find their distances from the user, and then send that distance back to firebase under the proper location. I don't quite understand how to accomplish this. Any help would be much appreciated.

The data looks like this: 

Location1 {

     Coordinates {

          x: "123.4567" y: "12.3456"

     }

     Distance {

          12.34567

     }

}

Location2 {

     Coordinates {

          x: "123.4567" y: "12.3456"

     }

     Distance {

          12.34567

[Jacob Wenger]

Hey Justin,

I'll try to walk you through your best option here. First off, I don't think storing the distance in Firebase makes a whole lot of sense. If you store the coordinates in Firebase, you can easily grab them and then calculate the distance client-side. If the distance is constantly changing (if the user changes position), then you will constantly be updating the distance in Firebase, which seems wasteful since you can just do that client-side.

That being said, let me get to your actual question. Your data structure would look like this:

{

  "_geofire": {

    // don't worry what goes in here, GeoFire handles all this for you

  },

  {

    "locations": {

      "$locationId": {

        "name": "Bob's Burgers",

        "city": "Seymour's Bay",

        "latitude": <latitude>,

        "longitude": <longitude>

        // ... other location metadata

      }

    }

  }

}

We will store our GeoFire index at /_geofire. To add a location to that index, we can use GeoFire's set() method:

var ref = new Firebase("https://<your-firebase>.firebaseio.com");

var geoFire = new GeoFire(ref);

ref.child("locations").on("child_added", function(snapshot) {

  var locationId = snapshot.key();

  var location = snapshot.val();

  geoFire.set("<location_id>", [location.latitude, location.longitude]).then(function() {

    console.log(locationId + " has been added to GeoFire");

  }).catch(function(error) {

    console.log("Error adding " + locationId + " to GeoFire: " + error);

  });

});

Note that since I'm assuming these locations won't move, you only need to add the locations to GeoFire one time. It makes sense to let some sort of server process handle this for you.

Now, when a new user uses your app, you can use whatever method to get their current location. Once you have that, create a new GeoQuery centered at their location:

// getUserLocation() is your own code somewhere

var userLocation = getUserLocation();

var geoQuery = geoFire.query({

  center: [userLocation.latitude, userLocation.longitude],

  radius: 5

});

We want to get notified whenever a location enters our query, so let's add a listener for that:

var onKeyEnteredRegistration = geoQuery.on("key_entered", function(key, location, distance) {

  console.log(key + " entered query at " + location + " (" + distance + " km from center)");

});

Notice how GeoFire sends us the location (latitude / longitude pair) and the distance from the query center (aka the user) to the location. We don't need to store any of this information in Firebase like you suggested because GeoFire handles it for us.

If our user moves, we can update the query's center:

// users's location is now store in newLocation

geoQuery.updateCriteria({

  center: [newLocation.latitude, newLocation.longitude]

});

You could also change the query radius if you wanted.

That should help you understand how this works on a step-by-step basis. Please look into our many GeoFire examples for full code samples and more complex use cases.

Good luck!

Jacob

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/ef07b2fb-2473-45f7-8c55-f33fd9f59f31%40googlegroups.com.