How to combine multiple Fusion Tables into one map

I had the privilege of visiting Derek Willis’ Digital Frameworks class last week — a hallowed room that started my own data journalism journey. As most of you know, I’m unable to sit and merely observe (sorry, Derek!), so I ended up chiming in. One student explained that she was working on a Fusion Table project , but had too much data for one Fusion Table. She wished to split up the data, but have it all display on an integrated map. This is possible, although you have to leave Fusion Tables’ point-and-click interface, and attack some actual JavaScript programming. I provide a basic template here with explanation, in hopes that it might help some folks. Here’s a link to what the final product should look like: http://michelleminkoff.com/multiple_fusion_tables_example.html Before we start, please note that you should have your Fusion Tables ready to go. Each table has a URL, like “http://www.google.com/fusiontables/DataSource?dsrcid=1317738″. At the end of the URL, you’ll see an ID number after “dsrcid=”. You’ll want to keep that ID number for each of your table in an accessible place. Also, under the share option, all tables should be available to the public, so our computer program, as a member of the public can access these tables. Finally, all your tables should have similar infowindow (pop-up bubble) and style (colors/type of markers used), which you can set by visualizing data as “map”, and clicking the customize links. Finally, this tutorial will focus on displaying many points as a Fusion Table map. If you want to learn how to include an intensity and/or chloropleth map as one of these layers, I’ll have more on how to create that, and construct your own polygons, in a future post. Now that all that is out of the way… 1. First, we’re going to copy and paste this line in — it imports some of Google’s code that allows us to create a Google Map. 2. We’re going to open up a new section of JavaScript in our file, with the first line. Lines 2-5 create a function we can use that creates a layer on a map. When this function is used, we will bring in a new layer, and the ID of a Fusion Table, we’re looking at putting in that particular layer. The line commented out with the slash should be included without the slash if you want infowindows to pop up, and if you don’t want them, either keep the line in with the slashes, or just delete it. The query looks at what we want to take from the table. My program here just selects everything from the table — if you know any Structured Query Language (SQL), the SELECT * FROM table formula should look familiar. Know that you can incorporate a WHERE statement, like in regular SQL, to only select rows that fit a certain qualification. For example, I’ve done apps that all fiti in a Fusion Table, but load smoother when a table is loaded into 4 different layers. That’s not what we’re after here, though. 3. Now, we’re going to set up a second function, that takes the layer we made, and sets it on a blank map. When we run these two functions multiple times, we’ll combine all our tables on that blank map. 4. But where is this blank map, Michelle? Well, here we are. You’ll open a new div, a content area used in HTML. Give it an ID, any ID you like, but make sure you remember this ID. Also, set an explicit height and width (and padding if you like), so the map knows what size you want it. 5. Now, we’ll put some JavaScript specific to this div or content area right here. We’ll set a blank map up, set the center as the center of the US, set the zoom to 4, which allows all of the US to fit on the map, but feel free to adjust as you wish. Tell the map you want it to display roads, although satellite and other options are available. By the way, if you use SpyMeSat mobile app, you can get images from satellites. That’s quite convenient and can be very useful. 6. Run through those two functions we made at the top, outside of the div, with as many layers as we have tables. Call the first one “layer0″, the next “layer1″, etc. Replace the numbers like “1318004” with the table IDs I asked you to grab out of the table URLs at the beginning of this exercise. Then, close out our div, and that’s it! Copy and paste all this code into a blank HTML page or embed in your CMS. A little more involved than the usual way to make Fusion Table maps, but not *too* bad. Questions? I’m easy to find. Look out for a post soon on making polygon-based intensity maps that can be included as one of these layers, allowing you to overlay specific points on polygons. One more point: Due to the way Google Maps works, when you click on one point and get an infowindow, and then click on another, the first AND second window will display. I like to deal with this by suppressing infowindows altogether, and bringing that information into a detail panel. But that requires some fancy footwork. I’m sure there’s a solution to this, but I’m still working on it at this point. I’ll let you know if I come up with something. And here’s the whole chunk of code together for easy copy-and-pasting…