startupandrew/AngularGeoFire

Angular service wrapping the GeoFire geospatial lib for Firebase

AngularGeoFire

Angular service wrapping the GeoFire geospatial lib for Firebase.

Usage

bower install angularGeoFire

In your app, include the Firebase and GeoFire libraries (technically AngularGeoFire doesn't depend on AngularFire but you'll probably want to use it).

<script src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="bower_components/rsvp/rsvp.min.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<script src="bower_components/geofire/dist/geofire.min.js"></script>
<script src="bower_components/AngularGeoFire/dist/angularGeoFire.js"></script>

Include angularGeoFire.min.js and then include it in your app dependency. The API matches that of geoFire @ https://github.com/firebase/geoFire, just prefix the method calls with a $ (ex: $geoFire.$getPointsNearLoc). AngularGeoFire returns promises vs geoFire's passing of callbacks, with the exception of the $onPointsNearXX and $offPointsNearXX methods which accept a broadcast name and will broadcast the data from geoFire using the broadcast name passed in.

angular.module('yourApp', ['angularGeoFire']);

Then you can reference the dependency in your services or controllers

angular.module('yourApp')
  .controller('SomeCtrl', function($scope, $geofire, $log) {
    $scope.searchResults = [];

    var $geo = $geofire(new Firebase('https://<<your-firebase>>.firebaseio.com/'));

    // Trivial example of inserting some data and querying data
    $geo.$set("some_key", [37.771393,-122.447104])
        .catch(function(err) {
            $log.error(err);
        });

    // Get some_key's location, place it on $scope
    $geo.$get("some_key")
        .then(function (location) {
            $scope.objLocation = location;
        });

    // Remove "some_key" location from forge
    $geo.$remove("some_key")
        .catch(function (err) {
            $log.error(err);
        });


    // Setup a GeoQuery
    var query = $geo.$query({
        center: [37.77, -122.447],
        radius: 20
    });

    // Setup Angular Broadcast event for when an object enters our query
    var geoQueryCallback = query.on("key_entered", "SEARCH:KEY_ENTERED");

    // Listen for Angular Broadcast
    $rootScope.$on("SEARCH:KEY_ENTERED", function (event, key, location, distance) {
        // Do something interesting with object
        $scope.searchResults.push({key: key, location: location, distance: distance});

        // Cancel the query if the distance is > 5 km
        if(distance > 5) {
            geoQueryCallback.cancel();
        }
    });

    // See geofire documentation for other on("..") events available







  });

Contribute

License

MIT