Sagar Sagar - 4 months ago 81
Javascript Question

Fetch list of restaurants in user's proximity using Firebase-GeoFire

I have a list of restaurants each of which has a fixed location which is stored in GeoFire. Now I want to display the restaurants within a fixed radius of user location. How can I achieve this using GeoFire. The documentation here, https://github.com/firebase/geofire-js/blob/master/docs/reference.md#geofiresetkeyorlocations-location mostly suggests solutions in which geofire 'keys' are moving which are handled using key_entered, key_exited etc. But I'm not able to figure out how to access the keys in proximity.

My controller code looks like:

var ref = firebase.database().ref();
var geoFire = new GeoFire(ref.child("geofire"));
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
$scope.rest= [];
$scope.filteredRest = [];
var geoQuery = geoFire.query({
center: [position.coords.latitude, position.coords.longitude],
radius: 15
});
geoQuery.on("key_entered", function(key, location, distance) {
console.log(key);
$scope.filteredRest.push(key);
});
geoQuery.on("ready", function() {
geoQuery.cancel();
});
console.log($scope.filteredRest);


The key is printed on console but is not pushed to filteredRest array.

I'm looking to achieve 'Example usage' in following link:
https://github.com/firebase/geofire-java#example-usage

There are similar questions but most of them are in ios/swift and the answers are not very informative. I'm using GeoFire-JavaScript. Any help would be appreciated.

Answer

To handle when all the initial keys are synchronized, put the code into the ready handler. For example, say you want to print all the initial keys:

var ref = firebase.database().ref();
var geoFire = new GeoFire(ref.child("geofire"));
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
$scope.rest= [];
$scope.filteredRest = [];
var geoQuery = geoFire.query({
  center: [position.coords.latitude,  position.coords.longitude],
  radius: 15
});
geoQuery.on("key_entered", function(key, location, distance) {
  $scope.filteredRest.push(key);
});
geoQuery.on("ready", function() {
  geoQuery.cancel();
  console.log($scope.filteredRest);
});