Monthly Archives: April 2015

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.