AngularGeoFire
Angular service wrapping the GeoFire geospatial lib for Firebase
Install / Use
/learn @mikepugh/AngularGeoFireREADME
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="bower_components/firebase/dist/firebase.js"></script>
<script src="bower_components/rsvp/rsvp.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<script src="bower_components/geofire/dist/geofire.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.$set). AngularGeoFire translates GeoFire's RSVP promises into Angular $q service promises. The GeoFire "on" events are translated into Angular broadcasts to be consumed anywhere in your app.
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
$scope.$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
Related Skills
node-connect
342.5kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
85.3kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
342.5kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
342.5kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。

