Firebase is cool, GeoFire is just awesome

Sunil Kumar
Jun 13, 2016 · 2 min read

The new addon to Firebase is the open source GeoFire library, it allows you to create the next generation and cool location aware apps with ease using the Firebase realtime database for storing location as they change in real time. It also allows you to in real time retrieve all those keys within the given geographical limits.

The GeoQuery method helps you return your query data sets for matched location within a given radius keeping processing at pace and responsive.

Let’s create a basic webapp to add dummy location and parse via GeoFire to Firebase database.

Step 1:

Import the Firebase and GeoFire library in the head of index.html file as below:

<!DOCTYPE HTML>
<html>
<head>
<title>Firebase is cool, GeoFire is just awesome</title>
<! — Firebase →
<script src=”https://www.gstatic.com/firebasejs/3.7.0/firebase.js"></script>

<! — GeoFire →
<script src=”https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<…..>

Step 2:

Create a Javascript empty file and import it in the <head> of index.html, we will add our GeoFire methods in this file.

<script>
//Connection to your firebase database
firebase.initializeApp({
apiKey: “<your-firebase-api-key>”,
databaseURL: “https://<your-firebase-app-name>.firebaseio.com"
});

//Create a node at firebase location to add locations as child keys
var usersRef = firebase.database().ref(“users”).push();

// Create a new GeoFire key under users Firebase location
var geoFire = new GeoFire(firebaseRef.child(“geofire”));

</script>

Step 3:

You may obtain a location value using wikimapia or you can customise this code to use HTML5 Geolocation API.
<script>
geoFire.set(<any-name-identifier>, [<lat>,<long>]).then(function() {
console.log(“Location added”)
}).catch(function(error) {
console.log(error);
});
</script>

Step 4:

Login to Firebase console and you should now see an entry like below:

Step 5:

The awesome part of GeoFire, assuming you created location based app and plotted current online users on a Google Map, you can use the onDisconnect event to in real time remove the user marker from the map.

<script>

//When a the user exits the browser his data is removed form Firebase database
usersRef.child(“_geofire”).onDisconnect().remove();

</script>


There is lot more inside GeoFire for developers looking out for an awesome location aware app, this was just a very basic example of GeoFire awesomeness. You can create state of the art app like real time cab locator or location based real time chat applications using the powerful GeoFire and Firebase database.

Show logged-in users on map and remove marker when they disconnect

var latitude = location.coords.latitude;var longitude = location.coords.longitude;var username = "xyz";var geoFireTest = new GeoFire(firebaseRef);var fbRef = firebase.database().ref().push();geoFireTest.set(username, [latitude, longitude]).then(function() {    fbRef.child(username).onDisconnect().remove();}).catch(function(error) {    log("Error");});

Stay Tuned for more GeoFire and Firebase awesomeness.

Google Cloud Platform - Community

A collection of technical articles published or curated by Google Cloud Platform Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Sunil Kumar

Written by

Angular, Ionic, Capacitor Developer, WordPress WooCommerce, Google Firestore and Cloud Function Expert

Google Cloud Platform - Community

A collection of technical articles published or curated by Google Cloud Platform Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.