Tag Archives: Firebase

Gmaps: Activity Logger

1I’ve been thinking about logging web map user interactions for a while, heavily inspired by sparkgeo‘s Maptiks product. If you haven’t tried Maptiks, you should. The Maptiks dashboard provides you with lots of interesting factoids like map loads, bounce rate, load times, and a heatmap of where users are looking, stratified by zoom level. I have no doubt that this is more than enough data for most people.

With that said, and no offense intended to sparkgeo who I imagine are too busy to address feature requests, the feature I feel that’s missing from Maptiks is that you can’t actually download user interaction data for further analysis. This map, which coincidentally uses Maptiks, is somewhat of a proof of concept towards that goal. The map on the left is what would be presented to the user. When the user navigates, that information (specifically, map center coordinates) is sent to a Firebase (a cloud-based database-type thing), and displayed on the map on the right. I’ve limited the Firebase to only store about 200 points, but that could be expanded to collect many more interactions, although I’m not sure at what point performance would be crippled. I assume a dedicated server would handle the storage of these interactions with little effort. Click and zoom activities could be similarly captured.

Have fun!

edit: I’ll also add that, as with most Firebase apps, the data updates in real time, so you may notice others using the map at the same time as you!


Egg Log

egglogA couple of friends just got some backyard chickens, which is very exciting. They were having trouble keeping track of which chickens were laying which eggs, who was laying when, etc. so they started looking into online data entry apps. They wanted data entry to be mobile and collaborative between them, and they wanted a website they could refer to on the road (they field a lot of questions about their eggs). Google Drive was the obvious first choice, but the app didn’t work on one of their phones. So, I made them this super-simple, Firebase-powered data viewer. They also have a similar data entry web page, feeding records into Firebase.

Check it out for (mostly) up-to-date egg records!

Map Something! – Collaborative Mapping


Along the lines of Draw Something, I present Map Something, a collaborative, live-updating mapping site. Not a finished project, but pretty cool so far. You can navigate around (i.e. pan/zoom), add points, and delete all points. The really cool thing is that when you do any of that, it updates automatically in everyone else’s browser. Want to show someone where to meet? Navigate there and show them!

Future updates would include tackling line/polygon geometries, selective deleting, and chat.

The live-update is courtesy of Firebase, and the map is, of course, Google Maps API. Give it a try!



As an exercise in file format juggling, I made this example using the UTM grid installed with ArcGIS (a shapefile).

Convert Shapefile to JSON

This is fairly simple at ArcGIS 10.2 (new at 10.2), using the Features to JSON tool. Output is .json file.

Load JSON into Firebase

If I have an excuse to use Firebase to host data, I will (no server code, free unless this goes viral, etc.). I suppose I could host the JSON directly in my web hosting account, but Firebase is more fun. The JSON text itself is entirely embedded in the JavaScript, which I certainly wouldn’t do in a production environment. Loading JSON into Firebase is as easy as setting a reference to your Firebase location, and calling .set() to overwrite, or .push() to append.

Plot Firebase data in Google Maps

Get the JSON response from Firebase using a URL like: Firebase Location + ‘.json?callback=’ + Some Function. This requests JSON from Firebase, then triggers Some Function. Inside my function, I parse the JSON into polygons, add to the map, set up infoWindows, etc.

At its worst, this is a UTM zone map. At its best, this is a way to get complex(ish) spatial data into Firebase to take advantage of the live data side of things. Have fun.


Multiplayer Hangman


Still on my Firebase kick. Here is a live, multiplayer game of hangman I came up with. There are unlimited guesses, and really no amazing payoff to winning – it was more of a personal exercise in JavaScript/jQuery/Firebase than anything else.

The cool thing about it is you can see live changes other players are making. Since there will hardly ever be two people playing at once, you can convince yourself that it’s live by opening two browser windows to the page. Enjoy.



EDIT: this map was once boringly called “Point Recorder” but is now called CinnaMap.

One of my coworkers is famously obsessed with cinnamon buns and I thought it would be fairly simple to set up a map on which to log cinnamon bun ratings.


  • Add points
  • Attribute points
  • Save points
  • Free
  • No onsite server

I’m sure there is a solution out there that will do this, but after a while of searching and finding a few options that didn’t quite fit my needs (like, say, Fulcrum or ArcGIS Online), I bit the bullet and made my own.

The APIs I used are Google Maps API (the map), Firebase (the database-type thing), and Maptiks (analytics). As my expectations for this map going viral are low, I should be well within the usage limits for free access to each.

To add a point: start editing (checkbox at bottom-right), click where you want to add a point, and fill out the data prompts. That’s it. Have fun. Feel free to add as many points as your heart desires.

Collaborative Heatmap: Fav. Bike Route


I’ve been playing around with a cool, real-time, client-side code driven cloud database called Firebase for the last while, and here is one of the projects that came out of it.

There is a local need to identify the streets and other routes that are actually used by cyclists in Prince George, BC (not just “where are the bike routes?”). That sounds like a heatmap to me. Using jQuery Mobile (frontend), Google Maps API (maps), and Firebase (backend), the user can add a direction line to the map (“Add Route” button), modify the directions if they do not show the desired route (drag the route or end points), and save the route (“Submit Route” button). Once the route has been saved, the heatmap will update to reflect the addition. And the cool part is: it will update everyone else’s view in real time, which is important because I know this will go viral. Also cool, I didn’t write a single line of server-side code.

Go ahead and play with the map – add as many lines as you want. I’ve set it so the directions default to Prince George, but you can drag and submit them wherever you want. The biggest limitation of the map is that the directions are converted to points to feed into the heatmap, so in the end it is really a heatmap of most popular corners, not routes.

Disclaimer: this seems to work fine in my versions of Chrome and IE (surprise), but not my iPad’s Safari. Please let me know if you have any insight.